/* Caytopia: mobile layer (loads after design.css and phone.css). Everything is scoped to html.nl-touch,
   which mobile.js adds only on touch devices, so desktop is untouched. */

/* ---------- global touch hygiene ---------- */
html.nl-touch, html.nl-touch body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
html.nl-touch #app { height: 100vh; height: 100dvh; width: 100%; max-width: 100vw; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.nl-touch #world, html.nl-touch #mapHit, html.nl-touch #mapCanvas { touch-action: none; }
html.nl-touch input, html.nl-touch textarea, html.nl-touch select { font-size: 16px; -webkit-user-select: text; user-select: text; } /* 16px stops iOS focus-zoom */
html.nl-touch button, html.nl-touch [role="button"], html.nl-touch .row, html.nl-touch .app { touch-action: manipulation; }
html.nl-touch .sheet, html.nl-touch .scr { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.nl-touch .joy { touch-action: none; }

/* tap targets >= 44px */
html.nl-touch .round, html.nl-touch .side-btns .round, html.nl-touch .avatar-badge { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
html.nl-touch .side-btns { gap: 6px; }
html.nl-touch .tabbar button { min-height: 44px; }
html.nl-touch .pill, html.nl-touch .prompt, html.nl-touch .pill-btn, html.nl-touch .speed button { min-height: 44px; }
html.nl-touch .speed button { min-width: 44px; }
html.nl-touch .mv-stack button, html.nl-touch .mv-chips button, html.nl-touch .mv-top button { min-width: 44px; min-height: 44px; }
html.nl-touch .toggle { min-width: 52px; min-height: 32px; }
html.nl-touch .minimap-wrap #minimap { touch-action: manipulation; }

/* ---------- minimal joystick: thin frosted ring + soft pearl knob ---------- */
.joy { display: none; }
html.nl-touch .joy {
  --jy: 112px;
  display: block; position: absolute; z-index: 12; width: var(--jy); height: var(--jy); border-radius: 50%;
  right: calc(var(--nl-gutter) + 6px + env(safe-area-inset-right, 0px));
  bottom: var(--row, 76px);
  border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(10, 30, 50, .12), inset 0 0 18px rgba(255, 255, 255, .12);
  opacity: .42; transition: opacity .2s, background .2s, border-color .2s; touch-action: none; -webkit-tap-highlight-color: transparent;
}
html.nl-touch.nl-joy-left .joy { right: auto; left: calc(var(--nl-gutter) + 6px + env(safe-area-inset-left, 0px)); }
html.nl-touch .joy.held { opacity: 1; background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .85); }
html.nl-touch .joy.run { border-color: rgba(120, 235, 225, .95); box-shadow: 0 0 14px rgba(90, 220, 210, .45), inset 0 0 18px rgba(255, 255, 255, .16); }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, #f1f5f8 55%, #dbe3ea);
  box-shadow: 0 3px 8px rgba(10, 30, 50, .28), inset 0 -2px 3px rgba(120, 140, 160, .25);
  transition: transform .28s cubic-bezier(.3, 1.7, .5, 1); will-change: transform; }
.joy.held .joy-knob { transition: none; }

