/* 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; }
  /* The Store and the Journal keep their pills as icons: the Journal is the only way to the Chronicle, the
     Highlights, the Discovery Log and the Collection on a phone (found in the wave C panel pass). The bank and the
     total level have their own places — the game menu below and the rail's Community group. */
  .brand > div, .top-stats > :not(:first-child):not(.store-pill):not([data-view="journal"]), .stat-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):not(.btn-fix) { display: none; }
  .now-playing .btn-fix { max-width: 7.5rem; padding: .3rem .5rem; font-size: .7rem; }
  .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; }
  /* ------------------------------------------------------- The phone's one scroller
     A phone page has exactly ONE scroller: the stage. Everything the stage holds flows at its natural
     height (see the `overflow: visible` list below) so one finger, landing anywhere, drags the whole page
     — there is no inner box to catch the gesture and no second scroller to hand it on to.
     `.stage.is-place` (the bank, the store, the journal, the leaderboards and the clan page, set in
     main.mjs) is `overflow: hidden` on a desktop because each of those pages scrolls in its own columns.
     On a phone those columns are stacked and flattened, so the stage has to be the scroller instead — and
     because `.stage.is-place` outweighs a bare `.stage`, it has to be named here or the bank and the store
     clip their content and refuse to move at all. `overscroll-behavior` keeps a fling at the end of a list
     from pulling the page behind it or triggering the browser's pull-to-refresh. */
  .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; }

  /* 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; }
  /* Every box inside a page flows at its own height: no box inside the stage may scroll, or the finger that
     lands in it drags that box to its end and then stops instead of carrying on down the page. A panel that
     bounds itself with `max-height` would clip here just as badly, so those caps are lifted too. Overlays are
     the one exception and are handled under "Overlays" below: a modal is its own bounded surface. */
  .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; }
  /* A bench's queue lists every entry at its own height on a phone, for the same reason. */
  .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; }
  /* A bench's family strip on a phone: it wraps onto as many rows as it needs and is never cut off. */
  .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; }
  .pinned-recipe { padding: 0 .6rem .4rem; }
  .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; }
  /* Farming's next-unlock line names three things. A flex child's floor is its content unless it is told
     otherwise, so without this the XP bar cannot shrink: it ran 34px past the panel and was cut off there
     instead of ending in the ellipsis it was built for. */
  .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; }
  /* 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)); }
  /* The herblorist's bench: the picture is a grid item asked for the full height of a row that is sized by
     the picture, so `height: 100%` never resolves and the image lays itself out at its own 263px inside a
     155px window — `object-fit: contain` then has nothing to contain and the bench is cropped top and bottom.
     Naming the row gives the height something to resolve against, and the picture fits again. */
  /* The clan roster fits the phone instead of sliding out from under it. A member's row was 473px wide in a
     375px panel, so the rank buttons and Hold to expel sat 83px past the right edge and the only way to them
     was to drag the page sideways — which a phone should never do. The actions cell wraps its buttons under
     itself instead: the row grows a line, the page keeps its width, and every button is where a thumb is. */
  .clan-acts { white-space: normal; }
  .clan-acts .btn { margin: .12rem 0 .12rem .25rem; }
  /* The clan banner's four tiles across a 345px panel leave sixty pixels for "By request", which then broke
     mid-word and spilled out of its tile over the hall's chip. Two to a row, and a value too long for the
     tile it is in wraps inside it instead of over its neighbour. */
  .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; }
  .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, .loot-tally) { 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); }
  /* ------------------------------------------------------------- A 3D world on a phone
     On a desktop the Goals tracker sits in the right column and costs the world nothing. On a phone it is a
     band above the page, and on a world page it was taking 321px of 844 while the scene it sits over got 159 —
     a fifth of the screen for the thing the player is watching, and a combat bar (food, stance, spell, Auto
     Eat, the fight, the way out) would squeeze that to nothing and clip itself against the game menu. While a
     world is on screen the band steps aside, exactly as the top bar's cycle bar already does: the world says
     it better. Goals is one tap away on every other page.
     The scene keeps a floor so it can never collapse, and the panel scrolls, so a bar taller than the room is
     always reachable by dragging the bar itself — a swipe on the scene belongs to the world, not the page. */
  .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; }
  /* The bar under a world on a phone. The groups still read in order — what you are doing, what it needs from
     you, what it is paying, the way out — but each control takes the whole width so it can be hit with a thumb,
     while the food keeps Eat beside it and the readings stay two to a row. Nothing runs off the right edge. */
  .hudbar { padding: .45rem .5rem; gap: .4rem; }
  .hud-group.is-acts { margin-left: 0; justify-content: flex-start; }
  .hud-group > .hud-cell { flex: 1 1 100%; }
  .hud-group.is-pay > .hud-cell { flex: 1 1 8rem; max-width: none; }
  .hud-group.is-needs > .hud-food { flex: 1 1 60%; }
  .hud-group.is-needs > .hud-eat { flex: 1 1 8rem; justify-content: center; }
  .hud-cell.is-stance .segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hud-cell.is-stance .segmented button { justify-content: center; padding: .32rem .2rem; }
  .sigil-grid { grid-template-columns: minmax(0, 1fr); }
  .world-title small { display: none; }
  .chip-people .people-at { display: none; }
  .chat-tab-place { max-width: 7rem; }

  /* --------------------------------------------------------------- Touch targets
     A fingertip covers about nine millimetres; these controls were drawn for a mouse pointer and the phone's
     smaller root shrinks them again, so several sit under twenty pixels. Two rules, no new look:
     · a control that has the width already — every button, every pill — takes the height, which is what a
       game client on a phone wants anyway;
     · a control that must keep the size it is drawn at grows an invisible pad instead, so the area that
       answers the tap is bigger than the art. The pad never paints, so no panel gains a mark. */
  .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, .cs-pill, .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[type="range"] { height: 2.4rem; }
  /* The top bar's pills are the only way to the Store and the Journal on a phone, so they are hit first. */
  .stat-pill { height: 2.6rem; }
  /* Pads. `.toggle` and `.bank-tab` already spend their own ::after / ::before, so they borrow the other one. */
  .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);
  }
  /* Inside the six-across potion bar a pad that reached 2.6rem would take its neighbour's tap. */
  .pb-auto::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100%, 2.1rem); height: max(100%, 2.1rem); }

  /* ------------------------------------------------------------------- Overlays
     A modal, a menu, a popover and the sheets are the one place a second scroller is right: each is its own
     bounded surface over the page, so it scrolls in itself and `overscroll-behavior: contain` stops the fling
     that reaches its end from dragging the stage behind it. They get the phone's height, not a desk's. */
  .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; }
  /* A menu opened with a thumb is a list of thumb-sized rows, not a desktop's compact strip. */
  .context-menu { min-width: 13.5rem; }
  .context-menu button { padding: .6rem .6rem; font-size: .88rem; }
}