/* Small screens, short screens, and mobile mode (body.mobile: joystick, bigger buttons). */

@media (prefers-reduced-motion: reduce) {
  .spot, .pickup, .bonus-ct, .spot.portal .blk, #cave::before, #cave::after, #npcprompt { animation: none !important; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .sidebar { top: 72px; gap: 1px; }
  .sidebar button { width: 38px; height: 38px; padding: 7px; }
  .bl { gap: 4px; }
  .bl .ver { font-size: 10px; }
  .bl .ver .tod { font-size: 15px; }
  .cur { height: 30px; }
  .cur .ic { width: 30px; }
  .cur span.v { font-size: 16px; }
}

@media (max-width: 900px) {
  .buffs { right: 4px; bottom: 112px; max-width: 100vw; }
  .bf { width: 46px; height: 52px; }
  .tr-board { width: 170px; font-size: 12px; }
  .biome-chip { top: 56px; }
  .sidebar { top: auto; bottom: 168px; left: 6px; flex-direction: row; flex-wrap: wrap; max-width: 60vw; }
  .sidebar button { width: 40px; height: 40px; padding: 7px; }
  .sidebar .lbl { display: none; }
  .bl { bottom: 4px; width: 150px; }
  .bl .ver .tod { font-size: 14px; }
  .cur { height: 26px; }
  .cur .ic { width: 26px; font-size: 12px; }
  .cur span.v { padding: 0 8px; font-size: 14px; }
  .roll-zone { bottom: 4px; left: calc(50% + 60px); gap: 6px; }
  .tgl { width: 78px; height: 32px; font-size: 12px; }
  .roll-btn { width: 130px; height: 46px; font-size: 22px; }
  .win { top: 50%; width: calc(100vw - 8px); height: calc(100vh - 8px); }
  .slider label { width: 120px; font-size: 13px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #toasts { bottom: 190px; }
  #zoomctl { top: 110px; right: 6px; bottom: auto; left: auto; }
}

@media (max-width: 640px) {
  #npcdlg .portrait { width: 80px; height: 80px; font-size: 36px; }
  #npcdlg .dlg-main { min-height: 100px; }
  #npcdlg .dbtn { font-size: 15px; }
}

@media (max-width: 560px) {
  .roll-zone { left: 50%; }
  .bl { display: none; }
  .tgl { width: 64px; }
  .roll-btn { width: 110px; }
}

/* ---------- mobile mode ---------- */
body.mobile { overscroll-behavior: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
body.mobile #world, body.mobile #hud { touch-action: none; }
#mjoy, #mchat { display: none; }
body.mobile #tooltip { display: none !important; }

body.mobile #mjoy { position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); z-index: 13; display: block; width: 124px; height: 124px; background: rgba(20, 26, 33, .6); border: 2px solid var(--line); border-radius: 50%; touch-action: none; }
body.mobile #mjoy .knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; background: var(--raise); border: 2px solid var(--dim); border-radius: 50%; pointer-events: none; }
body.mobile #mjoy.hold { border-color: var(--accent); }
body.mobile #mchat { position: fixed; left: calc(max(18px, env(safe-area-inset-left)) + 134px); bottom: max(34px, env(safe-area-inset-bottom)); z-index: 13; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
body.mobile #mchat svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }

/* top: online badge, currencies and menu as slim rows */
body.mobile #onlinebadge { left: 6px; top: max(6px, env(safe-area-inset-top)); }
body.mobile .bl { display: flex !important; flex-direction: row; gap: 4px; top: calc(max(6px, env(safe-area-inset-top)) + 34px); bottom: auto; left: 6px; width: auto; }
body.mobile .bl .ver { display: none; }
body.mobile .cur { height: 26px; }
body.mobile .cur .ic { width: 22px; font-size: 11px; }
body.mobile .cur span.v { padding: 0 8px; font-size: 13px; }
body.mobile .sidebar { top: calc(max(6px, env(safe-area-inset-top)) + 68px); bottom: auto; left: 6px; right: auto; flex-direction: row; flex-wrap: wrap; gap: 3px; max-width: calc(100vw - 12px); }
body.mobile .sidebar button { width: 44px; height: 44px; padding: 8px; }
body.mobile .sidebar .lbl { display: none; }
body.mobile .tr-board { top: max(6px, env(safe-area-inset-top)); right: 6px; width: 150px; font-size: 12px; }
body.mobile .tr-board .hd, body.mobile .tr-board .rw { padding: 4px 8px; }
body.mobile .tr-board .others { max-height: 26vh; }
body.mobile .biome-chip { top: calc(max(6px, env(safe-area-inset-top)) + 110px); left: 6px; max-width: 60vw; font-size: 12px; transform: none; }
body.mobile #banner { top: 150px; }
body.mobile #banner .b { font-size: 17px; }
body.mobile #announce { max-width: 96vw; font-size: 13px; }
body.mobile .tracker { top: 190px; left: 6px; min-width: 0; max-width: 58vw; font-size: 12px; }

/* bottom right: the roll button under the thumb, auto and quick roll above it */
body.mobile .roll-zone { right: max(12px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); left: auto; flex-direction: column-reverse; flex-wrap: nowrap; align-items: flex-end; gap: 8px; transform: none; }
body.mobile .rollwrap { align-items: flex-end; }
body.mobile .roll-btn { width: 138px; height: 84px; font-size: 30px; border-radius: 6px; }
body.mobile .tgl { width: 138px; height: 40px; margin: 0; font-size: 14px; }
body.mobile .statline { display: none; }
body.mobile .bonus-ct { font-size: 13px; }
body.mobile .buffs { right: 8px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 232px); max-width: 60vw; }
body.mobile .bf { width: 40px; height: 46px; }
body.mobile .bf .x { font-size: 11px; }

body.mobile #zoomctl { top: auto; right: auto; left: max(18px, env(safe-area-inset-left)); bottom: calc(max(26px, env(safe-area-inset-bottom)) + 138px); }
body.mobile #zoomctl button { min-width: 38px; height: 34px; font-size: 16px; }
body.mobile.in-sanctuary #zoomctl { display: none; }
body.mobile #chatbox { left: 6px; bottom: calc(max(26px, env(safe-area-inset-bottom)) + 184px); width: 62vw; }
body.mobile #chatinput { font-size: 16px; }
body.mobile #chatbox .log { max-height: max(54px, calc(100vh - 680px)); }
body.mobile #toasts { right: 6px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 250px); max-width: 70vw; }
body.mobile #npcprompt { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 150px); padding: 12px 18px; font-size: 16px; }
body.mobile #npcdlg { bottom: 8px; width: calc(100% - 12px); }
body.mobile .spot { width: 64px; height: 64px; }
body.mobile .pickup { width: 52px; height: 52px; }
body.mobile .win { top: 50%; width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
body.mobile .win .btn, body.mobile .win button { min-height: 36px; }