/* ---------- PHONE LAYOUT (portrait): compact HUD, world visible in the middle ---------- */
html.nl-phone { --row: calc(var(--nl-gutter) + env(safe-area-inset-bottom, 0px) + 66px); --tb: calc(var(--nl-gutter) + env(safe-area-inset-bottom, 0px)); --sl: calc(var(--nl-gutter) + env(safe-area-inset-left, 0px)); --sr: calc(var(--nl-gutter) + env(safe-area-inset-right, 0px)); --st: calc(var(--nl-gutter) + env(safe-area-inset-top, 0px)); }
html.nl-phone .tabbar { left: var(--sl); right: var(--sr); bottom: var(--tb); padding: 4px; }
html.nl-phone .tabbar button { height: 46px; }
html.nl-phone .hud-tl { left: var(--sl); top: var(--st); right: calc(var(--sr) + 52px); gap: 8px; align-items: center; }
html.nl-phone .hud-tr { right: var(--sr); top: var(--st); gap: 6px; }
html.nl-phone .avatar-badge { width: 44px; height: 44px; }
html.nl-phone .side-btns { gap: 6px; }
html.nl-phone .side-btns .round { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
html.nl-phone #tiltChip { display: none; }
@keyframes nlPop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* status: a slim pill (money, time, needs ring); tap to expand */

html.nl-phone .minimap-wrap { width: 72px; height: 72px; padding: 3px; }
html.nl-phone .minimap-wrap .north { width: 16px; height: 16px; font-size: 8px; top: -5px; }
html.nl-phone .actbar { left: var(--sl); right: calc(var(--sr) + 126px); bottom: calc(var(--row) + 4px); justify-content: flex-start; transform: none; max-width: none; }
html.nl-phone.nl-joy-left .actbar { left: calc(var(--sl) + 126px); right: calc(var(--sr) + 84px); justify-content: flex-end; }
html.nl-phone.nl-joy-left .minimap-wrap { left: auto; right: var(--sr); top: auto; bottom: var(--row); }
html.nl-phone .actbar > * { max-width: 100%; min-width: 0; }
html.nl-phone .actbar .pill { overflow: hidden; white-space: nowrap; padding: 0 14px; }
html.nl-phone .actbar { flex-wrap: wrap; }
html.nl-phone .hud-top { top: auto; bottom: calc(var(--row) + 124px); left: var(--sl); right: var(--sr); width: auto; transform: none; align-items: stretch; }
html.nl-phone #toasts { top: calc(var(--st) + 130px); bottom: auto; }
html.nl-phone .chatbox { bottom: calc(var(--row) + 128px); left: var(--sl); }
html.nl-phone .pedals { left: var(--sl); right: auto; bottom: calc(var(--row) + 64px); gap: 10px; }
html.nl-phone.nl-joy-left .pedals { left: auto; right: var(--sr); bottom: calc(var(--row) + 84px); }
html.nl-phone .pedals button { width: 76px; height: 76px; border-radius: 24px; }
html.nl-phone .tilt-bubble { display: none; }
html.nl-phone .stopbox { top: 34%; max-width: calc(100% - 24px); }

/* ---------- landscape phone (844x390) ---------- */
html.nl-phone.nl-land { --row: calc(var(--nl-gutter) + env(safe-area-inset-bottom, 0px)); }
html.nl-phone.nl-land .joy { --jy: 104px; bottom: calc(var(--row) + 4px); }
html.nl-phone.nl-land .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: min(310px, calc(100vw - 300px)); gap: 0; padding: 3px; }
html.nl-phone.nl-land .tabbar button { flex: 1; flex-direction: column; gap: 1px; height: 44px; padding: 0 2px; font-size: 10px; min-width: 44px; }
html.nl-phone.nl-land .tabbar button svg { width: 17px; height: 17px; }
html.nl-phone.nl-land .hud-tl { max-width: 360px; }
html.nl-phone.nl-land .minimap-wrap { width: 64px; height: 64px; left: var(--sl); top: calc(var(--st) + 52px); bottom: auto; right: auto; }
html.nl-phone.nl-land.nl-joy-left .minimap-wrap { left: auto; right: var(--sr); top: auto; bottom: calc(var(--row) + 4px); }
html.nl-phone.nl-land .side-btns { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; width: 86px; gap: 6px; }
html.nl-phone.nl-land .hud-tl { right: calc(var(--sr) + 100px); }
html.nl-phone.nl-land .hud-top { top: var(--st); bottom: auto; left: 50%; right: auto; width: min(360px, calc(100vw - 520px)); transform: translateX(-50%); }
html.nl-phone.nl-land .actbar, html.nl-phone.nl-land.nl-joy-left .actbar { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--row) + 56px); max-width: calc(100vw - 280px); justify-content: center; }
html.nl-phone.nl-land #toasts { top: var(--st); width: min(420px, 50vw); }
html.nl-phone.nl-land .pedals { bottom: calc(var(--row) + 4px); left: var(--sl); right: auto; gap: 10px; }
html.nl-phone.nl-land.nl-joy-left .pedals { left: auto; right: var(--sr); bottom: calc(var(--row) + 74px); }
html.nl-phone.nl-land .pedals button { width: 68px; height: 68px; border-radius: 22px; }
html.nl-phone.nl-land .chatbox { bottom: calc(var(--row) + 112px); width: 260px; }
html.nl-phone.nl-land .stopbox { top: 30%; }

