/* Phones and tablets (body.touch). Loaded last: this file owns the in-game layout on touch screens.
 *
 *  landscape                                      portrait (main way to play)
 *  ┌────────────────────────────────────────┐   ┌──────────────────────┐
 *  │ ☺ needs      time·mood·money    🎙 ◉map │   │ time · mood · money  │
 *  │ 🏠 home bar     📍 place          ⛶    │   │ ☺ needs        ◉map  │
 *  │                toasts                  │   │ 📍 place        🎙 ⛶ │
 *  │                                [USE]   │   │                      │
 *  │  (joystick)            sheet → [RUN][JUMP] │   │  sheet (bottom)      │
 *  │              Me·Map·Phone              │   │ (joy)   [USE][RUN][J]│
 *  └────────────────────────────────────────┘   │    Me · Map · Phone  │
 *                                                 └──────────────────────┘
 * Landscape: the place card is a sheet opened by the big USE button (it shows the place's icon).
 * Portrait: the place card is a panel docked above the tab bar (see the portrait block). */
.touch {
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --edge: 10px;
}
.touch * { -webkit-tap-highlight-color: transparent; }
body.touch { -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
.touch input, .touch textarea { -webkit-user-select: text; user-select: text; }

/* ---------- top: status, needs, minimap ---------- */
.touch #topbar { top: calc(var(--sat) + 8px); font: 700 12px var(--ui); gap: 8px; padding: 4px 4px 4px 12px; }
.touch #topbar .tb-name { display: none; }
.touch #topbar .tb-money { padding: 6px 11px; }
.touch #needsW { top: calc(var(--sat) + 8px); left: calc(var(--sal) + var(--edge)); bottom: auto; transform: scale(.72); transform-origin: top left; }
.touch #minimap { top: calc(var(--sat) + 8px); right: calc(var(--sar) + var(--edge)); width: 92px; height: 92px; border-width: 2px; }
.touch #mapBtn { display: none; } /* the minimap and the Map tab already open the map */
.touch #micBtn, .touch #fsBtn { right: calc(var(--sar) + var(--edge) + 104px); left: auto; bottom: auto; width: 42px; height: 42px; font-size: 18px; border-width: 1.5px; }
.touch #micBtn { top: calc(var(--sat) + 8px); }
.touch #fsBtn { top: calc(var(--sat) + 58px); }
.touch #place { top: calc(var(--sat) + 54px); font-size: 12px; padding: 5px 12px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.touch #prompt { top: calc(var(--sat) + 86px); bottom: auto; font-size: 13px; }
.touch #speedo { top: calc(var(--sat) + 110px); right: calc(var(--sar) + var(--edge)); font-size: 16px; padding: 6px 10px; }

/* messages: small, near the top, never over the middle of the screen */
.touch #toasts { top: calc(var(--sat) + 86px); max-width: min(70vw, 460px); }
.touch #toasts div { font-size: 12px; padding: 6px 13px; text-align: center; white-space: normal; line-height: 1.3; }

/* home: Decorate / Wardrobe / Leave as small pills under the needs */
.touch #homeBar { top: calc(var(--sat) + 62px); left: calc(var(--sal) + var(--edge)); transform: none; gap: 6px; }
.touch #homeBar button { padding: 7px 12px; font-size: 12px; }
.touch #homeBar kbd { display: none; }

/* ---------- bottom: nav + thumb controls ---------- */
.touch #lifeNav { bottom: calc(var(--sab) + 8px); padding: 4px; border-radius: 18px; }
.touch #lifeNav button { padding: 4px 14px; font-size: 10.5px; }
.touch #lifeNav button b { font-size: 18px; }
.touch #joy { left: calc(var(--sal) + 100px); top: calc(100% - var(--sab) - 100px); }

.touch .tbtn { box-shadow: 0 3px 12px rgba(0,0,0,.25); }
.touch #jumpBtn { right: calc(var(--sar) + 16px); bottom: calc(var(--sab) + 16px); width: 80px; height: 80px; }
.touch #runBtn { right: calc(var(--sar) + 106px); bottom: calc(var(--sab) + 18px); width: 58px; height: 58px; }
.touch #carBtn { right: calc(var(--sar) + 106px); bottom: calc(var(--sab) + 90px); width: 58px; height: 58px; }
body.driving.touch #carBtn { right: calc(var(--sar) + 26px); bottom: calc(var(--sab) + 160px); }

/* the action button: what you can do here, one tap away */
#actBtn { display: none; right: calc(var(--sar, 0px) + 20px); bottom: calc(var(--sab, 0px) + 110px); width: 72px; height: 72px;
  background: var(--brand); border-color: #fff; overflow: hidden; z-index: 4; }
#actBtn b { font-size: 28px; margin: 0; } #actBtn span { font: 800 10px var(--ui); letter-spacing: .5px; }
#actBtn i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(255,255,255,.45) calc(var(--p, 0) * 1turn), transparent 0); pointer-events: none; }
body.touch.has-spot:not(.driving):not(.building) #actBtn { display: flex; animation: pop .3s ease-out; }
body.spot-open #actBtn { background: var(--ink); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* the place card as an action sheet, next to the thumb */
.touch #locCard { display: none; top: auto; left: auto; margin: 0; right: calc(var(--sar) + 104px); bottom: calc(var(--sab) + 16px);
  width: min(330px, 46vw); max-height: calc(100vh - var(--sat) - var(--sab) - 40px); overflow-y: auto; padding: 10px; border-radius: 20px; z-index: 5; }
