/* The touch layout (mobile.js): phones and tablets in a browser.
   Everything here hangs off html.mobile, with data-form = phone | tablet and
   data-orient = p (upright) | l (sideways). A desktop never gets the class. */

.m-hud, .m-md-x { display: none; }

html.mobile, html.mobile body { overscroll-behavior: none; }
.mobile body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
.mobile .hud-left, .mobile .hud-top, .mobile .hud-right, .mobile #hint, .mobile .md-tab, .mobile .md-grip, .mobile .win-edge { display: none !important; }
.mobile .screen:not(.game) { padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 12px); }

/* Bars: one height for the bottom nav so everything above can sit on it. */
.mobile { --m-nav: 62px; --m-gap: 8px; --m-safe-b: env(safe-area-inset-bottom, 0px); --m-safe-t: env(safe-area-inset-top, 0px);
  --m-safe-l: env(safe-area-inset-left, 0px); --m-safe-r: env(safe-area-inset-right, 0px); }
.mobile .m-hud { display: flex; position: absolute; z-index: 22; }
.mobile .m-hud[hidden] { display: none; }

/* --- top bar ------------------------------------------------------------------ */
.m-top { top: 0; left: 0; right: 0; justify-content: space-between; align-items: flex-start; gap: var(--m-gap); pointer-events: none;
  padding: calc(var(--m-safe-t) + 8px) calc(var(--m-safe-r) + 8px) 0 calc(var(--m-safe-l) + 8px); }
.m-top > div { display: flex; gap: 6px; pointer-events: auto; min-width: 0; align-items: stretch; }
.m-top .roomchip { min-width: 0; max-width: 100%; min-height: 44px; }
.m-top .roomchip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-top .btnchip { min-height: 44px; min-width: 44px; justify-content: center; }
.m-top #btn-mute { padding: 0 8px; }
.m-top #btn-mute img { width: 24px; height: 24px; }
.mobile[data-form="phone"] .m-top .roomchip .chg, .mobile[data-form="phone"] #btn-prefs .micro { display: none; }