/* ---------- bottom sheets on phones ---------- */
html.nl-phone #modal:not(.phone-mode) .sheet, html.nl-phone #modal:not(.phone-mode) .sheet.wide {
  left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; transform: none;
  height: min(92vh, calc(100dvh - env(safe-area-inset-top, 0px) - 14px)); max-height: none;
  border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: nlSheetUp .38s cubic-bezier(.2, .9, .25, 1);
}
html.nl-phone.nl-land #modal:not(.phone-mode) .sheet, html.nl-phone.nl-land #modal:not(.phone-mode) .sheet.wide {
  left: 50%; right: auto; width: min(560px, calc(100vw - 24px)); transform: translateX(-50%); height: calc(100dvh - 10px); border-radius: 22px 22px 0 0; animation: nlSheetUpL .38s cubic-bezier(.2, .9, .25, 1);
}
html.nl-phone #modal:not(.phone-mode) .sheet::before { content: ""; position: absolute; z-index: 5; left: 50%; top: 7px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(60, 70, 90, .32); pointer-events: none; }
html.nl-phone #modal:not(.phone-mode) .scrim { background: rgba(17, 27, 46, .32); }
@keyframes nlSheetUp { from { transform: translateY(100%); } }
@keyframes nlSheetUpL { from { transform: translate(-50%, 100%); } }

/* ---------- map mode ---------- */
html.nl-phone #mapTop { top: calc(var(--nl-gutter) + env(safe-area-inset-top, 0px)); }
html.nl-phone #mapChips { max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
html.nl-phone #mapSide { right: calc(var(--nl-gutter) + env(safe-area-inset-right, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .joy-knob { transition: none !important; }
}
html.nl-touch .pedals, html.nl-touch .tilt-bubble { display: none !important; } /* the stick covers gas, brake and steering */

/* a sheet is open: tab bar slides away, never covers a sheet's CTA; sheet content clears the bottom edge */
html.nl-phone .tabbar { transition: transform .28s cubic-bezier(.3, .9, .3, 1), opacity .2s; }
html.nl-phone.nl-sheet-open .tabbar { transform: translateY(160%); opacity: 0; pointer-events: none; }
html.nl-phone.nl-land.nl-sheet-open .tabbar { transform: translate(-50%, 160%); }
html.nl-phone.nl-sheet-open #hud.map-mode { z-index: 10; }
html.nl-phone.nl-sheet-open .joy { opacity: 0; pointer-events: none; }
html.nl-phone #modal:not(.phone-mode) .sheet .scr { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* the single pill: one frosted row, tabular numerals */

/* minimap lives bottom-left (clear of the goal card under the status pill); bottom-right when the joystick is on the left */
html.nl-phone .minimap-wrap { left: var(--sl); top: auto; right: auto; bottom: var(--row); }
html.nl-phone .actbar { left: calc(var(--sl) + 84px); }
html.nl-phone.nl-joy-left .actbar { left: calc(var(--sl) + 126px); }
html.nl-phone.nl-land .minimap-wrap { top: auto; bottom: calc(var(--row) + 4px); }
html.nl-phone.nl-land .actbar { left: 50%; }