.touch #locCard.show.open { display: block; animation: rise .2s ease-out; }
.touch #locCard.busy.show { display: none; } /* the USE button shows the progress */
.touch #locCard .hd { margin-bottom: 8px; }
.touch #locCard .hd .ic { width: 36px; height: 36px; font-size: 20px; }
.touch #locCard .hd strong { font-size: 14px; } .touch #locCard .hd small { display: block; font-size: 11.5px; }
.touch #locCard .acts { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.touch #locCard .acts button { width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 14px; font-size: 14px; justify-content: flex-start; text-align: left; }
.touch #locCard .acts button em { margin-left: auto; }
.touch #locCard .acts button kbd { display: none; }

/* sheets and phone fill small screens */
.touch .sheet { max-height: calc(100vh - var(--sat) - var(--sab) - 16px); }
.touch .sheet .hd { padding: 12px 16px 6px; }
/* the phone fills small screens: keep its Close button on top of it */
#phoneClose { z-index: 3; }
.touch #phoneClose { top: calc(var(--sat) + 8px); right: calc(var(--sar) + 10px); padding: 7px 13px; font-size: 13px; }

/* things only phones need */
body:not(.touch) .mobile-only, body:not(.touch) #locCard .lcMin { display: none; }
#locCard .lcMin { margin-left: auto; border: 0; background: var(--soft); width: 34px; height: 34px; border-radius: 50%; font: 800 18px var(--ui); cursor: pointer; color: var(--ink); flex: none; }
#locCard.mini .lcMin { transform: rotate(180deg); }

