/* The game on a phone (systems/mobile.js): an app, not a page — the top bar, the scene filling all
   that is left, a drawer that rises from the bottom, and a tab bar under the thumb. Every rule hangs
   on html.mobile, which mobile.js sets (touch screens up to 1024 px, any window up to 720 px). */

/* ------------------------------------------------------------------ the frame */
/* The bars' sizes, one place: the frame, the drawer, the windows, the toasts and the private
   messages all measure by these (with the notch's and the home bar's insets). A bit smaller than
   a desk's, so the scene keeps the most room. */
html.mobile {
  --m-top: calc(44px + env(safe-area-inset-top));
  --m-nav: calc(54px + env(safe-area-inset-bottom));
  font-size: 15px;
}
html.mobile body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--m-top) minmax(0, 1fr) var(--m-nav);
  grid-template-areas: "topbar" "content" "nav";
  /* --app-h: the visible height as mobile.js measures it (window.innerHeight); dvh / vh only until
     the script runs */
  height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); overflow: hidden; overscroll-behavior: none;
  /* reset.css gives the page a min-height of 100vh — on a phone the tallest the screen gets (the
     address bar away), taller than what shows while it is up: it won over the height and pushed the
     tab bar off the bottom (a Poco X5's Chrome 156: 791 px of page on 735 px of screen) */
  min-height: 0;
}
html.mobile #sidebar { display: none; }
html.mobile #content { overflow: hidden; min-width: 0; }
html.mobile #topbar, html.mobile #content { min-width: 0; max-width: 100vw; }
/* the legal line takes no room on a phone: it is in Configurações › Geral and on the login screen */
html.mobile .legal-bar { display: none; }

/* the top bar: the logo's sprite and the balances (the account and the language are in the Menu) */
html.mobile #topbar { gap: 8px; padding-inline: 8px; padding-top: env(safe-area-inset-top); }
html.mobile .logo { font-size: 0; flex: none; }
html.mobile #hud { min-width: 0; gap: 6px; }
html.mobile .hud-level { display: none; }
html.mobile .hud-item { flex: none; padding: 3px 8px; gap: 4px; font-size: 0.8rem; min-height: 30px; }
html.mobile .hud-item img { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ the tab bar */
.m-nav { display: none; }
html.mobile .m-nav {
  grid-area: nav; position: relative; z-index: 40;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #111c31; border-top: 2px solid #0a1120;
  padding-bottom: env(safe-area-inset-bottom);
}
.m-nav-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; border: 0; background: none; color: var(--muted); font-family: var(--pixel); font-size: 0.66rem; cursor: pointer;
}
.m-nav-btn.active { color: var(--accent); background: #1f3460; }
.m-nav-ico { height: 22px; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; }
.m-nav-ico img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; filter: grayscale(0.4) brightness(0.85); }
.m-nav-btn.active .m-nav-ico img { filter: none; }
.m-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-badge { position: absolute; top: 5px; right: calc(50% - 20px); width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.m-badge[hidden] { display: none; }

/* ------------------------------------------------------------------ the drawer */
.m-drawer { display: none; }
html.mobile .m-drawer {
  --m-room: calc(var(--app-h, 100dvh) - var(--m-top) - var(--m-nav));
  display: flex; flex-direction: column;
  position: fixed; left: 0; right: 0; bottom: var(--m-nav); z-index: 29;
  height: calc(var(--m-room) * var(--m-drawer-f, 0.46));
  background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px #000c;
  transform: translateY(calc(100% + var(--m-nav) + 10px)); transition: transform 0.2s ease-out, height 0.05s;
}
html.mobile .m-drawer.open { transform: none; }
html.mobile .m-drawer.dragging { transition: none; }
.m-handle { flex: none; display: grid; place-items: center; height: 26px; cursor: ns-resize; touch-action: none; }
.m-handle i { width: 46px; height: 5px; border-radius: 3px; background: #ffffff40; }
.m-drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 10px; }
.m-pane[hidden] { display: none; }
/* the hunt's cards and the chat, stacked in their drawers */
.m-pane .side-cards { display: flex; flex-direction: column; gap: 10px; overflow: visible; }
.m-pane[data-pane="chat"] { height: 100%; display: flex; flex-direction: column; }
.m-pane[data-pane="chat"][hidden] { display: none; }
.m-pane .chat-card { flex: 1; min-height: 0; }
/* the Menu: the screens in a grid, then the account and the language */
.m-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-menu-grid .nav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  padding: 10px 4px; border-radius: 12px; border: 1px solid #ffffff12; background: #0b1424;
  font-family: var(--pixel); font-size: 0.72rem; text-align: center;
}
.m-menu-grid .nav-btn img { width: 32px; height: 32px; }
.m-menu-grid .nav-btn span { font-size: 0.72rem; white-space: normal; }
.m-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ffffff12; }
.m-account .hud-user { display: flex; background: none; border: 0; padding: 0; }
.m-account .hud-user #hud-user { display: inline; max-width: 150px; }
.m-account .hud-logout { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; }
.m-account .lang-btn { height: 36px; }