/* joystick docked inside an interior: hidden in Build/Buy (root loses .int-live) */
.int-root:not(.int-live) .joy { display: none !important; }
html.nl-touch .int-root .joy { z-index: 12; pointer-events: auto; }
html.nl-touch:not(.nl-joy-left) .int-root.int-live .int-cam { bottom: calc(var(--row, 76px) + 124px); }
html.nl-touch:not(.nl-joy-left) .int-root.int-live.int-pmin .int-cam { bottom: calc(var(--row, 76px) + 124px); }

/* ---------- iOS-style bottom tab bar (phones). Portrait: full-width dock flush to the bottom, safe-area aware, icon over label.
   --tbh is the bar height above the home indicator; --row (minimap/joystick/action row) sits just above it. ---------- */
html.nl-phone .tabbar button { position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; padding: 0 2px; background: none; box-shadow: none; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.1; color: var(--nl-ink-3); white-space: nowrap; }
html.nl-phone .tabbar button[aria-current="page"] { background: none; box-shadow: none; color: var(--nl-teal, #00A693); }
html.nl-phone .tabbar button[aria-current="page"]::before { content: ""; position: absolute; left: 50%; top: -5px; width: 26px; height: 3px; margin-left: -13px; border-radius: 0 0 3px 3px; background: var(--nl-teal, #00A693); }
html.nl-phone .tabbar button[aria-current="page"] svg { stroke-width: 2; }
html.nl-phone.nl-port { --tbh: 58px; --row: calc(env(safe-area-inset-bottom, 0px) + var(--tbh) + 10px); }
html.nl-phone.nl-port .tabbar { left: 0; right: 0; bottom: 0; width: auto; transform: none; gap: 0; justify-content: space-around; box-sizing: border-box; height: calc(var(--tbh) + env(safe-area-inset-bottom, 0px)); padding: 4px 4px env(safe-area-inset-bottom, 0px); border-radius: 0; background: rgba(255, 255, 255, .88); border-top: 1px solid rgba(11, 20, 48, .10); box-shadow: 0 -6px 20px rgba(15, 27, 51, .10); }
html.nl-phone.nl-port .tabbar button { height: auto; align-self: stretch; min-height: 44px; border-radius: 12px; }
html.nl-phone.nl-port .tabbar button svg { width: 24px; height: 24px; }
html.nl-phone.nl-port.nl-sheet-open .tabbar { transform: translateY(110%); }
/* landscape: shorter, flat, centred between minimap and joystick */
html.nl-phone.nl-land .tabbar { border-radius: 16px; padding: 2px 4px; width: min(340px, calc(100vw - 300px)); }
html.nl-phone.nl-land .tabbar button { height: 42px; font-size: 10px; border-radius: 12px; }
html.nl-phone.nl-land .tabbar button[aria-current="page"]::before { top: -2px; width: 22px; margin-left: -11px; }
html.nl-phone.nl-land .tabbar button svg { width: 20px; height: 20px; }

/* ======================================================================================================
   RESPONSIVE LANDSCAPE LAYER (phones + iPad). Keyed on media queries, not on touch, so resizing/rotating reflows live.
   Landscape phone = (orientation: landscape) and (max-height: 500px). Safe areas via env(safe-area-inset-*).
   ====================================================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* title: two columns, compact, scrolls only if truly needed */
  #title { background: linear-gradient(90deg, rgba(246, 247, 249, .96) 0%, rgba(246, 247, 249, .86) 55%, rgba(246, 247, 249, .3) 100%); padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  #title .t-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; padding: 10px 14px; align-items: center; max-width: none; }
  #title .t-kicker { font-size: 12px; }
  #title .logo { font-size: clamp(38px, 15vh, 64px); margin: 4px 0 2px; }
  #title .logo br { display: none; }
  #title .logo span { margin-left: .18em; }
  #title .tagline { font-size: 17px; margin: 4px 0 2px; }
  #title .t-meta { font-size: 12px; }
  #title .feats { display: none; }
  #title .setup { padding: 12px 14px; border-radius: 20px; }
  #title .setup h2 { font-size: 17px; margin: 0 0 6px; }
  #title .setup .field { margin-top: 6px; }
  #title .t-actions { margin-top: 10px; }
  #title .t-actions .cta, .t-actions .btn2 { min-height: 44px; }
  #title .t-note { font-size: 12px; margin-top: 6px; line-height: 1.35; }
  #title .t-note + .t-note { display: none; }
}

/* landscape phone: every sheet is a right-side panel (~46% width) so the world stays visible on the left */
html.nl-short { --pan-w: min(46vw, 440px); }
html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .sheet, html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .sheet.wide {
  left: auto; right: 0; top: 0; bottom: 0; width: calc(var(--pan-w) + env(safe-area-inset-right, 0px)); max-width: none; height: auto; transform: none;
  border-radius: 22px 0 0 22px; padding: 0 env(safe-area-inset-right, 0px) 0 0; animation: nlSheetSide .32s cubic-bezier(.2, .9, .25, 1);
}
html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .sheet::before { display: none; }
html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .scrim { background: rgba(17, 27, 46, .14); }
html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .sheet .scr { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
@keyframes nlSheetSide { from { transform: translateX(100%); } }
html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .hero { height: 108px; }
html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .hero .nav .xbtn, html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .hero .nav .back, html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .nav .xbtn, html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .nav .back { min-width: 44px; min-height: 44px; }
html.nl-short.nl-phone.nl-land #modal:not(.phone-mode) .h1 { font-size: 22px; }

/* coach tip: never over the status pill / goal card */
@media (orientation: landscape) and (max-height: 500px) {
  .wf-coach { left: auto; right: calc(var(--nl-gutter, 12px) + 96px + env(safe-area-inset-right, 0px)); top: calc(var(--nl-gutter, 12px) + env(safe-area-inset-top, 0px)); transform: none; width: min(380px, calc(100vw - 420px)); padding: 6px 10px; }
  .wf-coach .wf-x { min-height: 44px; min-width: 44px; }
}
@media (min-width: 601px) and (max-width: 900px) and (min-height: 501px) {
  html .wf-coach { left: auto; right: calc(var(--nl-gutter) + 64px); top: var(--nl-gutter); transform: none; width: min(420px, calc(100vw - 400px)); }
  /* narrow iPad (portrait / split view): smaller minimap lifted clear of the tab bar and prompt */
  html .minimap-wrap { width: 116px; height: 116px; bottom: calc(var(--nl-gutter) + 64px); }
}

/* ---------- interiors (Live / Buy / Build) on a landscape phone: one compact top row, camera cluster as a 3-col grid, floors on the left ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  html .int-root .int-top { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); top: calc(6px + env(safe-area-inset-top, 0px)); gap: 6px; flex-wrap: nowrap; }
  html .int-root .int-title { flex: 0 1 190px; min-width: 0; padding: 4px 10px 4px 8px; gap: 8px; min-height: 46px; }
  html .int-root .int-title::before { flex-basis: 26px; height: 26px; border-radius: 9px; }
  html .int-root .int-ic { flex-basis: 26px; height: 26px; border-radius: 9px; } html .int-root .int-ic svg { width: 19px; height: 19px; }
  html .int-root .int-h { font-size: 14px; } html .int-root .int-sub { font-size: 10px; }
  html .int-root .int-modes { margin: 0 auto; flex: 0 0 auto; padding: 2px; }
  html .int-root .int-mode { min-height: 44px; padding: 0 14px; font-size: 13px; }
  html .int-root .int-right { gap: 6px; flex: 0 0 auto; }
  html .int-root .int-right .int-btn { min-height: 44px; min-width: 44px; }
  html .int-root .int-right .int-btn span { display: none; }
  html .int-root .int-right .int-btn.int-pri { width: 44px; padding: 0; }
  html .int-root .int-stat { padding: 3px 10px; } html .int-root .int-stat b { font-size: 14px; } html .int-root .int-stat .int-cbar { display: none; } html .int-root .int-stat small { font-size: 10px; margin-top: 0; }
  html .int-root .int-cam { top: calc(62px + var(--sp-h, 0px) + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: repeat(3, 44px); gap: 2px; padding: 4px; border-radius: 18px; background: var(--i-glass); -webkit-backdrop-filter: var(--i-blur); backdrop-filter: var(--i-blur); border: 1px solid rgba(255, 255, 255, .65); box-shadow: var(--i-sh2); bottom: auto; flex-direction: row; }
  html .int-root .int-cam .int-grp { display: contents; }
  html .int-root .int-cam .int-btn { width: 44px; height: 44px; min-width: 44px; }
  html .int-hasfl .int-cam, html .int-root.int-live .int-cam, html .int-root.int-pmin .int-cam { top: calc(62px + var(--sp-h, 0px) + env(safe-area-inset-top, 0px)); bottom: auto; }
  html .int-root .int-floors { right: auto; left: calc(8px + env(safe-area-inset-left, 0px)); top: calc(62px + env(safe-area-inset-top, 0px)); bottom: auto; }
  html .int-root .int-help { display: none !important; } /* keyboard hints are noise on a touch screen */
  html .int-root.int-showhelp .int-help { display: block !important; left: calc(8px + env(safe-area-inset-left, 0px)); bottom: 8px; top: auto; }
  html .int-root .int-toast { top: calc(60px + env(safe-area-inset-top, 0px)); }
  html .int-root .int-btn { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  html .int-root .int-panel { top: calc(62px + env(safe-area-inset-top, 0px)); bottom: 8px; left: calc(8px + env(safe-area-inset-left, 0px)); width: min(46vw, 380px); max-height: none; height: auto; }
  html .int-hasfl .int-panel { left: calc(68px + env(safe-area-inset-left, 0px)); }
  html .int-root .int-chip, html .int-root .int-swb { min-height: 44px; }
}

/* map view on a landscape phone: control stacks side by side under the search row so nothing is cut off */
@media (orientation: landscape) and (max-height: 500px) {
  html #mapSide { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; right: calc(8px + env(safe-area-inset-right, 0px)); flex-direction: row; align-items: flex-start; gap: 8px; }
  html #mapSide .mv-stack button { min-width: 44px; min-height: 44px; }
}

/* ======================= LQA mobile pass (44px targets, no clipped text, fight/TV/phone/dominoes) ======================= */
html.nl-phone .side-btns .round, html.nl-phone .side-btns .round.sm { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
html.nl-phone.nl-land .side-btns { width: 94px; }
html.nl-phone.nl-land .hud-tl { right: calc(var(--sr) + 108px); }
/* long prompts / event suggestions wrap instead of being cut with an ellipsis */
html.nl-phone .actbar .pill { height: auto; min-height: 44px; }
html.nl-phone .actbar .pill.suggest, html.nl-phone .actbar .prompt { white-space: normal; line-height: 1.15; padding-top: 5px; padding-bottom: 5px; max-width: 100%; }
html.nl-phone .actbar .prompt #promptText, html.nl-phone .actbar .pill.suggest span { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
/* small decorative controls keep their look but get a 44px hit area */
html.nl-touch .chip, html.nl-touch #dirCard .dc-btn, html.nl-touch #dirCard .dc-pulse { position: relative; }
html.nl-touch .chip::after, html.nl-touch #dirCard .dc-btn::after, html.nl-touch #dirCard .dc-pulse::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
html.nl-touch #dirCard.ph:not(.open) .dc-pill { height: 44px; }
html.nl-touch #dirCard .dp-g { width: 44px; height: 44px; }
html.nl-touch .wf-m::before { content: ""; position: absolute; inset: -6px; }
html.nl-touch .wf-coach .wf-x, html.nl-touch .wf-x { min-height: 44px; min-width: 44px; }
html.nl-touch .wf-x2 { width: 44px; height: 44px; }
/* fight HUD: nothing from the navigation layer on top of the fight panel / buttons */
html.nl-fighting .wf-layer, html.nl-fighting #wfSheet, html.nl-fighting #dirCard { display: none !important; }
html.nl-phone:not(.nl-land) #cbBtns { grid-template-columns: repeat(3, 50px); gap: 6px; right: calc(var(--sr) + 124px); }
html.nl-phone:not(.nl-land) #cbBtns button { width: 50px; height: 50px; }
html.nl-phone:not(.nl-land) #cbBtns button[data-m="bottle"] { width: auto; height: 44px; }
html.nl-touch #cbBtns button[data-m="bottle"] { min-height: 44px; }
html.nl-phone.nl-land #cbBtns { bottom: calc(var(--row) + 8px); right: calc(var(--sr) + 124px); }
html.nl-phone.nl-land #cbPanel { top: var(--st); }
/* phone app close buttons */
@media (max-width: 600px) { html.nl-touch .pd-xm { width: 44px; height: 44px; left: 6px; top: calc(4px + env(safe-area-inset-top, 0px)); } .pd-xm svg { width: 18px; height: 18px; } }
html.nl-touch .pd-x { width: 44px; height: 44px; }
html.nl-touch #dirCard .dp-t { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
html.nl-phone.nl-land.nl-fighting .tabbar { display: none; }
html.nl-phone.nl-land #cbPanel { left: calc(50% + 56px); width: min(300px, calc(100vw - 480px)); }
html:not(.nl-phone) #cbPanel { left: calc(50% + 60px); top: calc(16px + env(safe-area-inset-top, 0px)); }

/* ---------- ONE status pill (index.html #sp): portrait + money + time + needs, expands to the full card; same element in the world and over interiors ---------- */
body.nl-in-int #modal { z-index: 9200; } /* Phone / Bag sheets open ABOVE an interior overlay */
.status.hsp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 238px; min-width: 0; max-width: calc(100vw - 16px); padding: 5px 5px 5px 16px; border-radius: 30px;
  transition: width .32s var(--nl-ease-out, cubic-bezier(.16, 1, .3, 1)), border-radius .3s, box-shadow .3s; }
.hsp .hsp-body { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; cursor: pointer; border-radius: 22px; -webkit-tap-highlight-color: transparent; }
.hsp .st-row { flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 1 1 auto; }
.hsp .st-money { font-size: 17px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsp .st-time { font-size: 11.5px; line-height: 1.2; max-width: 100%; }
.hsp:not(.open) .st-time[data-s] { font-size: 0; }
.hsp:not(.open) .st-time[data-s]::after { content: attr(data-s); font-size: 11.5px; }
.hsp .hsp-dots { display: flex; gap: 3px; align-items: flex-end; height: 22px; flex: 0 0 auto; }
.hsp .hsp-dots i { width: 5px; height: 100%; border-radius: 3px; background: linear-gradient(to top, var(--nl-teal) var(--v, 100%), var(--nl-track) 0); transition: background .3s; }
.hsp .hsp-dots i.low { background: linear-gradient(to top, var(--nl-owed) var(--v, 100%), var(--nl-track) 0); }
.hsp .hsp-bang { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--nl-owed); color: #fff; font: 800 12px/18px var(--nl-font-ui, sans-serif); text-align: center; animation: spPulse 1.6s ease-in-out infinite; }
.hsp .avatar-badge { grid-column: 2; grid-row: 1; flex: 0 0 auto; }
.hsp.low { box-shadow: 0 0 0 2px color-mix(in srgb, var(--nl-owed) 70%, transparent), var(--nl-shadow-2); }
@keyframes spPulse { 50% { opacity: .5; transform: scale(.9); } }
.hsp .hsp-more { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .32s var(--nl-ease-out, cubic-bezier(.16, 1, .3, 1)), opacity .2s, visibility 0s .32s; }
.hsp .hsp-more-in { overflow: hidden; min-height: 0; padding-right: 11px; }
.hsp .hsp-more-in > :first-child { margin-top: 8px; }
.hsp.open { width: 304px; border-radius: 26px; }
.hsp.open .hsp-more { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.hsp .hsp-alert { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--nl-owed); background: var(--nl-owed-soft); border-radius: 999px; padding: 4px 10px; animation: spPulse 1.8s ease-in-out infinite; }
.hsp .hsp-ctl { display: flex; gap: 6px; margin: 9px 0 7px; }
.hsp .hsp-ctl .speed { flex: 1; margin: 0; }
.hsp .speed button { min-height: 44px; min-width: 44px; }
.hsp .hsp-phone { flex: 0 0 44px; width: 44px; min-height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--nl-ink); color: var(--nl-on-dark); }
.hsp .hsp-phone svg { width: 20px; height: 20px; }
.hsp .nl-hp { left: 16px; right: 64px; }
/* the pill over an interior: just under the interior's header, right side; the camera rail drops below it (--sp-h) */
.overlay-root > .hsp { position: fixed; z-index: 9100; right: 14px; top: 84px; }
#hud > .hud-tl { pointer-events: none; }
#hud > .hud-tl > * { pointer-events: auto; }
html.nl-phone .hud-tl { right: auto; width: 0; min-height: 0; }
html.nl-phone.nl-land .hud-tl { min-height: 0; right: auto; }
@media (max-width: 760px) { .overlay-root > .hsp { right: 8px; top: 108px; } .status.hsp.open { width: min(304px, calc(100vw - 16px)); } }
#hud > .hud-tr { z-index: 20; } /* the status pill (and its expanded card) sits above the director card and minimap */
@media (min-width: 761px) and (max-height: 520px) { .overlay-root > .hsp { top: calc(62px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); } }
@media (min-width: 761px) and (max-height: 520px) { .overlay-root > .hsp.open { width: 276px; } }
.overlay-root > .hsp { transition: width .32s var(--nl-ease-out, cubic-bezier(.16, 1, .3, 1)), right .3s, border-radius .3s, box-shadow .3s; }

/* world top area: the pill is top-right; when open it floats ABOVE everything (out of flow; --sp0 keeps the rail's slot) and the director card steps aside on phones */
#hud .hud-tr .hsp.open { position: absolute; top: 0; right: 0; z-index: 30; }
body.sp-open:not(.nl-in-int) #hud .hud-tr::before { content: ""; display: block; height: var(--sp0, 58px); order: -1; }
@media (max-width: 760px) { body.sp-open:not(.nl-in-int) #dirCard { opacity: 0; visibility: hidden; pointer-events: none; } }
/* phone interiors: the open pill takes the camera rail's corner, so the rail steps out of the way until it closes (no overlap, no jump) */
@media (max-width: 760px) { body.sp-open.nl-in-int .int-root .int-cam { opacity: 0; visibility: hidden; pointer-events: none; } .int-root .int-cam { transition: opacity .2s; } }

/* suggestion pill: one tidy line everywhere (two max on phones), left-aligned with the icon, never a tall centred block */
.actbar .pill.suggest { display: inline-flex; align-items: center; gap: 8px; text-align: left; max-width: min(520px, calc(100vw - 32px)); min-width: 0; }
.actbar .pill.suggest > i { flex: 0 0 auto; }
.actbar .pill.suggest .sg-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.nl-phone .actbar .pill.suggest { max-width: calc(100vw - 32px); white-space: normal; }
html.nl-phone .actbar .pill.suggest .sg-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 1.2; }
html.nl-phone.nl-land .actbar .pill.suggest .sg-t { -webkit-line-clamp: 1; }