.mobile-nav { display: none; }

@media (max-aspect-ratio: 4/3) and (min-width: 761px) and (min-height: 501px), (max-aspect-ratio: 4/3) and (min-width: 761px) and (pointer: fine), (max-aspect-ratio: 4/3) and (min-width: 761px) and (pointer: none) {
  :root { --left: 13.5rem; --right: 21rem; }
  .page-columns { grid-template-columns: minmax(0, 1fr); overflow-y: auto; align-items: stretch; }
  .page-columns > .panel { max-height: none; }
  .hero-copy p { display: none; }
  .bank-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .journal-columns { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
}
@media (max-width: 1180px) and (min-width: 761px) and (min-height: 501px), (max-width: 1180px) and (min-width: 761px) and (pointer: fine), (max-width: 1180px) and (min-width: 761px) and (pointer: none) {
  html { font-size: 12px; }
  .brand small { display: none; }
  .bank-body { grid-template-columns: minmax(0, 1fr) 17rem; }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  html { font-size: 13.5px; }
  :root { --top: 3.5rem; --gap: .5rem; --pad: .5rem; --nav: calc(4.1rem + var(--safe-b)); }
  .ia-client { display: flex; flex-direction: column; padding: 0; }
  .region-top { flex: none; height: var(--top); margin: 0; }
  .topbar { gap: .45rem; padding: 0 .5rem; }
  .topbar::after { display: none; }
  .brand { width: auto; }
  .brand > div, .topbar > [data-action="settings"] { display: none; }
  .brand .ia-emblem { width: 2.1rem; height: 2.1rem; }
  :root:has(#ia-top > .np-level) { --top: 5.05rem; }
  .region-top:has(> .np-level) { display: flex; flex-direction: column; }
  .region-top:has(> .np-level) > .topbar { flex: 1 1 auto; height: auto; min-height: 0; }
  .np-level { --skill: var(--gold-2); flex: none; display: flex; align-items: center; gap: .55rem; height: 1.55rem; padding: 0 .75rem; font-size: .8rem; color: var(--text-2); white-space: nowrap;
    background: rgba(6, 10, 18, .94); border-bottom: 1px solid rgba(214, 170, 96, .3); }
  .np-level > span { flex: none; }
  .np-level b { font-weight: 600; color: var(--skill); }
  .np-level .bar { flex: 1 1 auto; min-width: 2rem; height: .3rem; background: rgba(255, 255, 255, .1); box-shadow: none; }
  .np-level .bar > i { background: var(--skill); box-shadow: none; }
  .np-level small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; color: var(--text-3); }
  .portrait { width: 2.3rem; height: 2.3rem; }

  .center { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .5rem .5rem calc(var(--nav) + .5rem); }
  .stage-host { flex: 1; min-height: 0; }
  .stage, .stage.is-place { overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .region-left, .region-right, .region-chat { display: none; }

  .ia-client[data-sheet] .region-left, .ia-client[data-sheet] .region-right, .ia-client[data-sheet] .region-chat { position: fixed; z-index: 40; left: .5rem; right: .5rem; top: calc(var(--top) + .5rem); bottom: calc(var(--nav) + .5rem); animation: sheet-in .28s var(--ease-out); }
  .ia-client[data-sheet="skills"] .region-left { display: flex; }
  .ia-client[data-sheet="gear"] .region-right { display: flex; overflow-y: auto; padding-top: .1rem; }
  .ia-client[data-sheet="chat"] .region-chat { display: block; }
  .ia-client[data-sheet="chat"] .chat, .ia-client[data-sheet="chat"] .chat.is-collapsed { height: 100%; }
  .ia-client[data-sheet]::after { content: ""; position: fixed; inset: var(--top) 0 var(--nav); z-index: 39; background: rgba(3, 5, 10, .6); backdrop-filter: blur(2px); }
  .dock.gear { flex: none; }
  @keyframes sheet-in { from { opacity: 0; translate: 0 1.5rem; } }

  .mobile-nav { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: var(--nav); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .3rem .15rem var(--safe-b); background: linear-gradient(180deg, rgba(18, 28, 46, .97), rgba(6, 10, 18, .99)); border-top: 1px solid rgba(214, 170, 96, .45); box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .5); }
  .mnav-item { position: relative; display: grid; justify-items: center; align-content: center; gap: .1rem; min-width: 0; border-radius: .6rem; color: var(--text-3); font-size: .6rem; font-weight: 700; letter-spacing: 0; }
  .mnav-item > span:not(.sr-badge) { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mnav-item .ia-emblem { width: 1.6rem; height: 1.6rem; transition: translate .2s var(--ease-spring); }
  .mnav-item small { position: absolute; top: .12rem; right: .1rem; font-size: .54rem; color: var(--gold-2); }
  .mnav-item .sr-badge { position: absolute; top: .1rem; right: .35rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .22rem; font-size: .6rem; }
  .mnav-item.is-active { color: var(--gold-1); background: radial-gradient(80% 90% at 50% 100%, rgba(242, 198, 106, .22), transparent); }
  .mnav-item.is-active .ia-emblem { translate: 0 -.12rem; }

  .page { position: relative; inset: auto; display: flex; flex-direction: column; gap: .9rem; padding-bottom: .5rem; }
  .page-columns, .bank-body, .journal-columns { display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; padding-top: .7rem; }
  .page-columns > .panel, .bank-body > .panel { max-height: none; }
  .card-grid, .detail-scroll, .inspect-scroll, .bank-scroll, .market-list, .chronicle-scroll, .market-side, .journal-side,
  .lb-tabs, .lb-scroll, .fishlog-scroll, .area-scroll, .gear-body, .dock.gear .dock-body, .store-cats, .store-scroll,
  .clan-page, .clan-roster .clan-scroll, .clan-found-body { overflow: visible; }
  .fishlog-scroll, .lb-tabs, .lb-scroll, .area-scroll { max-height: none; min-height: 0; }
  .td-list { position: static; width: auto; max-height: none; overflow: visible; margin-top: .3rem; }
  .bq-list { max-height: none; overflow: visible; }
  .bq-acts .btn-icon.btn-sm { width: 2.2rem; min-height: 2.2rem; }
  .card-grid { grid-template-columns: 1fr; padding: .35rem .6rem .7rem; }
  .choose-tools { padding: 0 .6rem .5rem; }
  .choose-tools.is-recipes .segmented { flex-wrap: wrap; width: 100%; justify-content: center; }
  .choose-tools.is-recipes .segmented button { padding: .28rem .5rem; font-size: .74rem; }
  .res-card { min-height: 4.4rem; }
  .res-card.is-future { min-height: 3rem; }
  .skill-page .card-copy small, .skill-page .card-level small, .skill-page .card-people, .skill-page .chip, .skill-page .fact small, .skill-page .fact .fact-note, .skill-page .hero-level small,
  .skill-page .hero-bar small, .skill-page .area-head small, .skill-page .action-note, .skill-page .t-caps, .skill-page .bar-label, .skill-page .rate small, .skill-page .drops .t-caps { font-size: .9rem; }
  .skill-page .fact > div, .skill-page .detail-summary, .skill-page .callout, .skill-page .drop-row, .skill-page .craft-product p, .skill-page .catch-record { font-size: .95rem; }
  .skill-page :is(.drop-row, .fact > div, .btn, .segmented button) small { font-size: .9rem; }
  .skill-page .card-level small, .skill-page .hero-level small, .skill-page .fact small { letter-spacing: .06em; }
  .skill-page .btn, .skill-page .btn-sm, .skill-page .segmented button { min-height: 3.3rem; font-size: .95rem; }
  .skill-page .choose-tools.is-recipes .segmented button { font-size: .9rem; }
  .skill-page .craft-table header { font-size: .9rem; letter-spacing: .06em; }
  .skill-page .craft-row { font-size: .95rem; }
  .skill-page .pc-copy small, .skill-page .action-status, .skill-page .callout .t-muted { font-size: .9rem; }
  .skill-page .tier-badge { min-width: 1.6rem; height: 1.4rem; font-size: .9rem; }
  .skill-page .card-copy small { white-space: normal; }
  .skill-page .gd-strip-copy small, .skill-page .gd-strip-next small { font-size: .9rem; }
  .skill-page .gd-strip-copy .t-num { font-size: .95rem; }
  .res-card.is-bin .card-copy small { white-space: normal; overflow: visible; text-overflow: clip; }
  .hero { flex-wrap: wrap; gap: .7rem; padding: .75rem; }
  .hero .medal { --size: 3.3rem !important; }
  .hero-copy h1 { font-size: 1.55rem; }
  .hero-copy p { display: none; }
  .hero-progress, .hero-stats { flex: 1 1 100%; min-width: 0; }
  .hero-bar, .hero-next { min-width: 0; }
  .hero-stats { flex-wrap: wrap; }
  .hero-running { position: static; translate: none; width: 100%; white-space: normal; }
  .hero:has(.hero-running) { padding-bottom: .75rem; }
  .facts { grid-template-columns: 1fr; }
  .farm-body { overflow: visible; padding: 0 .6rem .7rem; }
  .plot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .45rem; }
  .plot-grid .plot-tile { grid-column: auto !important; grid-row: auto !important; }
  .compost-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clan-acts { white-space: normal; }
  .clan-acts .btn { margin: .12rem 0 .12rem .25rem; }
  .clan-hero .bstat { flex: 1 1 9rem; }
  .bstat b { flex-wrap: wrap; }
  .bench-hero { grid-template-rows: minmax(0, 1fr); }
  .journal-row { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .journal-progress { grid-column: 1 / -1; }
  .find-grid { grid-template-columns: 1fr; }
  .bank-header { gap: .7rem; }
  .bank-stats { width: 100%; }
  .bstat { min-width: 0; flex: 1; }
  .bank-tools { width: 100%; margin: 0; }
  .bank-tools .search { flex: 1; width: auto; }
  .bank-hints { display: none; }
  .bank-grid { grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); }
  .listing { grid-template-columns: 2.8rem minmax(0, 1fr) auto; }
  .listing .btn { grid-column: 1 / -1; }
  .xp-drop { right: .8rem; top: calc(var(--top) + .8rem + var(--stack, 0) * 1.9rem); }
  .xf-well:is(.r-uncommon, .r-rare, .r-epic, .r-legendary, .r-mythic)::before { left: .12rem; top: .12rem; width: .3rem; height: .3rem; }
  .xf-well .piece-mark { left: .05rem; bottom: .05rem; width: 48%; }
  .fx-layer:has(.loot-pop, .loot-tally) { padding: 0 .6rem calc(var(--nav) + .8rem) 0; }
  .loot-pop .lp-copy b, .loot-tally .lt-item b { font-size: .95rem; }
  .loot-pop .lp-copy small, .loot-pop .lp-power, .loot-tally .t-caps { font-size: .9rem; }
  .level-up { top: 22%; padding: .7rem 1.4rem .7rem .7rem; }
  .level-up { width: max-content; max-width: calc(100vw - 1.5rem); }
  .lu-copy small { font-size: .9rem; letter-spacing: .16em; }
  .level-up.is-pet .lu-copy .btn { min-height: 3.3rem; font-size: .95rem; }
  .region-left > .skillbar :is(.skill-row, .rail-group-head) { min-height: 3.3rem; }
  .region-left > .skillbar .rail-group-head { font-size: .9rem; letter-spacing: .1em; }
  .region-left > .skillbar .sr-name > span:first-child { font-size: .95rem; }
  .region-left > .skillbar :is(.sr-levels, .skillbar-foot small, .skillbar-foot .chip) { font-size: .9rem; }
  .region-left > .skillbar [data-action="rail-toggle"] { width: 3.3rem; min-height: 3.3rem; }
  .toasts { top: calc(var(--top) + .4rem); width: calc(100% - 1rem); }
  .toast, .toast-copy strong, .toast-copy small { font-size: .9rem; }
  .region-tutorial > .update-notice { margin: 0 0 .45rem; padding: .3rem .35rem .3rem .7rem; font-size: .86rem; }
  .region-tutorial > .update-notice + .panel { margin-top: .7rem; }
  .region-tutorial > .guest-notice { margin: 0 0 .45rem; padding: .3rem .35rem .3rem .7rem; font-size: .86rem; }
  .region-tutorial > .guest-notice + .panel { margin-top: .7rem; }
  .ia-client.in-world .region-tutorial { display: none; }
  .world-panel { overflow-y: auto; overscroll-behavior: contain; }
  .world-host { flex: 1 0 auto; min-height: 13rem; }
  .world-bar { flex-wrap: wrap; }
  .hudbar { padding: .45rem .5rem; gap: .4rem; }
  .world-title small { display: none; }
  .chip-people .people-at { display: none; }
  .chat-tab-place { max-width: 7rem; }

  .btn { min-height: 2.75rem; }
  .btn-sm { min-height: 2.35rem; padding: .4rem .8rem; }
  .btn-lg { min-height: 3.2rem; }
  .btn-icon { min-height: 2.6rem; width: 2.6rem; }
  .btn-icon.btn-sm { min-height: 2.35rem; width: 2.35rem; }
  .chat-tab { padding: .6rem .8rem .65rem; }
  .filter-chip, .goal-go, .goal-pin, .auto-toggle, .pb-drink { min-height: 2.2rem; }
  .segmented button { min-height: 2.2rem; padding: .35rem .75rem; }
  .rail-group-head { min-height: 2.4rem; padding: .5rem .45rem .4rem; }
  input:not([type="range"]), select, .input, .select, .search input { min-height: 2.6rem; }
  input:not([type="range"], [type="checkbox"], [type="radio"]), select, textarea { font-size: 16px !important; }
  input[type="range"] { height: 2.4rem; }
  .src-btn, .tut-fold, .pb-auto, .rail-toggle { position: relative; }
  .src-btn::after, .tut-fold::after, .toggle::before, .bank-tab::after {
    content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: max(100%, 2.6rem); height: max(100%, 2.6rem);
  }
  .pb-auto::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100%, 2.1rem); height: max(100%, 2.1rem); }

  .ia-client[data-sheet] .region-left, .ia-client[data-sheet] .region-right, .ia-client[data-sheet] .region-chat,
  .modal, .welcome-scroll, .profile-scroll, .clan-profile-scroll, .src-scroll, .context-menu, .popover, .hud-pop,
  .chat-log, .skill-scroll { overscroll-behavior: contain; }
  .modal { max-height: calc(100% - 1rem); }
  .welcome-scroll, .profile-scroll { max-height: none; }
  .src-scroll { max-height: 56vh; }
  .clan-profile-scroll { max-height: 50vh; }
  .hud-pop { max-height: 50vh; }
  .context-menu, .popover { max-height: calc(100vh - var(--top) - var(--nav) - 1rem); overflow-y: auto; }
  .context-menu { min-width: 13.5rem; }
  .context-menu button { min-height: 44px; padding: .6rem .6rem; font-size: .9rem; }
  .context-menu header { font-size: .95rem; }
}