/* PHONE HUD (owner, November 8: "phone ui needs to be cleaner and more optimized, they should see at least 70% of the map"):
   on a phone the World and the map come first. This sheet loads last (index.html), so it is the last word on these rules.
   Measured with the capture driver (pw2-player-guide-notes/shots/phone_hud.py, phone_back.py): the World now shows on 80% or more
   of a 390 x 664 phone screen in play, and the full map fills 80% of it, up from 42%. */

/* the full map's handle for Here now and the map key: a phone thing only */
.map-grip { display: none; }

@media (max-width: 640px), (pointer: coarse) and (max-height: 520px) {
  /* the top bar is no longer a band across the World: its buttons float as small paper chips, Menu on the left, the rest on the right */
  body.map-docked #app .mobile-toolbar {
    display: flex !important; align-items: flex-start; gap: 6px;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: calc(var(--safe-t) + 6px) calc(var(--safe-r) + 8px) 0 calc(var(--safe-l) + 8px) !important;
    pointer-events: none !important;
  }
  body.map-docked #app .mobile-toolbar :is(#open-menu, .md-action) {
    pointer-events: auto; flex: none;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 50% !important;
    background: var(--paper) !important; border: 1px solid var(--line) !important;
    box-shadow: 0 3px 10px rgba(24, 32, 42, .16) !important;
    }
  body.map-docked #app .mobile-toolbar #open-menu { margin-right: auto; }
  body.map-docked #app .mobile-toolbar #open-menu .menu-label { font-size: 9px !important; line-height: 10px !important; }

  /* the minimap a size smaller; its Chat, People and Mute keep their full-size touch targets */
  body.map-docked, body.map-docked.mobile-ui-compact { --dock-map: 88px; }
  body.map-docked.sp-menu-open #app .map-dock { display: none; }

  /* the left rail's notes read a size smaller */
  body.map-docked #rail #toast { font-size: 12.5px; line-height: 1.35; padding: 8px 11px; }

  /* the full map: one slim header row, the map edge to edge, Here now and the key in a handle at the bottom */
  .map-dialog .map-head {
    display: flex !important; align-items: center; gap: 6px; min-height: 0;
    padding: calc(var(--safe-t) + 4px) calc(var(--safe-r) + 6px) 4px calc(var(--safe-l) + 14px) !important;
  }
  .map-dialog .map-titles { flex: 1 1 auto; min-width: 0; padding-right: 0 !important; }
  .map-dialog .map-titles h2 { font-size: 17px !important; line-height: 1.2; }
  .map-dialog .map-sub { margin: 1px 0 0; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-dialog .map-tools { flex: none; gap: 2px !important; }
  .map-dialog .map-tools .map-close { position: static !important; }
  .map-dialog .map-body { position: relative; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
  .map-dialog .map-side {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block;
    max-height: 50px; overflow: hidden; padding: 0 calc(var(--safe-r) + 12px) 12px calc(var(--safe-l) + 12px) !important;
    border: 0 !important; border-radius: 18px 18px 0 0; background: var(--paper);
    box-shadow: 0 -6px 22px rgba(15, 24, 48, .2); transition: max-height .25s ease;
  }
  .map-dialog .map-side > section + section { margin-top: 16px; }
  .map-dialog.map-side-open .map-side { max-height: 62%; overflow: auto; overscroll-behavior: contain; }
  .map-grip {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; margin: 0; padding: 0 2px;
    border: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer;
  }
  .map-grip i { width: 34px; height: 5px; border-radius: 3px; background: #c9c1b0; flex: none; }
  .map-grip span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-grip::after { content: ''; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; flex: none; }
  .map-dialog.map-side-open .map-grip::after { transform: rotate(135deg); }
  .map-dialog .map-side #map-people-h { display: none; }   /* the handle says it */
  .map-dialog .tp-card { bottom: 60px; }
  .map-dialog .map-foot { min-height: 0 !important; padding-top: 6px !important; padding-bottom: calc(var(--safe-b) + 6px) !important; }
  .map-dialog .map-status { font-size: 12px; line-height: 1.35; }
}

/* a phone on its side: the handle sits on the right, out of the way of the middle of the map */
@media (pointer: coarse) and (max-height: 520px) {
  .map-dialog .map-side { left: auto; width: min(380px, 52%); }
  .map-dialog.map-side-open .map-side { max-height: 78%; }
  .map-dialog .tp-card { bottom: 10px; left: calc(50% - min(190px, 26%)); }
}

/* a phone on its side: the first-steps card (ui/first-steps.js) is a compact card at the left, the World stays in view */
@media (pointer: coarse) and (max-height: 520px) {
  .fs-card { top: calc(var(--safe-t, 0px) + 58px); width: min(360px, 46vw); max-height: calc(100dvh - var(--safe-t, 0px) - 70px); overflow: auto; padding: 12px 14px 12px; border-radius: 18px; transform: translate(0, -6px); }
  .fs-card.in { transform: translate(0, 0); }
  .fs-card.out { transform: translate(-8px, 0); }
  .fs-kicker { font-size: 10.5px; }
  .fs-card h2 { font-size: 18px; margin: 2px 0 6px; }
  .fs-keys { gap: 4px; margin-bottom: 8px; }
  .fs-keys li { font-size: 12.5px; }
  .fs-tour { padding: 8px 10px; gap: 8px; }
  .fs-tour p { font-size: 12.5px; line-height: 1.4; }
  .fs-actions { margin-top: 8px; }
  .fs-actions .btn { min-height: 44px; font-size: 13.5px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-dialog .map-side, .map-grip::after { transition: none; }
}