/* ------------------------------------------------------------------ windows, toasts, dialogs */
/* a window takes the whole screen between the bars, like an app's page (no frame around it) */
html.mobile { --win-top: var(--m-top); --win-left: 0px; --win-bottom: var(--m-nav); }
html.mobile .win-layer { --win-pad: 0px; padding: 0; z-index: 30; }
html.mobile .win { border-radius: 0; border-width: 0; width: 100%; height: 100%; }
html.mobile .win-bar { padding: 4px 4px 4px 10px; gap: 8px; }
html.mobile .win-bar img { width: 20px; height: 20px; }
html.mobile .win-bar b { font-size: 0.95rem; }
html.mobile .win-body > .panel.active { padding: 10px; }
html.mobile .game-toasts { bottom: calc(var(--m-nav) + 12px); }
/* a private conversation takes the screen between the bars, like a chat app */
html.mobile .dm-box { inset: var(--m-top) 0 var(--m-nav) 0; width: auto; height: auto; border-radius: 0; z-index: 34; }
/* finger-sized close buttons and small links */
html.mobile .mp-card-close, html.mobile .dm-close, html.mobile .hm-pocket-close, html.mobile .win-close {
  min-width: 36px; min-height: 36px; display: grid; place-items: center;
}
html.mobile .mp-card-close { top: 0; right: 0; }
html.mobile .ml-col, html.mobile .fr-name { min-height: 30px; }

