/* Phone pass (prototype): a bottom-sheet card, a compact Preview chip, a mini-map, safe-area insets and landscape phones.
   State classes live on <html> (index.html's setView() rewrites <body>'s whole class list): .card-open .pv-open .lp .mini-on */
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body.hud button,body.hud .fc,body.hud .zc,#hud-badge{touch-action:manipulation;-webkit-user-select:none;user-select:none}

/* ---- mini-map: where you are, tap or drag to jump */
#mini{position:fixed;left:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 126px);width:112px;height:112px;z-index:13;display:none;border-radius:10px;border:2px solid var(--gold,#d4ae52);background:#090c10;box-shadow:0 8px 20px rgba(0,0,0,.6);touch-action:none;cursor:pointer}
html.mini-on:not(.card-open) #mini{display:block}
body.lay-open #mini{display:none}

/* ---- the Preview-as switch is demo chrome: on a phone it is one small chip that opens on tap */
#pvbtn{display:none}
@media(max-width:700px){
  #pvbtn{display:block;position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 126px);z-index:13;padding:7px 12px;border:1px solid #293d57;border-radius:999px;background:rgba(10,14,19,.8);color:#f6e19a;font:800 10.5px var(--hud-font,system-ui);letter-spacing:.12em;text-transform:uppercase}
  html.card-open #pvbtn{display:none}
  body.hud #top{display:none}
  html.pv-open body.hud #top{display:block;bottom:calc(env(safe-area-inset-bottom,0px) + 164px);z-index:14}

  /* ---- the card becomes a bottom sheet: scrolls, never clipped, grab handle, close stays in reach */
  html body.hud #card,html body.v-guest #card,html body.v-friend #card,html body.v-staff #card{left:8px;right:8px;top:auto;width:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);max-height:min(54dvh,500px);box-sizing:border-box;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:24;padding:26px 14px 14px;border-radius:20px 20px 14px 14px;transition:transform .22s ease}
  html body.hud #card:before{content:'';display:block;position:absolute;top:8px;left:50%;right:auto;margin-left:-22px;height:5px;width:44px;border-radius:3px;background:rgba(246,225,154,.6);animation:none;z-index:4}
  html body.hud #card .x{position:sticky;float:right;top:8px;right:auto;margin:-14px -2px 0 8px;z-index:4;padding:6px 12px;border-radius:12px;background:rgba(13,18,25,.92);color:#ffe49a!important;font-size:11px}
  body.v-staff #top{max-width:calc(100vw - 76px)}
  html body.v-staff #card{background:#13181f;border:1px solid #333942;color:#e8dfd0}
  html.card-open body.v-staff #layers,html.card-open body.v-staff #kds{display:none}
  html body.hud #card .hd{padding-right:0}
  html body.hud #card .btns{position:sticky;bottom:-14px;padding:8px 0 4px;background:linear-gradient(180deg,rgba(13,18,25,0),#0d1219 30%)}
  html.card-open #hud-btns [data-hud="find"],html.card-open #hud-btns [data-hud="layers"],html.card-open #hud-btns .cart,html.card-open #hud-btns #sndbtn,html.card-open #hud-btns .sep:not(:last-of-type){display:none}
}

/* ---- a phone on its side: the card is a side panel, not a sheet (the width rules above treat it as a desktop) */
@media(max-height:480px) and (orientation:landscape){
  html body.hud #card,html body.v-guest #card,html body.v-friend #card,html body.v-staff #card{top:60px;bottom:8px;right:60px;left:auto;width:min(340px,46vw);max-height:none;overflow-y:auto!important;padding:24px 14px 12px}
  html body.hud #card:before{display:none}
  #mini{width:84px;height:84px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
}
@media(prefers-reduced-motion:reduce){html body.hud #card{transition:none}}