/* 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 */
html.mobile body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 52px minmax(0, 1fr) auto 60px;
  grid-template-areas: "topbar" "content" "legal" "nav";
  height: 100dvh; overflow: hidden;
}
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; }
html.mobile .legal-bar { max-width: 100vw; font-size: 0.6rem; padding: 1px 8px; }

/* 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; }
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: 4px 8px; gap: 5px; font-size: 0.85rem; }
html.mobile .hud-item img { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ 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: 26px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; }
.m-nav-ico img { width: 26px; height: 26px; 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(100dvh - 112px);
  display: flex; flex-direction: column;
  position: fixed; left: 0; right: 0; bottom: 60px; 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% + 70px)); 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 */
html.mobile { --win-top: 52px; --win-left: 0px; --win-bottom: 60px; }
html.mobile .win-layer { --win-pad: 6px; padding: 6px; z-index: 30; }
html.mobile .win { border-radius: 12px; }
html.mobile .win-body > .panel.active { padding: 12px; }
html.mobile .game-toasts { bottom: 72px; }
/* a private conversation takes the screen between the bars, like a chat app */
html.mobile .dm-box { inset: 52px 0 60px 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: 6px 9px; white-space: nowrap; }
/* the map has its own tab; Pocket is a window over other programs (a desktop thing); keys mean nothing on touch */
html.mobile .hunt-map-btn, html.mobile .hm-buttons .hm-btn:first-child, html.mobile .hunt-keys { display: none; }
/* 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 */
@media (max-height: 500px) {
  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; }
  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; }