/* Evertrail Idle client · smaller desktops, tablets and phones */
.mobile-nav { display: none; }

@media (max-aspect-ratio: 4/3) and (min-width: 761px) {
  :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; }
  .market-columns, .journal-columns { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  html { font-size: 12px; }
  .brand small, .stat-pill small, .unit-frame small { display: none; }
  .bank-body { grid-template-columns: minmax(0, 1fr) 17rem; }
}

/* ------------------------------------------------------------------ Phones */
@media (max-width: 760px) {
  html { font-size: 13.5px; }
  :root { --top: 3.5rem; --gap: .5rem; --pad: .5rem; --nav: calc(4.1rem + env(safe-area-inset-bottom)); }
  .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, .top-stats > :not(:first-child):not(.store-pill), .store-pill .pill-label, .unit-frame > span:not(.portrait), .unit-frame > .ia-glyph, .topbar > [data-action="settings"] { display: none; }
  .brand .ia-emblem { width: 2.1rem; height: 2.1rem; }
  .now-playing { flex: 1; max-width: none; padding: .25rem .3rem; gap: .45rem; }
  .now-playing .medal { --size: 2rem; }
  .np-copy small { display: none; }
  .now-playing .btn:not(.btn-danger) { display: none; }
  .top-stats { margin-left: 0; }
  .stat-pill { height: 2.2rem; padding: 0 .55rem 0 .3rem; }
  .unit-frame { padding: .15rem; border: 0; background: none; }
  .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 { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .region-left, .region-right, .region-chat { display: none; }

  /* Sheets */
  .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(4, 1fr); padding: .3rem .3rem env(safe-area-inset-bottom); 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: .12rem; border-radius: .6rem; color: var(--text-3); font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
  .mnav-item .ia-emblem { width: 1.75rem; height: 1.75rem; transition: translate .2s var(--ease-spring); }
  .mnav-item small { position: absolute; top: .15rem; right: .25rem; font-size: .58rem; color: var(--gold-2); }
  .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; }

  /* Pages flow vertically and scroll */
  .page { position: relative; inset: auto; display: flex; flex-direction: column; gap: .9rem; padding-bottom: .5rem; }
  .page-columns, .bank-body, .market-columns, .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 { overflow: visible; }
  .card-grid { grid-template-columns: 1fr; padding: .35rem .6rem .7rem; }
  .res-card { min-height: 4.4rem; }
  .res-card.is-future { min-height: 3rem; }
  .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-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; }
  /* Farming: two plot tiles a row on a phone; the crossing badge still marks neighbours. */
  .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)); }
  .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; }
  .title-screen { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1rem; align-content: start; }
  .title-brand h1 { font-size: 2.6rem; }
  .title-points { display: none; }
  .title-panel { justify-self: stretch; }
  .creation-stage { height: 38vh; }
  .xp-drop { right: .8rem; top: calc(var(--top) + .8rem + var(--stack, 0) * 1.9rem); }
  .fx-layer:has(.loot-pop) { padding: 0 .6rem calc(var(--nav) + .8rem) 0; }
  .level-up { top: 22%; padding: .7rem 1.4rem .7rem .7rem; }
  .toasts { top: calc(var(--top) + .4rem); width: calc(100% - 1rem); }
  .world-bar { flex-wrap: wrap; }
  .world-title small { display: none; }
  .chip-people .people-at { display: none; }
  .chat-tab-place { max-width: 7rem; }
}