/* ------------------------------------------------------------------ the scene (hunt / town) */
html.mobile #panel-battle.active { height: 100%; padding: 0; }
html.mobile .hunt { grid-template-columns: minmax(0, 1fr); height: 100%; gap: 0; }
html.mobile .hunt-side { display: none; }
html.mobile .hunt-stage { height: 100%; border: 0; border-radius: 0; }
/* its top: the area's name and the buttons in one row, inside the screen */
html.mobile .hunt-hud { flex-wrap: nowrap; top: 6px; left: 6px; right: 6px; gap: 6px; align-items: center; }
html.mobile .hunt-title { font-size: 0.95rem; padding: 3px 8px 3px 4px; min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
html.mobile .hunt-title > span:not(.tag) { overflow: hidden; text-overflow: ellipsis; }
html.mobile .hunt-title .tag { flex: none; }
html.mobile .hunt-actions { flex: none; flex-wrap: nowrap; gap: 4px; margin-left: auto; }
html.mobile .hunt-actions .btn { min-height: 34px; padding: 5px 9px; white-space: nowrap; font-size: 0.78rem; }
/* the map has its own tab; Pocket is a window over other programs (a desktop thing); Imersivo is the
   phone's own full screen (the Tela cheia button); keys mean nothing on touch */
html.mobile .hunt-map-btn, html.mobile .hm-buttons .hm-btn:is(:first-child, :nth-child(2)), html.mobile .hunt-keys { display: none; }
/* the leave button's short words (battle.js leaveLabel) */
.lb-short { display: none; }
html.mobile .lb-long { display: none; }
html.mobile .lb-short { display: inline; }
/* in town the "Cidade" tag gives its room to the town's name (the channel chip stays) */
html.mobile .hunt-title .tag-town { display: none; }
/* the area's name keeps at least a readable piece */
html.mobile .hunt-title { min-width: 96px; }
/* small genes and type tags readable on a phone */
html.mobile :is(.gene-chip, .tag) { font-size: max(0.7rem, 10.5px); }
/* the log at the bottom, short; "Caídos" folded to its title above it, a tap unfolds it */
html.mobile .hunt-log { left: 6px; right: 6px; bottom: 6px; width: auto; max-height: 58px; font-size: 0.7rem; }
html.mobile .stage-corpses { left: auto; right: 6px; width: min(300px, calc(100% - 12px)); bottom: 72px; max-height: 45%; }
html.mobile .stage-corpses:not(.m-open) > :not(.stage-corpses-title) { display: none; }
html.mobile .stage-corpses-title { cursor: pointer; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html.mobile .stage-corpses-title::after { content: '▴'; color: var(--muted); }
html.mobile .stage-corpses.m-open .stage-corpses-title::after { content: '▾'; }
html.mobile .hm-eco { padding-top: 60px; }

/* ------------------------------------------------------------------ the world map */
html.mobile #panel-map.panel-full.active { height: 100%; }
/* the regions in three compact columns (no sideways scroll), leaving room for the map */
html.mobile .mp-bar { position: relative; padding: 8px; gap: 6px; }
html.mobile .mp-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
html.mobile .mp-region { padding: 5px 6px; font-size: 0.78rem; min-height: 34px; align-content: center; }
html.mobile .mp-region-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.mobile .mp-region-sub { display: none; }
html.mobile .mp-search { min-width: 0; }
/* a filter menu opens across the bar, inside the screen */
html.mobile .mp-drop { position: static; }
html.mobile .mp-drop-body { left: 8px; right: 8px; min-width: 0; }
/* the area's card at the bottom of the map; the Hunt Analyser folded to its title at the top */
html.mobile .mp-card { left: 8px; right: 8px; bottom: 8px; width: auto; transform: none; }
html.mobile .mp-analyser { top: 8px; left: 8px; right: 8px; bottom: auto; width: auto; max-height: calc(100% - 170px); }
html.mobile .mp-analyser:not(.m-open) > :not(.an-title) { display: none; }
html.mobile .mp-analyser:not(.m-open) { max-height: none; }
html.mobile .mp-analyser .an-title { cursor: pointer; display: flex; justify-content: space-between; min-height: 28px; align-items: center; }
html.mobile .mp-analyser .an-title::after { content: '▾'; color: var(--muted); }
html.mobile .mp-analyser.m-open .an-title::after { content: '▴'; }
html.mobile .mp-zoom { top: auto; bottom: 150px; }
/* the list view: the list, then the card under it */
html.mobile .mp.is-list .mp-body { flex-direction: column; }
html.mobile .mp.is-list .mp-card, html.mobile .mp.is-list .mp-analyser { position: static; width: auto; margin: 8px; max-height: none; }

/* a phone on its side (little height): the regions in one strip that slides sideways, and the
   card and the Hunt Analyser side by side instead of one over the other */
/* the regions in one strip that slides sideways, on every phone: the map keeps the room */
html.mobile .mp-regions { display: flex; overflow-x: auto; scrollbar-width: none; }
html.mobile .mp-regions::-webkit-scrollbar { display: none; }
html.mobile .mp-region { flex: none; min-width: 96px; }
@media (max-height: 500px) {
  html.mobile .mp-card { left: auto; width: min(380px, calc(50% - 12px)); max-height: calc(100% - 16px); overflow-y: auto; }
  html.mobile .mp-analyser { right: auto; width: min(380px, calc(50% - 12px)); max-height: calc(100% - 16px); }
  html.mobile .mp-zoom { bottom: 8px; left: 8px; right: auto; }
  /* the open Analyser takes that half of the map: the zoom steps aside meanwhile */
  html.mobile .mp:has(.mp-analyser.m-open) .mp-zoom { visibility: hidden; }
}

/* an open filter menu is over everything on the map, the card included, and scrolls if it's long */
html.mobile .mp-bar { z-index: 12; }
html.mobile .mp-drop-body { z-index: 30; max-height: 55vh; overflow-y: auto; }
/* while one is open, the card and the analyser step aside (there is no room for both on a phone) */
html.mobile .mp:has(.mp-drop[open]) :is(.mp-card, .mp-analyser, .mp-zoom) { visibility: hidden; }
/* names you tap to open the player menu: finger-sized */
html.mobile .player-chip.clickable { min-height: 32px; padding-inline: 10px; }
html.mobile .pvp-name { min-height: 32px; padding-inline: 4px; }
html.mobile .chat-name.clickable { display: inline-block; min-height: 26px; min-width: 26px; padding: 3px 2px; line-height: 20px; }
html.mobile .hud-net { gap: 4px; font-size: 0.68rem; }

/* ------------------------------------------------------------------ a phone on its side (html.m-land)
   The scene gets nearly the whole screen: the tab bar is a rail on the right (under the thumb), the
   top bar a thin strip over the scene's column, the legal line goes (it is in the Menu's pages), and
   the drawer is a sheet that slides in from the right, beside the rail. The notch's side is kept
   clear (viewport-fit=cover + the safe-area insets). */
html.mobile.m-land { --m-rail: calc(60px + env(safe-area-inset-right)); --m-top: 34px; --m-nav: 0px; --win-right: var(--m-rail); }
html.mobile.m-land body {
  grid-template-columns: minmax(0, 1fr) var(--m-rail);
  grid-template-rows: var(--m-top) minmax(0, 1fr);
  grid-template-areas: "topbar nav" "content nav";
}
html.mobile.m-land #topbar { height: var(--m-top); padding-left: max(8px, env(safe-area-inset-left)); }
html.mobile.m-land #topbar .logo { display: none; }
html.mobile.m-land .hud-item { padding: 2px 8px; font-size: 0.78rem; }
html.mobile.m-land .hud-item img { width: 15px; height: 15px; }
html.mobile.m-land #content { padding-left: env(safe-area-inset-left); }
/* the rail */
html.mobile.m-land .m-nav {
  grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr);
  border-top: 0; border-left: 2px solid #0a1120;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
}
html.mobile.m-land .m-nav-btn { gap: 1px; font-size: 0.62rem; }
html.mobile.m-land .m-nav-ico, html.mobile.m-land .m-nav-ico img { height: 22px; }
html.mobile.m-land .m-nav-ico img { width: 22px; }
html.mobile.m-land .m-badge { top: 4px; right: 8px; }
/* the full-screen button: on the rail only on its side (upright it is in the Menu) */
.m-nav-fs { display: none !important; }
html.mobile.m-land .m-nav-fs { display: flex !important; }
.m-fs { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid #ffffff1f; background: #0b1424; color: var(--text); font-family: var(--pixel); font-size: 0.75rem; }
.m-fs .m-nav-ico { height: auto; font-size: 1rem; }
html.mobile.m-land .m-fs { display: none; }
/* the sheet: from the right, the height of the screen, a share of its width */
html.mobile.m-land .m-drawer {
  top: 0; bottom: 0; left: auto; right: var(--m-rail);
  width: min(380px, 52vw); height: auto;
  border-top: 0; border-left: 1px solid var(--line); border-radius: 16px 0 0 16px;
  box-shadow: -10px 0 30px #000c;
  transform: translateX(calc(100% + var(--m-rail) + 20px));
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
html.mobile.m-land .m-drawer.open { transform: none; }
/* its height isn't dragged on its side: the handle is just a margin */
html.mobile.m-land .m-handle { height: 10px; cursor: default; }
html.mobile.m-land .m-handle i { display: none; }
/* the Menu: four to a row and smaller, so every screen fits the sheet's short height at once */
html.mobile.m-land .m-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
html.mobile.m-land .m-menu-grid .nav-btn { padding: 6px 2px; gap: 2px; border-radius: 10px; }
html.mobile.m-land .m-menu-grid .nav-btn img { width: 24px; height: 24px; }
html.mobile.m-land .m-menu-grid .nav-btn span { font-size: 0.62rem; }
/* windows, private messages and toasts: inside the screen, clear of the rail */
html.mobile.m-land .win-layer { right: var(--m-rail); }
html.mobile.m-land .dm-box { inset: var(--m-top) var(--m-rail) 0 0; }
/* toasts centred in the scene's column, as wide as it allows */
html.mobile.m-land .game-toasts { bottom: 8px; left: calc(env(safe-area-inset-left) + 8px); right: calc(var(--m-rail) + 8px); transform: none; max-width: none; }
/* the notch's side on the left: windows and private messages clear it too */
html.mobile.m-land { --win-left: env(safe-area-inset-left); }
html.mobile.m-land .dm-box { left: env(safe-area-inset-left); }
html.mobile.m-land .win-layer { left: var(--win-left); }
/* the map's search keeps a usable width beside the filters */
html.mobile.m-land .mp-search { min-width: 120px; flex: 1 1 140px; }
/* the hunt: the log at the bottom-left, "Caídos" at the bottom-right, the top row as upright */
html.mobile.m-land .hunt-log { right: auto; width: min(46%, 380px); max-height: 52px; }
html.mobile.m-land .stage-corpses { bottom: 6px; max-height: calc(100% - 56px); width: min(300px, calc(54% - 18px)); }
html.mobile.m-land .hm-eco { padding-top: 46px; }

/* on a phone the windows measure the visible screen (dvh: without the browser's bars), not the
   tallest one (vh), so their bottom never hides under the address bar */
html.mobile .win { max-height: calc(var(--app-h, 100dvh) - var(--win-top) - var(--win-bottom) - 2 * var(--win-pad, 6px)); }
html.mobile .win[data-panel="market"] { height: calc(var(--app-h, 100dvh) - var(--win-top) - var(--win-bottom) - 2 * var(--win-pad, 6px)); }

/* typing on a phone (html.m-typing, mobile.js): the keyboard takes half the screen — the tab bar
   steps aside, and an open drawer takes everything under the top bar */
html.mobile.m-typing { --m-nav: 0px; }
html.mobile.m-typing .m-nav { display: none; }
html.mobile.m-typing body { grid-template-rows: var(--m-top) minmax(0, 1fr); grid-template-areas: "topbar" "content"; }
html.mobile.m-typing .m-drawer.open { top: var(--m-top); bottom: 0; height: auto; }
html.mobile.m-land.m-typing body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "content"; }
html.mobile.m-land.m-typing .m-drawer.open { right: 0; top: 0; width: min(440px, 70vw); }
/* inputs at 16 px: an iPhone zooms the page into anything smaller when it gets the focus */
html.mobile :is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) { font-size: max(16px, 1em); }

/* the invisible joystick (joystick.js): a finger slid on the scene walks the trainer, so the scene
   takes the finger itself — no page scroll or zoom starts from it */
html.mobile .hunt-stage canvas { touch-action: none; }