/* --- nav ------------------------------------------------------------------------ */
.m-nav { gap: 4px; background: var(--wood-lo); box-shadow: 0 -2px 0 var(--line), inset 0 2px 0 var(--wood-hi); }
.m-nav button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: 0; color: #f6e2b8; font: 700 11px/1 var(--read); letter-spacing: .04em; cursor: pointer; padding: 6px 2px; }
.m-nav button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.m-nav button .ico, .m-nav button #m-me-pic { width: 24px; height: 24px; image-rendering: pixelated; }
.m-nav button #m-me-pic { image-rendering: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--line); object-fit: cover; }
.m-nav button.on { background: var(--wood); color: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
.m-nav button:active { background: var(--wood); }
.m-burger, .m-burger::before, .m-burger::after { display: block; width: 20px; height: 3px; background: #f6e2b8; box-shadow: 0 1px 0 var(--line); }
.m-burger { position: relative; margin: 10px 0 11px; }
.m-burger::before, .m-burger::after { content: ""; position: absolute; left: 0; }
.m-burger::before { top: -7px; } .m-burger::after { top: 7px; }

.mobile[data-orient="p"] .m-nav { left: 0; right: 0; bottom: 0; height: calc(var(--m-nav) + var(--m-safe-b)); padding: 0 calc(var(--m-safe-r) + 4px) var(--m-safe-b) calc(var(--m-safe-l) + 4px); }
/* Sideways the nav joins the top bar, in the middle. */
.mobile[data-orient="l"] .m-nav { top: calc(var(--m-safe-t) + 8px); left: 50%; transform: translateX(-50%); height: 44px; padding: 0 4px;
  box-shadow: 0 0 0 2px var(--line), inset 0 2px 0 var(--wood-hi); }
.mobile[data-orient="l"] .m-nav button { flex: none; flex-direction: row; gap: 6px; padding: 0 10px; font-size: 13px; }
.mobile[data-orient="l"][data-form="phone"] .m-nav button span { display: none; }
.mobile[data-orient="l"][data-form="phone"] .m-nav button { padding: 0 12px; }

/* --- the action box: emotes, your seat, Join ------------------------------------------ */
.m-act { align-items: stretch; gap: var(--m-gap); }
.m-act .seatinfo { min-width: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.m-act .seatinfo .big { font-size: 20px; line-height: 1.1; white-space: nowrap; }
.m-act .seatinfo .micro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-act .joinrow { min-width: 0; flex: none; }
.m-act .btn.join { min-width: 128px; min-height: 52px; font-size: 20px; }
.m-act .joinrow.split .btn.join { min-width: 96px; font-size: 17px; }
.m-act .asks { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(330px, 100%); }
.m-fab { flex: none; width: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0;
  background: var(--wood); border: 0; color: #f6e2b8; font: 700 10px/1 var(--read); letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 0 0 2px var(--line), inset 0 2px 0 var(--wood-hi), inset 0 -3px 0 var(--wood-lo); }
.m-fab img { width: 28px; height: 28px; object-fit: contain; }
.m-fab:active { transform: translateY(2px); }
.m-fab[hidden] { display: none !important; }

.mobile[data-orient="p"] .m-act { left: calc(var(--m-safe-l) + 8px); right: calc(var(--m-safe-r) + 8px); bottom: calc(var(--m-nav) + var(--m-safe-b) + 8px); }
.mobile[data-orient="p"] .m-act .seatinfo { flex: 1 1 auto; }
.mobile[data-orient="l"] .m-act { right: calc(var(--m-safe-r) + 8px); bottom: calc(var(--m-safe-b) + 8px); }
.mobile[data-orient="l"][data-form="phone"] .m-act .btn.join { min-height: 44px; min-width: 104px; font-size: 17px; }
.mobile[data-orient="l"][data-form="phone"] .m-act .seatinfo .big { font-size: 16px; }
.mobile[data-orient="l"][data-form="phone"] .m-fab { width: 48px; }

/* --- find me, the one-line how-to, toasts, the pending box, chat --------------------- */
.m-find { top: calc(var(--m-safe-t) + 62px); left: 50%; transform: translateX(-50%); min-height: 40px; padding: 0 16px; align-items: center;
  background: var(--gold); color: var(--line); border: 0; font: 700 14px/1 var(--read); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 0 2px var(--line), 0 3px 0 rgba(20,10,4,.45); }
.mobile[data-orient="l"] .m-find { top: auto; bottom: calc(var(--m-safe-b) + 10px); }
.m-tip { left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); text-align: center; pointer-events: none;
  padding: 6px 10px; background: rgba(20,12,6,.82); color: #f6e2b8; transition: opacity .8s; white-space: normal; }
.mobile[data-orient="p"] .m-tip { top: calc(var(--m-safe-t) + 112px); }
.mobile[data-orient="l"] .m-tip { top: calc(var(--m-safe-t) + 60px); }
.m-tip.fade { opacity: 0; }
.mobile .toasts { top: calc(var(--m-safe-t) + 60px); width: calc(100% - 24px); max-width: 480px; }
.mobile .pend { top: calc(var(--m-safe-t) + 60px); bottom: auto !important; right: calc(var(--m-safe-r) + 8px); }
.mobile[data-orient="l"] .pend { top: calc(var(--m-safe-t) + 60px); }
.mobile .chatlog { left: calc(var(--m-safe-l) + 8px); width: min(420px, calc(100% - 16px)); max-height: 28vh; overflow: hidden; }
.mobile[data-orient="p"] .chatlog { bottom: calc(var(--m-nav) + var(--m-safe-b) + 84px); }
.mobile[data-orient="l"] .chatlog { bottom: calc(var(--m-safe-b) + 8px); width: min(360px, 45%); }
.mobile .dock { bottom: calc(var(--m-nav) + var(--m-safe-b) + 84px); }
.mobile[data-orient="l"] .dock { bottom: calc(var(--m-safe-b) + 70px); }

/* --- bigger things to press ------------------------------------------------------------ */
.mobile .btn { min-height: 40px; }
.mobile .btn.small { min-height: 34px; }
.mobile .modal-x { width: 44px; height: 44px; font-size: 28px; }
.mobile .ctx button { padding: 12px 14px; font-size: 16px; }
.mobile .ctx { min-width: 200px; }
.mobile input, .mobile select { font-size: 16px; } /* iPhones zoom into anything smaller */
.mobile .tab { min-height: 40px; }
.mobile .win-head { touch-action: none; }

/* --- My drops: a sheet --------------------------------------------------------------- */
.mobile .mydrops { top: 0 !important; bottom: 0 !important; left: 0; height: auto !important; width: min(420px, 100%) !important; z-index: 72;
  padding: var(--m-safe-t) 0 var(--m-safe-b) var(--m-safe-l); background: var(--panel); }
.mobile[data-form="phone"] .mydrops { width: 100% !important; }
.mobile .m-md-x { display: block; position: absolute; top: 6px; right: 6px; }
.mobile .md-head { position: relative; padding-right: 48px; }

/* --- windows -------------------------------------------------------------------------- */
/* Phone: every window is a sheet. Upright it stops above the nav, so the nav
   still switches between them; sideways it takes the whole screen. */
.mobile[data-form="phone"] .win { left: var(--m-safe-l) !important; top: var(--m-safe-t) !important; min-width: 0; min-height: 0;
  width: calc(100% - var(--m-safe-l) - var(--m-safe-r)) !important; height: calc(100% - var(--m-safe-t) - var(--m-safe-b)) !important; }
.mobile[data-form="phone"][data-orient="p"] .win { height: calc(100% - var(--m-safe-t) - var(--m-nav) - var(--m-safe-b)) !important; }
.mobile[data-form="phone"] .win-head h3 { font-size: 16px; }
/* Tablet: windows as on the desktop, never wider or taller than the screen. */
.mobile[data-form="tablet"] .win { max-width: calc(100vw - 16px); max-height: calc(100% - 16px); }
.mobile[data-form="tablet"][data-orient="p"] .win { max-height: calc(100% - var(--m-nav) - var(--m-safe-b) - 16px); }

.mobile .modal-box { max-height: calc(100% - var(--m-safe-t) - var(--m-safe-b) - 24px); overflow: auto; }
.mobile[data-form="phone"] .modal-box, .mobile[data-form="phone"] .dlg-box, .mobile[data-form="phone"] .askc-box { width: calc(100% - 16px); }
.mobile[data-form="phone"] .askc-body { grid-template-columns: 1fr; }
.mobile[data-form="phone"] .askc-hat { height: 120px; }
.mobile[data-form="phone"] .pg-top { grid-template-columns: 96px minmax(0, 1fr); }
.mobile[data-form="phone"] .pg-top > :nth-child(3) { grid-column: 1 / -1; }
.mobile[data-form="phone"] .sb-bar input { flex: 1 1 100%; }

/* Inventory on a phone: your character on top, the items under it. */
.mobile[data-form="phone"][data-orient="p"] .inv-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.mobile[data-form="phone"][data-orient="p"] .inv-left { grid-template-rows: auto auto auto; gap: 6px; }
.mobile[data-form="phone"][data-orient="p"] .wd-stage { height: 26vh; min-height: 150px; }
.mobile[data-form="phone"][data-orient="p"] .wd-note { display: none; }
.mobile[data-form="phone"] .bg-row { flex-direction: row; align-items: center; }
.mobile[data-form="phone"] .bg-grid { display: flex; overflow-x: auto; gap: 6px; flex: 1; min-width: 0; scrollbar-width: none; }
.mobile[data-form="phone"] .bg-tile { flex: none; width: 110px; }
.mobile[data-form="phone"][data-orient="l"] .inv-body { grid-template-columns: minmax(200px, 38%) 1fr; }
.mobile[data-form="phone"] .inv-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.mobile .inv-note { display: none; }

/* The More sheet */
.m-more-box { width: min(440px, calc(100% - 16px)); }
.m-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-list .btn { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 52px; text-align: left; }
.m-list .btn .ico { width: 22px; height: 22px; }
.m-list .btn[hidden] { display: none; }
.m-games { display: grid; gap: 6px; }
.m-games .tabs { display: flex; gap: 6px; }
.mobile[data-form="phone"][data-orient="p"] #m-more { place-items: end center; padding-bottom: calc(var(--m-nav) + var(--m-safe-b)); }
.mobile[data-form="phone"][data-orient="p"] .m-more-box { width: 100%; }
.m-layout .tabs { display: flex; gap: 6px; }
#m-me-ini { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wood); color: #fff;
  font: 700 14px/1 var(--read); box-shadow: 0 0 0 2px var(--line); font-style: normal; }
#m-me-ini[hidden] { display: none; }
/* The "after this cast" box: small, under the top bar (the action box says it too). */
.mobile .pend { padding: 4px 8px; gap: 2px; max-width: 60%; }
.mobile .pend-row { font-size: 13px; }
.mobile .pend-time { font-size: 16px; }
/* Seated: Refresh + Leave share the row with your clock - smaller buttons, the clock keeps its room. */
.mobile[data-form="phone"] .m-act .joinrow.split .btn.join { min-width: 0; font-size: 15px; padding-left: 10px; padding-right: 10px; }
.mobile[data-form="phone"] .m-act .joinrow.split { flex: 0 1 auto; }
.mobile[data-form="phone"] .m-act .seatinfo { min-width: 96px; }
.mobile[data-form="phone"] .m-act .joinrow.split .btn.join { font-size: 14px; padding-left: 6px; padding-right: 6px; }
/* Profile: the three showcase cases share the phone's width. */
.mobile[data-form="phone"] .pg-sc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
/* Sideways on a phone the clock box is just the clock (and how full the pier is). */
.mobile[data-orient="l"][data-form="phone"] .m-act #seat-label { display: none; }
/* The first screens (sign in, pick a room) fit a phone: the panel never wider than the screen, button rows wrap. */
.mobile .screen:not(.game) .panel { min-width: 0; max-width: 100%; }
.mobile .screen:not(.game) .row { flex-wrap: wrap; }
.mobile .screen:not(.game) .row > input { min-width: 0; flex: 1 1 160px; }
.mobile .screen:not(.game) h1 { font-size: clamp(22px, 8vw, 32px); overflow-wrap: anywhere; }
.mobile .screen:not(.game) { grid-template-columns: minmax(0, 1fr); justify-items: center; }