/* =====================================================================================
   Hearth on phones — an optional layer over the normal app.
   Everything here only applies while mobile.js has put the "mobile" class on <body>
   (narrow screens). To remove the phone layout: delete css/mobile.css and js/mobile.js and the
   "PHONE LAYOUT" block in index.html. Nothing else depends on it.
   ===================================================================================== */
body.mobile {
  --nav-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --top-h: 48px;
}

/* ---- top bar: compact */
body.mobile .topbar { height: var(--top-h); padding: 0 8px; gap: 6px; }
body.mobile .topbar .brand, body.mobile .topbar .users, body.mobile .topbar .uname,
body.mobile #btnLeft, body.mobile #btnSidebar, body.mobile #liveBadge, body.mobile #previewBadge { display: none; }
body.mobile .scene-pill { min-width: 0; flex: 1; }
body.mobile .scene-name { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
body.mobile .scene-switch select { max-width: 110px; }
body.mobile #btnGoLive { padding: 4px 8px; font-size: 11.5px; }

/* ---- the app leaves room for the bottom bar */
body.mobile #app { padding-bottom: calc(var(--nav-h) + var(--safe-b)); }

/* ---- side panels become full-screen pages between the top bar and the bottom bar */
body.mobile .sidebar,
body.mobile .sidebar.side-left {
  position: fixed; left: 0; right: 0; top: var(--top-h); bottom: calc(var(--nav-h) + var(--safe-b));
  width: 100% !important; max-width: 100%; z-index: 20; border: 0; box-shadow: none;
}
body.mobile .side-resize, body.mobile .sidebar .tabs { display: none; }

/* ---- the bottom bar */
.m-nav { display: none; }
body.mobile .m-nav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--panel-2); border-top: 1px solid var(--line);
}
body.mobile .m-nav button {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 10.5px var(--font); position: relative; padding: 0;
}
body.mobile .m-nav button .ico { font-size: 19px; line-height: 1; }
body.mobile .m-nav button.on { color: var(--accent-2); box-shadow: inset 0 3px 0 var(--accent); }
body.mobile .m-nav button .dot { position: absolute; top: 7px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---- the map: tools and floating cards fit a phone */
body.mobile .toolbar { left: 8px; top: 8px; padding: 4px; }
body.mobile .toolbar button { width: 40px; height: 40px; }
body.mobile .tool-options { left: 60px; top: 8px; max-width: calc(100% - 68px); }
body.mobile .zoombar { right: 8px; bottom: 8px; }
body.mobile .inspector { left: 6px; right: 6px; bottom: 6px; transform: none; width: auto; max-height: 62%; }
body.mobile .attack-card, body.mobile .cast-card { left: 60px; right: 6px; transform: none; width: auto; top: 8px; }
body.mobile .dmg-cards { left: 6px; right: 6px; width: auto; top: auto; bottom: 56px; }
body.mobile .sel-bar { top: auto; bottom: 56px; max-width: calc(100% - 12px); }
body.mobile .roll-pops { bottom: 56px; width: calc(100% - 16px); }
body.mobile .roll-pop { min-width: 0; max-width: 100%; }
body.mobile .toasts { top: calc(var(--top-h) + 8px); width: calc(100% - 16px); }
body.mobile .empty-hint { max-width: calc(100% - 80px); }

/* ---- windows (sheets, shop, creator) fill the screen */
body.mobile .modal-backdrop { padding: 0; align-items: stretch; }
body.mobile .modal, body.mobile .modal.wide { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
body.mobile .modal-head { padding: 10px 12px; }
body.mobile .modal-body { padding: 10px 12px 14px; }
body.mobile .ctx-menu { max-width: calc(100vw - 16px); }
body.mobile .roll-choice { left: 8px !important; right: 8px; }

/* ---- character sheet and other panels: one column */
body.mobile .sheet-cols, body.mobile .turn-grid, body.mobile .hb-layout, body.mobile .sheet-section.two { grid-template-columns: 1fr; }
body.mobile .sheet-top { gap: 6px; }
body.mobile .sheet-stat { min-width: 0; flex: 1 1 28%; padding: 6px 4px; }
body.mobile .sheet-hp { flex: 1 1 100%; }
body.mobile .sheet-tabs button { flex: 1 1 30%; }
body.mobile .inv-row { grid-template-columns: 40px minmax(90px, 1fr) auto auto; }
body.mobile .inv-row > .muted.small:not(.inv-desc), body.mobile .inv-row .price { display: none; }
body.mobile .shop .row2 { flex-wrap: wrap; }
body.mobile .shop .row2 > * { flex: 1 1 45%; }
body.mobile .shop-row { flex-wrap: wrap; }
body.mobile .level-road { grid-template-columns: repeat(10, 1fr); }
body.mobile .steps { overflow-x: auto; flex-wrap: nowrap; }
body.mobile .steps .step { flex: none; }

/* ---- fingers: bigger targets, and 16px inputs so phones don't zoom in when you type */
body.mobile .btn { min-height: 36px; }
body.mobile .btn.small { min-height: 32px; }
body.mobile .icon-btn { min-width: 34px; min-height: 34px; }
body.mobile input, body.mobile select, body.mobile textarea { font-size: 16px; }
body.mobile .res-pip { width: 22px; height: 22px; }
body.mobile .slot { width: 22px; height: 22px; }