/* OnDuhGo Twin — phone layout (docs/mobile.md). Active only while mobile.js sets html.m-ui:
 * html.m-port (upright, up to 720 px wide) or html.m-land (sideways, up to 500 px tall).
 * Rules under html.m-ui are the upright layout; html.m-ui.m-land overrides them for sideways.
 * Brand colours only; Baloo 2 from the page. */
html.m-ui, html.m-ui body { overflow: hidden; height: 100%; overscroll-behavior: none; }
html.m-ui { --m-bar: rgba(43,33,24,.94); --m-line: rgba(200,155,108,.35); --m-tabs: 62px; --m-rail: 64px; }
html.m-port #mTabs [data-t="depts"] { display: none; }
html.m-ui .app { padding: 0 !important; }

/* top bar */
html.m-ui .top {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 20;
  display: grid !important; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; margin: 0;
  background: var(--m-bar); border-bottom: 1px solid var(--m-line); pointer-events: auto;
}
html.m-ui .top .brand { grid-column: 1 / -1; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
html.m-ui .top .brand b { font-size: 17px !important; white-space: nowrap; }
html.m-ui .top .brand span { font-size: 10px !important; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.m-ui #modeSeg { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100%; }
html.m-ui #modeSeg button { min-height: 38px; font-size: 15px; justify-content: center; }
html.m-ui #guideBtn { display: none !important; }
html.m-ui .topstats {
  grid-column: 1 / -1; margin: 0 !important; width: 100%; max-width: 100%; box-sizing: border-box;
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px 2px !important;
}
html.m-ui .topstats .stat { padding: 2px 4px !important; min-width: 0 !important; text-align: left; }
html.m-ui .topstats .stat b { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
html.m-ui .topstats .stat span { font-size: 8.5px !important; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* the old floating toolbars are empty on a phone */
html.m-ui .controls.toolbar, html.m-ui .navbar { display: none !important; }

/* the city, swiped sideways */
html.m-ui #mPan {
  position: fixed; left: 0; right: 0; top: var(--m-top, 150px); height: var(--m-city-h, 300px); z-index: 1;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: var(--skybg, #2B2118);
}
html.m-ui #mPan::-webkit-scrollbar { display: none; }
html.m-ui #stagewrap {
  position: relative !important; inset: auto !important; left: 0 !important; top: 0 !important;
  height: var(--m-city-h, 300px) !important; min-height: 0 !important; max-width: none !important;
  border-radius: 0 !important; border: 0 !important; margin: 0 !important; flex: none !important;
}
/* the clock and weather stay put in the city's top-left corner while it is swiped */
html.m-ui #hud { position: fixed !important; top: calc(var(--m-top, 150px) + 8px) !important; left: 8px !important; z-index: 3; max-width: calc(100vw - 16px); }
html.m-ui #hud small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* level, profit, progress bar, timeline and ticker under the city */
html.m-ui #mInfo {
  position: fixed; left: 0; right: 0; top: calc(var(--m-top, 150px) + var(--m-city-h, 300px));
  bottom: calc(var(--m-tabs) + env(safe-area-inset-bottom, 0px)); z-index: 2;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; overflow-y: auto;
  background: var(--ground, #2B2118);
}
/* level pill; tap for the card with the full level, profit and the L1–L5 bar */
html.m-ui #mLevelPill {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px;
  padding: 6px 12px 6px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: #E38361; color: #2B2118; font: 700 14px/1.2 "Baloo 2", "Work Sans", "Segoe UI", sans-serif; text-align: left;
}
html.m-ui #mLevelPill .mLv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.m-ui #mLevelPill svg { flex: none; transition: transform .18s; }
html.m-ui #mLevelPill[aria-expanded="true"] svg { transform: rotate(180deg); }
html.m-ui #mLevelCard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255,251,242,.05); border: 1px solid var(--m-line); }
html.m-ui #mLevelCard[hidden] { display: none; }
html.m-ui #mLevelCard .pill { display: block; width: 100%; box-sizing: border-box; border-radius: 12px !important; padding: 8px 12px !important; font-size: 14px !important; line-height: 1.35; white-space: normal; }
html.m-ui #mLevelCard #progbar { position: static !important; display: flex !important; width: 100%; }
html.m-ui #mLevelCard .mLink { align-self: flex-start; min-height: 40px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--m-line); background: none; color: #F7E7C6; font: 600 14px "Baloo 2", "Work Sans", sans-serif; cursor: pointer; }

/* departments: two rows of tiles, swiped sideways */
html.m-ui #mDepts h4 { margin: 2px 2px 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C89B6C; }
html.m-ui #mDepts .mTiles {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 56px); grid-auto-columns: minmax(148px, 42%);
  gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 2px; scrollbar-width: none;
}
html.m-ui #mDepts .mTiles::-webkit-scrollbar { display: none; }
html.m-ui .mTile {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px; scroll-snap-align: start;
  border-radius: 14px; border: 1px solid var(--m-line); background: rgba(255,251,242,.05); color: #F7E7C6;
  font-family: "Baloo 2", "Work Sans", "Segoe UI", sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.m-ui .mTile:active { background: rgba(227,131,97,.18); }
html.m-ui .mTile .mIc { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(200,155,108,.18); color: #F7E7C6; }
html.m-ui .mTile .mTx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
html.m-ui .mTile b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.m-ui .mTile small { font-size: 11.5px; font-weight: 600; color: #C89B6C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.m-ui #mInfo > * { flex: none; }
html.m-ui #mInfo #timeline { flex: none; position: static !important; left: auto !important; right: auto !important; width: 100%; box-sizing: border-box; padding: 6px 8px !important; }
html.m-ui #mInfo #timeline span { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
html.m-ui #mInfo #timeline .btn { min-width: 36px; min-height: 36px; }
html.m-ui #mInfo #ticker { position: static !important; border-radius: 10px; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; padding: 6px 12px !important; flex: none; }

/* bottom tab bar */
html.m-ui #mTabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--m-tabs) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #2B2118; border-top: 1px solid var(--m-line);
}
html.m-ui #mTabs button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; color: #F7E7C6; opacity: .78; font: 600 12px/1.1 "Baloo 2", "Work Sans", "Segoe UI", sans-serif;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.m-ui #mTabs button[aria-pressed="true"] { opacity: 1; color: #E38361; }
html.m-ui #mTabs .mBadge {
  position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; padding: 0 5px; border-radius: 999px;
  background: #E38361; color: #2B2118; font: 800 11px/16px "Baloo 2", sans-serif; font-style: normal; text-align: center;
}

/* sheets */
html.m-ui #mScrim { position: fixed; inset: 0; z-index: 24; background: rgba(43,33,24,.45); opacity: 0; pointer-events: none; transition: opacity .18s; }
html.m-ui #mScrim.open { opacity: 1; pointer-events: auto; }
html.m-ui .mSheet {
  position: fixed; left: 0; right: 0; bottom: calc(var(--m-tabs) + env(safe-area-inset-bottom, 0px)); z-index: 25;
  max-height: 72vh; overflow-y: auto; padding: 4px 14px 16px;
  background: #2B2118; color: #F7E7C6; border-top: 1px solid var(--m-line); border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  transform: translateY(110%); transition: transform .2s ease; visibility: hidden;
}
html.m-ui .mSheet.open { transform: none; visibility: visible; }
html.m-ui .mSheet header { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; position: sticky; top: 0; background: #2B2118; z-index: 1; }
html.m-ui .mSheet header b { font-size: 17px; font-weight: 800; }
html.m-ui .mSheet .mClose { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--m-line); background: none; color: #F7E7C6; font-size: 20px; line-height: 1; cursor: pointer; }
html.m-ui .mSheet .mBody { display: flex; flex-wrap: wrap; gap: 8px; }
html.m-ui .mSheet .mSec { width: 100%; }
html.m-ui .mSheet h4 { margin: 10px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C89B6C; }
html.m-ui .mSheet .mRow { display: flex; flex-wrap: wrap; gap: 8px; }
html.m-ui .mSheet .btn, html.m-ui .mSheet select, html.m-ui .mSheet .seg {
  min-height: 44px; font-size: 15px !important; padding: 8px 14px !important; border-radius: 12px !important;
  background: rgba(255,251,242,.06) !important; color: #F7E7C6 !important; border: 1px solid var(--m-line) !important; box-shadow: none !important;
}
html.m-ui .mSheet .btn.cta, html.m-ui .mSheet .btn.primary { background: #E38361 !important; color: #2B2118 !important; border-color: #E38361 !important; font-weight: 700; }
html.m-ui #mLog #startBtn { flex: 1 1 100%; min-height: 52px; font-size: 17px !important; }
html.m-ui .mSheet .seg { display: inline-flex; padding: 3px !important; gap: 2px; }
html.m-ui .mSheet .seg button { min-width: 52px; min-height: 36px; border-radius: 9px; color: #F7E7C6 !important; background: none; font-size: 15px; }
html.m-ui .mSheet .seg button[aria-pressed="true"] { background: #F7E7C6 !important; color: #2B2118 !important; }
html.m-ui .mSheet .recapgrp { display: flex !important; flex-wrap: wrap; gap: 8px; width: 100%; background: none !important; border: 0 !important; padding: 0 !important; }
html.m-ui .mSheet .recapgrp .btn { height: auto; }

/* pop-ups (Guide, counter, departments) use the whole screen on a phone */
html.m-ui #modal { z-index: 40 !important; }
html.m-ui #sheet {
  width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important;
  max-height: none !important; height: 100% !important; box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
}
html.m-ui #odg-install { bottom: calc(var(--m-tabs) + env(safe-area-inset-bottom, 0px) + 10px) !important; }

/* messages from the page sit above the tab bar */
html.m-ui #toast { bottom: calc(var(--m-tabs) + env(safe-area-inset-bottom, 0px) + 14px) !important; z-index: 45 !important; }


/* ===================== sideways: the city fills the screen, everything else is a pill over it ===================== */
html.m-ui.m-land { --m-l: env(safe-area-inset-left, 0px); --m-b: env(safe-area-inset-bottom, 0px); --m-t: env(safe-area-inset-top, 0px); }

/* top: mode switch and the four numbers as two pills */
html.m-ui.m-land .top {
  display: flex !important; gap: 8px; align-items: flex-start; flex-wrap: nowrap;
  top: calc(var(--m-t) + 8px); left: calc(var(--m-l) + 8px); right: calc(var(--m-rail) + 8px);
  padding: 0 !important; background: none; border: 0; pointer-events: none;
}
html.m-ui.m-land .top > * { pointer-events: auto; }
html.m-ui.m-land .top .brand { display: none !important; }
html.m-ui.m-land #modeSeg { width: auto; flex: none; background: var(--m-bar) !important; border-radius: 999px !important; padding: 2px !important; }
html.m-ui.m-land #modeSeg button { min-height: 32px; font-size: 13.5px; padding: 0 12px; border-radius: 999px; }
html.m-ui.m-land .topstats {
  width: auto; max-width: none; margin-left: auto !important; flex: 0 1 auto; min-width: 0;
  display: flex !important; gap: 0; padding: 2px 8px !important; border-radius: 999px !important; background: var(--m-bar) !important;
}
html.m-ui.m-land .topstats .stat { padding: 1px 8px !important; }
html.m-ui.m-land .topstats .stat b { font-size: 13.5px !important; }
html.m-ui.m-land .topstats .stat span { font-size: 8px !important; }

/* the city: full height, left of the rail */
html.m-ui.m-land #mPan { top: 0; bottom: 0; left: 0; right: var(--m-rail); height: auto; }
html.m-ui.m-land #hud { top: calc(var(--m-t) + 52px) !important; left: calc(var(--m-l) + 8px) !important; padding: 4px 10px !important; }
html.m-ui.m-land #hud small { font-size: 9.5px; }

/* bottom-left: the level pill; its card opens upwards */
html.m-ui.m-land #mInfo {
  top: auto; right: auto; bottom: calc(var(--m-b) + 8px); left: calc(var(--m-l) + 8px);
  width: min(340px, 42vw); max-height: calc(100vh - 70px); padding: 0; gap: 6px; overflow: visible;
  flex-direction: column-reverse; background: none;
}
html.m-ui.m-land #mLevelPill { min-height: 36px; font-size: 13.5px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
html.m-ui.m-land #mLevelPill svg { transform: rotate(180deg); }
html.m-ui.m-land #mLevelPill[aria-expanded="true"] svg { transform: none; }
html.m-ui.m-land #mLevelCard { align-self: flex-start; width: min(480px, calc(100vw - var(--m-rail) - var(--m-l) - 24px)); box-sizing: border-box; background: var(--m-bar); max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
html.m-ui.m-land #mLevelCard #ticker { position: static !important; border-radius: 10px; white-space: normal !important; line-height: 1.4; padding: 6px 10px !important; }

/* bottom: the timeline as a slim bar between the level pill and the rail */
html.m-ui.m-land #mTl {
  position: fixed; z-index: 2; bottom: calc(var(--m-b) + 8px);
  left: calc(var(--m-l) + min(340px, 42vw) + 16px); right: calc(var(--m-rail) + 8px);
}
html.m-ui.m-land #mTl #timeline {
  position: static !important; left: auto !important; right: auto !important; width: 100%; box-sizing: border-box;
  padding: 3px 6px !important; border-radius: 999px !important; background: var(--m-bar) !important; border-color: var(--m-line) !important; color: #F7E7C6 !important;
}
html.m-ui.m-land #mTl #timeline .btn { min-width: 30px; min-height: 30px; border-radius: 999px; }
html.m-ui.m-land #mTl #timeline span { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }

/* right: the tab rail */
html.m-ui.m-land #mTabs {
  left: auto; top: 0; bottom: 0; right: 0; height: auto; width: calc(var(--m-rail) + env(safe-area-inset-right, 0px));
  grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr);
  padding: calc(var(--m-t) + 4px) env(safe-area-inset-right, 0px) calc(var(--m-b) + 4px) 0;
  border-top: 0; border-left: 1px solid var(--m-line);
}
html.m-ui.m-land #mTabs button { font-size: 11px; }
html.m-ui.m-land #mTabs .mBadge { top: 4px; }

/* sheets slide in from the right, beside the rail */
html.m-ui.m-land .mSheet {
  top: 0; bottom: 0; left: auto; right: var(--m-rail); width: min(420px, 62vw); max-height: none;
  border-radius: 18px 0 0 18px; border-top: 0; border-left: 1px solid var(--m-line);
  padding-top: calc(var(--m-t) + 4px); padding-bottom: calc(var(--m-b) + 12px);
  transform: translateX(110%); box-shadow: -10px 0 30px rgba(0,0,0,.35);
}
html.m-ui.m-land .mSheet.open { transform: none; }

/* departments panel: two columns of tiles */
html.m-ui.m-land #mDeptSheet #mDepts { width: 100%; }
html.m-ui.m-land #mDeptSheet #mDepts h4 { display: none; }
html.m-ui.m-land #mDeptSheet .mTiles {
  grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 58px;
  grid-auto-columns: auto; overflow: visible;
}

html.m-ui.m-land #toast { bottom: calc(var(--m-b) + 56px) !important; }
html.m-ui.m-land #odg-install { bottom: calc(var(--m-b) + 56px) !important; left: calc(50% - var(--m-rail) / 2) !important; }