/* clean screen: only the world, your controls and the tab bar */
body.clean :is(#needsW, #minimap, #place, #micBtn, #fsBtn, #homeBar, #toasts, #locCard, #actBtn) { display: none !important; }
body.clean #topbar { opacity: .55; }
#lifeNav button.on { background: var(--ink); color: #fff; }

/* ---------- portrait: the main way to play on a phone ----------
 * top bar (time · mood · money +) · needs · minimap; the place you're at is a panel docked above the
 * tab bar with big action chips (tap = do it); thumbs keep joystick and jump above it. */
@media (orientation: portrait) {
  .touch #topbar { left: calc(var(--sal) + var(--edge)); right: calc(var(--sar) + var(--edge)); transform: none; justify-content: space-between; font-size: 13px; padding: 5px 5px 5px 14px; }
  .touch #needsW { top: calc(var(--sat) + 56px); }
  .touch #minimap { top: calc(var(--sat) + 56px); width: 84px; height: 84px; }
  .touch #micBtn, .touch #fsBtn { right: calc(var(--sar) + var(--edge) + 92px); }
  .touch #micBtn { top: calc(var(--sat) + 56px); }
  .touch #fsBtn { top: calc(var(--sat) + 104px); }
  .touch #place { top: calc(var(--sat) + 150px); max-width: 80vw; }
  .touch #homeBar { top: calc(var(--sat) + 106px); max-width: calc(100vw - 200px); flex-wrap: wrap; }
  .touch #toasts { top: calc(var(--sat) + 186px); max-width: 86vw; }
  .touch #prompt { top: calc(var(--sat) + 186px); }

  /* tab bar across the bottom */
  .touch #lifeNav { left: calc(var(--sal) + var(--edge)); right: calc(var(--sar) + var(--edge)); transform: none; justify-content: space-around; bottom: calc(var(--sab) + 8px); padding: 5px; border-radius: 22px; }
  .touch #lifeNav button { flex: 1; padding: 6px 0; font-size: 11px; border-radius: 16px; }

  /* the docked place panel */
  #actBtn, body.touch.has-spot:not(.driving):not(.building) #actBtn { display: none; }
  .touch #locCard, .touch #locCard.busy.show { left: calc(var(--sal) + var(--edge)); right: calc(var(--sar) + var(--edge)); width: auto; top: auto; bottom: calc(var(--sab) + 72px); max-height: none; overflow: visible; padding: 10px 10px 8px; border-radius: 22px; }
  .touch #locCard.show, .touch #locCard.busy.show { display: block; animation: rise .2s ease-out; }
  .touch #locCard .hd { margin-bottom: 8px; }
  .touch #locCard .hd small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
  .touch #locCard .acts { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 2px; }
  .touch #locCard .acts::-webkit-scrollbar { display: none; }
  .touch #locCard .acts button { width: auto; flex: none; min-height: 44px; padding: 8px 14px; white-space: nowrap; border-radius: 999px; font-size: 13.5px; }
  .touch #locCard .acts button em { margin-left: 4px; }
  .touch #locCard.mini .acts, .touch #locCard.mini .hd small { display: none; }
  .touch #locCard.mini .hd { margin: 0; }

  /* thumbs: above the tab bar, and above the panel when it's there */
  .touch #jumpBtn { bottom: calc(var(--sab) + 84px); width: 74px; height: 74px; }
  .touch #runBtn { bottom: calc(var(--sab) + 90px); right: calc(var(--sar) + 100px); width: 56px; height: 56px; }
  .touch #carBtn, body.driving.touch #carBtn { bottom: calc(var(--sab) + 164px); right: calc(var(--sar) + 24px); }
  .touch #joy { top: calc(100% - var(--sab) - 150px); }
  body.touch.has-spot:not(.clean):not(.driving) #jumpBtn { bottom: calc(var(--sab) + 216px); }
  body.touch.has-spot:not(.clean):not(.driving) #runBtn { bottom: calc(var(--sab) + 222px); }
  body.touch.has-spot:not(.clean):not(.driving) #carBtn { bottom: calc(var(--sab) + 296px); }
  body.touch.has-spot:not(.clean):not(.driving) #joy { top: calc(100% - var(--sab) - 280px); }
  .touch #gasBtn, .touch #brakeBtn { bottom: calc(var(--sab) + 76px); } .touch #hornBtn { bottom: calc(var(--sab) + 184px); }
}

/* very short landscape screens (small phones) */
@media (orientation: landscape) and (max-height: 380px) {
  .touch #needsW { transform: scale(.62); }
  .touch #minimap { width: 78px; height: 78px; }
  .touch #micBtn, .touch #fsBtn { right: calc(var(--sar) + var(--edge) + 88px); width: 38px; height: 38px; }
  .touch #fsBtn { top: calc(var(--sat) + 52px); }
  #actBtn { width: 62px; height: 62px; bottom: calc(var(--sab) + 100px); }
  .touch #jumpBtn { width: 70px; height: 70px; }
}
@media (orientation: landscape) { .touch #locCard .lcMin { display: none; } }