/* =====================================================================================================
   Phones and tablets only.
   Every rule in this file starts with body.touch, which js/touch.js sets only on a touchscreen device
   (a coarse pointer, or the first touch), so on a computer with a mouse none of it ever applies.
   Small text is enlarged separately, at runtime, by js/touch.js: every font-size of 9px or under in
   style.css gets a bigger body.touch twin. A size set here by hand still wins over that.
   ===================================================================================================== */

/* ---------------------------------------------------------------- Windows fit the screen
   Each window stays inside the screen (and clear of the notch and home bar), keeps its title bar and ✕
   in view, and scrolls inside itself when its contents are taller than the phone. */
body.touch .overlay {
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
body.touch .overlay > :not(#catchCard) { max-width: 100%; max-height: 100%; }
body.touch .overlay > .box { padding: 12px 14px; }

/* wardrobe: the title and footer stay put, the clothes scroll */
body.touch .wardrobe { max-height: 100%; gap: 10px; }
body.touch .wd-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* settings: the same */
body.touch .opts { display: flex; flex-direction: column; max-height: 100%; }
body.touch .opt-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* calendar: the grid scrolls under its title; sideways, the day's forecast sits beside it */
body.touch .cal { max-height: 100%; overflow: hidden; }
body.touch .cal-grid { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
body.touch .cal-detail { flex: none; max-height: 34%; overflow-y: auto; }
@media (orientation: landscape) {
  body.touch .cal { width: min(980px, 100%); height: 100%; display: grid; gap: 8px 12px;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "head head" "legend legend" "grid detail" "foot foot"; }
  body.touch .cal > .opts-head { grid-area: head; }
  body.touch .cal > .cal-legend { grid-area: legend; }
  body.touch .cal > .cal-grid { grid-area: grid; }
  body.touch .cal > .cal-detail { grid-area: detail; max-height: none; align-self: stretch; }
  body.touch .cal > .opts-foot { grid-area: foot; }
}
/* quests: the long explanation shrinks to fit */
body.touch .req-frame .fr-body { min-height: 0; }
/* the start menu: never taller than the screen; sideways it's two columns */
body.touch .menu { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 520px) {
  body.touch .menu:not(.center) { top: 8px; right: max(8px, env(safe-area-inset-right)); padding: 8px; }
  body.touch .menu:not(.center) ul { column-count: 2; column-gap: 4px; } /* down the first column, then the second: the stick moves down the list */
  body.touch .menu:not(.center) li { break-inside: avoid; }
}
/* the full map: as big as fits, arrows inside the frame */
body.touch .bigmap { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }

/* ---------------------------------------------------------------- Bigger buttons
   Anything you tap is at least finger sized (about 40px); lists get taller rows. */
body.touch .dex-x { min-width: 42px; min-height: 42px; font-size: 18px; display: inline-grid; place-items: center; margin: -8px -8px -8px 0; }
body.touch .tabs button { min-height: 40px; padding: 8px 12px; }
body.touch .lb-tabs button { min-height: 42px; }
body.touch .chip { min-height: 36px; padding: 8px 12px; }
body.touch .btn { min-height: 42px; }
body.touch .cr-chip { min-height: 34px; padding: 6px 9px; }
body.touch .cr-sw { width: 30px; height: 30px; }
body.touch .cr-arrow { width: 42px; height: 38px; }
body.touch .ts-card .act { min-height: 38px; padding: 6px 12px; }
body.touch .menu li { padding: 14px 10px 14px 30px; }
body.touch .bag-list li, body.touch .shop-list li, body.touch .dex-list li, body.touch .ah-list li, body.touch .fr-list li,
body.touch .lb-rows li, body.touch .song-list li, body.touch #plList li, body.touch #mailList li { min-height: 44px; }
body.touch .opt-row { padding: 12px 10px; }
body.touch .opt-row input[type=range] { height: 32px; }
body.touch .bm-head button { width: 40px; height: 40px; font-size: 16px; }
body.touch .bm-nav { padding: 10px 14px; }
body.touch .q-menu button { min-height: 40px; }
/* hover-only looks would stick after a tap: no lifting or scaling on touch */
body.touch .dex-x:hover, body.touch .ts-card:not(.soon):hover, body.touch .tabs button:not(.on):hover { transform: none; }

/* ---------------------------------------------------------------- The play screen
   Chat: only the last few lines show, and they fade sooner; tap CHAT to open the whole log. */
body.touch .chat:not(.active) .chat-log li:not(:nth-last-child(-n+3)) { display: none; }
body.touch .chat:not(.active) .chat-log li { animation: chatFade 1.5s 10s forwards; }
body.touch .chat:not(.active) .chat-log { max-height: 76px !important; overflow: hidden; }
body.touch .chat.active { z-index: 8; }
body.touch .chat.active .chat-log { max-height: min(40vh, 220px) !important; }
body.touch .chat-bar { gap: 6px; }
body.touch .chat-hint, body.touch .chat-online { min-height: 34px; padding: 6px 10px; }
/* the song button is just a note (tap it for the song list) */
body.touch .now-playing { font-size: 0 !important; }
body.touch .now-playing::before { content: '♪'; font-size: 12px; }
/* mini-map: a small map under MENU with no buttons on it; tap it for the full map */
body.touch .minimap { top: calc(max(12px, env(safe-area-inset-top)) + 48px); bottom: auto; right: max(12px, env(safe-area-inset-right)); padding: 4px; cursor: pointer; }
body.touch .minimap .mm-head, body.touch .minimap .mm-resize { display: none; }
body.touch #mmCanvas { height: 60px !important; width: auto !important; } /* over the size saved from dragging it on a computer */
body.touch .minimap.collapsed #mmCanvas { display: block; }
@media (orientation: portrait) {
  body.touch .minimap { top: calc(max(12px, env(safe-area-inset-top)) + 48px); bottom: auto; }
}
/* sideways the chat would climb into the player box: keep it short and to one line of buttons */
@media (max-height: 460px) {
  body.touch .chat:not(.active) .chat-log { max-height: 46px !important; }
  body.touch .chat-bar { flex-wrap: nowrap; }
  body.touch .chat-bar > * { flex: none; }
}

/* ---------------------------------------------------------------- Lists and their detail panes
   On a narrow upright screen a list sits above the selected item's details: give the list the room, the
   details scroll. (Upright tablets show them side by side, and keep their usual sizes.) */
@media (orientation: portrait) and (max-width: 700px) {
  body.touch .bag-body, body.touch .shop-body, body.touch .ah-body { grid-template-rows: minmax(140px, 1fr) auto; }
  body.touch .bag-detail, body.touch .shop-detail, body.touch .ah-detail { max-height: 32vh; }
  body.touch .dex-detail { max-height: 34vh; }
  body.touch .wd-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(140px, 1fr); }
  body.touch .wd-detail { max-height: none; }
  body.touch .wd-stage { height: 124px; }
  body.touch .wd-stage canvas { width: 60px; height: 101px; }
}
/* a shop with many categories: one row of tabs you can swipe along, instead of rows and rows of them */
body.touch .shop-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-bottom: 0; padding-bottom: 2px; }
body.touch .shop-tabs::-webkit-scrollbar { display: none; }
body.touch .shop-tabs button { flex: none; }
/* sideways, the Fishdex milestones stay on one line */
@media (orientation: landscape) {
  body.touch .dex-rw { flex-direction: row; align-items: center; }
  body.touch .rw-next { text-align: right; }
  body.touch .rw-pips { flex-wrap: nowrap; }
}
/* the turn arrows under the creator and salon preview */
body.touch .cr-turn { width: 140px; }
body.touch .cr-turn.wd-turn { width: 100%; } /* the wardrobe's arrows stay under its preview */

/* ---------------------------------------------------------------- Pop-ups during play
   The catch card: sideways there's no room for it tall, so the fish goes on the left and the details beside it. */
@media (max-height: 460px) {
  body.touch .card { width: min(580px, calc(100vw - 24px)); display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 16px; align-items: center; align-content: center; padding: 22px 18px 16px; }
  body.touch .card .big { grid-column: 1; grid-row: 1 / span 9; width: 200px; margin: 0; }
  body.touch .card > :not(.big):not(.ribbon):not(.new) { grid-column: 2; }
  body.touch .card > h2 { margin-top: 4px; }
}
/* upright, the fishing hint sits below the player box instead of on top of it */
@media (orientation: portrait) {
  body.touch .hint { top: calc(env(safe-area-inset-top) + 176px); }
}