/* TRTL Mobile / Touch Enhancements (additive overrides) */

:root{
  --trtl-safe-top: env(safe-area-inset-top, 0px);
  --trtl-safe-right: env(safe-area-inset-right, 0px);
  --trtl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --trtl-safe-left: env(safe-area-inset-left, 0px);
}

html, body{
  height: 100%;
  overscroll-behavior: none;
}

body{
  -webkit-text-size-adjust: 100%;
}

/* Universal back button */
.trtl-back-btn{
  position: fixed;
  top: calc(var(--trtl-safe-top) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
}

.trtl-back-btn:active{
  transform: translateX(-50%) scale(0.98);
}

/* Touch-friendly controls */
.trtl-mobile button,
.trtl-mobile .btn,
.trtl-mobile input,
.trtl-mobile select,
.trtl-mobile textarea{
  min-height: 44px;
}

/* Avoid iOS zoom-on-focus */
.trtl-mobile input,
.trtl-mobile select,
.trtl-mobile textarea{
  font-size: 16px !important;
}

/* Canvas and 3D viewports should not scroll */
canvas, #viewport, #game-container, #three-container{
  touch-action: none;
}

/* On-screen touch FPS controls (used by index/music/engine play mode) */
#trtl-touch-ui{
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

#trtl-touch-ui .trtl-joystick{
  position: absolute;
  left: calc(var(--trtl-safe-left) + 8px);
  bottom: calc(var(--trtl-safe-bottom) + 14px);
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: auto;
  touch-action: none;
}

#trtl-touch-ui .trtl-joy-knob{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
}

#trtl-touch-ui .trtl-lookzone{
  position: absolute;
  right: 0;
  top: 0;
  width: 45vw;
  height: 100vh;
  pointer-events: auto;
  touch-action: none;
}

#trtl-touch-ui .trtl-buttons{
  position: absolute;
  right: calc(var(--trtl-safe-right) + 14px);
  bottom: calc(var(--trtl-safe-bottom) + 14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

#trtl-touch-ui .trtl-act-btn{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-weight: 800;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: none;
}

#trtl-touch-ui .trtl-act-btn:active{
  transform: scale(0.98);
}

/* Keep important HUD away from iPhone notch */
.trtl-mobile .hud,
.trtl-mobile #hud,
.trtl-mobile #top-ui{
  padding-top: calc(var(--trtl-safe-top) + 8px);
}

/* Mobile-specific HUD spacing to avoid overlap with location/weather */
.trtl-mobile #tokens-hud.mobile {
  top: calc(var(--trtl-safe-top) + 86px) !important;
  left: 12px !important;
}


/* Smaller minimap and move it above bottom controls (audio/sound sliders) */
.trtl-mobile #minimap {
  width: 160px !important;
  height: 160px !important;
  bottom: calc(var(--trtl-safe-bottom) + 86px) !important;
  right: 12px !important;
  z-index: 30;
}

/* Mobile controls (minimized / touch-friendly) - only when .trtl-mobile is active */
.trtl-mobile #mobile-controls {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

.trtl-mobile #mobile-controls .joystick {
  position: absolute;
  left: calc(var(--trtl-safe-left) + 12px);
  bottom: calc(var(--trtl-safe-bottom) + 12px);
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: auto;
  touch-action: none;
}

.trtl-mobile #mobile-controls .joystick .stick {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18);
}

.trtl-mobile #mobile-controls .look-area {
  position: absolute;
  right: 12px; top: 0; width: 48vw; height: 100vh; pointer-events: auto;
}

/* Quick actions container (above joystick, under chat) */
.trtl-mobile #mobile-quick-actions {
  position: absolute;
  left: 20px;
  bottom: calc(var(--trtl-safe-bottom) + 180px);
  display: flex;
  gap: 6px;
  pointer-events: auto;
  z-index: 11050;
}


/* Ensure house/custom and quick-action buttons sit above the joystick */
.trtl-mobile #mobile-quick-actions button.m-btn,
.trtl-mobile #mobile-quick-actions .m-btn {
  position: relative !important;
  z-index: 11160 !important;
}

/* Keep chat visible above web3 panel */
.trtl-mobile #chat-box {
  z-index: 11200 !important;
}

/* Move FPS counter below the location display on small screens to avoid overlap */
.trtl-mobile #fps-counter {
  top: calc(var(--trtl-safe-top) + 72px) !important;
  right: 12px !important;
  z-index: 11105 !important;
}

/* Tokens bubble should sit below location display on smaller screens */
.trtl-mobile #tokens-hud.mobile { top: calc(var(--trtl-safe-top) + 160px) !important; left: 8px !important; z-index:11102 !important; }

/* Make web3 panel expand upward visually */
.trtl-mobile #web3-panel #web3-panel-expanded { transform-origin: bottom right !important; }

/* Move minimap to top-right on mobile and shrink */
.trtl-mobile #minimap {
  width: 120px !important;
  height: 120px !important;
  top: calc(var(--trtl-safe-top) + 12px) !important;
  right: 20px !important;
  bottom: auto !important;
  z-index: 40;
}


/* Move look pad to bottom-right where map used to be (mobile only) */
.trtl-mobile #mobile-controls .look-area {
  right: 12px;
  bottom: calc(var(--trtl-safe-bottom) + 12px);
  top: auto;
  width: 160px;
  height: 160px;
}

/* Compact web3 panel (mobile only) */
.trtl-mobile #web3-panel { left: auto !important; transform: none !important; right: 12px !important; top: calc(var(--trtl-safe-top) + 12px) !important; }
.trtl-mobile #web3-panel #web3-panel-expanded { width: 180px !important; padding: 8px !important; font-size: 0.82rem !important; }

/* Lower tokens bubble more (mobile only) */
.trtl-mobile #tokens-hud.mobile { top: calc(var(--trtl-safe-top) + 120px) !important; left: 8px !important; }

/* Compact quick emoji area (under chat, above joystick) (mobile only) */
.trtl-mobile #mobile-quick-actions .m-btn { width:48px; height:48px; font-size:16px; line-height:48px; }

/* Mobile action buttons (smaller and compact) */
.trtl-mobile #mobile-controls .m-btn {
  pointer-events: auto;
  width: 56px; height: 56px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.42);
  color: #eaffea; font-size: 18px; line-height:56px; text-align:center;
  margin: 6px;
}

/* Emoji bubble + panel */
.trtl-mobile .emoji-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#003533,#00665a);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.trtl-mobile .mobile-emoji-panel {
  display: none;
  position: fixed !important;
  left: 20px;
  bottom: calc(var(--trtl-safe-bottom) + 72px);
  gap: 8px;
  padding: 8px;
  background: rgba(0,10,8,0.85);
  border-radius: 12px;
  border: 1px solid rgba(0,255,180,0.06);
  z-index: 11150;
  pointer-events: auto;
}

.trtl-mobile .mobile-emoji-panel button.m-btn { width:44px; height:44px; font-size:18px; line-height:44px; }

/* Ensure controls are above legend/minimap */
.trtl-mobile #mobile-controls .joystick { z-index: 11110; }
.trtl-mobile #mobile-controls .look-area { z-index: 11105; }
.trtl-mobile #mobile-controls .stick { z-index: 11111; }
.trtl-mobile #mobile-quick-actions, .trtl-mobile .mobile-emoji-panel, .trtl-mobile .emoji-bubble { z-index: 11150; }

/* Make HUD compact on mobile */
.trtl-mobile .hud.mobile, .trtl-mobile #tokens-hud.mobile {
  font-size: 0.88rem !important;
  padding: 6px !important;
}

.trtl-mobile #tokens-hud.mobile { top: calc(var(--trtl-safe-top) + 72px) !important; left: 8px !important; }

/* Hide mobile debug overlay by default (mobile only) */
.trtl-mobile #mobile-debug-overlay { display:none !important; }

/* When main menu/intro is open, hide mobile HUD so menu receives touches */
.trtl-mobile.trtl-menu-open #mobile-controls,
.trtl-mobile.trtl-menu-open #trtl-touch-ui,
.trtl-mobile.trtl-menu-open #mobile-quick-actions,
.trtl-mobile.trtl-menu-open .mobile-emoji-panel,
.trtl-mobile.trtl-menu-open .emoji-bubble,
.trtl-mobile.trtl-menu-open #mobile-emoji-panel,
.trtl-mobile.trtl-menu-open #mobile-emoji-bubble,
.trtl-mobile.trtl-menu-open #mobile-above-look-actions,
.trtl-mobile.trtl-menu-open #minimap,
.trtl-mobile.trtl-menu-open #web3-panel,
.trtl-mobile.trtl-menu-open #fps-counter,
.trtl-mobile.trtl-menu-open #legend,
.trtl-mobile.trtl-menu-open #chat-box,
.trtl-mobile.trtl-menu-open #chat-toggle,
.trtl-mobile.trtl-menu-open #tokens-hud,
.trtl-mobile.trtl-menu-open #location-display,
.trtl-mobile.trtl-menu-open #building-prompt,
.trtl-mobile.trtl-menu-open #building-info {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Ensure intro/main menu sits above everything on mobile */
.trtl-mobile #intro-screen,
.trtl-mobile #username-screen,
.trtl-mobile .main-menu,
.trtl-mobile .pause-overlay {
  z-index: 20050 !important;
  pointer-events: auto !important;
}

/* Portrait-specific adjustments: cleaner layout that doesn't block the view */
@media (orientation: portrait) and (max-width: 900px) {
  
  /* Location display - top left, single line */
  .trtl-mobile #location-display {
    position: absolute !important;
    top: calc(var(--trtl-safe-top) + 8px) !important;
    left: 8px !important;
    right: auto !important;
    width: auto !important;
    max-width: 50vw !important;
    height: 36px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    transform: none !important;
    z-index: 11122 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Tighter inner text for time/weather to fit the small HUD box */
  .trtl-mobile #location-display .location-row { gap: 8px !important; }
  .trtl-mobile #location-display #time-display,
  .trtl-mobile #location-display #weather-display,
  .trtl-mobile #location-display #time-value,
  .trtl-mobile #location-display #time-period,
  .trtl-mobile #location-display #weather-value {
    font-size: 10px !important;
    max-width: 48vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.95 !important;
  }

  /* Tokens - directly below location */
  .trtl-mobile #tokens-hud.mobile {
    position: absolute !important;
    top: calc(var(--trtl-safe-top) + 48px) !important;
    left: 8px !important;
    z-index: 11118 !important;
    font-size: 0.82rem !important;
    padding: 4px 8px !important;
  }

  /* FPS counter - top right corner */
  .trtl-mobile #fps-counter {
    position: absolute !important;
    top: calc(var(--trtl-safe-top) + 8px) !important;
    right: 8px !important;
    left: auto !important;
    z-index: 11130 !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Web3 panel - below FPS on right side */
  .trtl-mobile #web3-panel {
    position: absolute !important;
    right: 8px !important;
    top: calc(var(--trtl-safe-top) + 40px) !important;
    left: auto !important;
    transform: none !important;
    z-index: 11120 !important;
  }
  
  .trtl-mobile #web3-panel #web3-panel-expanded {
    width: 160px !important;
    padding: 6px !important;
    font-size: 0.78rem !important;
  }

  /* CONTROLS - Move MUCH higher so they're not cut off */
  .trtl-mobile #mobile-controls .joystick {
    left: calc(var(--trtl-safe-left) + 12px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 140px) !important;
    width: 95px !important;
    height: 95px !important;
  }

  .trtl-mobile #mobile-controls .joystick .stick {
    width: 42px !important;
    height: 42px !important;
  }

  .trtl-mobile #mobile-controls .look-area {
    right: 12px !important;
    bottom: calc(var(--trtl-safe-bottom) + 140px) !important;
    top: auto !important;
    width: 115px !important;
    height: 115px !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,0.45) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
  }

  /* Chat + Emoji buttons - centered between controls */
  .trtl-mobile #mobile-quick-actions {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--trtl-safe-bottom) + 146px) !important;
    flex-direction: row !important;
    gap: 10px !important;
    z-index: 11150 !important;
  }

  .trtl-mobile #mobile-quick-actions .m-btn,
  .trtl-mobile .m-btn.emoji-bubble {
    width: 46px !important;
    height: 46px !important;
    font-size: 15px !important;
    line-height: 46px !important;
  }

  /* Chat box - above the buttons, centered */
  .trtl-mobile #chat-box {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--trtl-safe-bottom) + 202px) !important;
    max-width: calc(100vw - 40px) !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Quest button - middle right side */
  .trtl-mobile #quests-fab,
  .trtl-mobile #btn-quests,
  .trtl-mobile button[id*="quest"],
  .trtl-mobile button[class*="quest"] {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    z-index: 11115 !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Hide the large floating quests FAB on mobile; keep quests accessible
     via the emoji panel. If the quests button is moved into
     `#mobile-emoji-panel` it will be shown by the rule below. */
  .trtl-mobile #btn-quests { display: none !important; }
  .trtl-mobile #mobile-emoji-panel #btn-quests { display: inline-flex !important; width:44px !important; height:44px !important; margin:2px !important; }

  /* Volume / legend - below quest button
     NOTE: target only the container `#legend` here. Avoid matching inner
     classes like `.legend-item`/`.legend-text` which contain "legend"
     in their class name and should NOT be absolutely positioned. */
  .trtl-mobile #legend,
  .trtl-mobile [id*="volume"], .trtl-mobile [class*="volume"] {
    position: absolute !important;
    right: 12px !important;
    top: calc(50% + 54px) !important;
    bottom: auto !important;
    z-index: 11112 !important;
    transform: none !important;
    font-size: 12px !important;
  }

.trtl-mobile #legend .legend-text,
.trtl-mobile #legend .legend-item {
  font-size: 11px !important;
}

  /* Mobile emoji panel */
  .trtl-mobile .mobile-emoji-panel {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--trtl-safe-bottom) + 260px) !important;
  }
}

/* Landscape-specific tweaks: compact location and shift HUD to avoid central overlap */
@media (orientation: landscape) and (max-height: 600px) {
  .trtl-mobile #location-display {
    position: absolute !important;
    top: calc(var(--trtl-safe-top) + 8px) !important;
    left: 12px !important;
    height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    z-index: 11122 !important;
  }

  .trtl-mobile #tokens-hud.mobile { top: calc(var(--trtl-safe-top) + 52px) !important; left: 12px !important; }

  /* Nudges for landscape: move quick-actions slightly up and to the left */
  .trtl-mobile #mobile-quick-actions { left: 16px !important; bottom: calc(var(--trtl-safe-bottom) + 100px) !important; }
}

/* Very small phones: keep controls high and compact */
@media (orientation: portrait) and (max-width: 420px) {
  .trtl-mobile #mobile-controls .joystick {
    width: 85px !important;
    height: 85px !important;
    left: calc(var(--trtl-safe-left) + 8px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 130px) !important;
  }
  .trtl-mobile #mobile-controls .joystick .stick {
    width: 38px !important;
    height: 38px !important;
  }

  .trtl-mobile #mobile-controls .look-area {
    width: 105px !important;
    height: 105px !important;
    right: 8px !important;
    bottom: calc(var(--trtl-safe-bottom) + 130px) !important;
    top: auto !important;
  }

  .trtl-mobile #mobile-quick-actions {
    bottom: calc(var(--trtl-safe-bottom) + 136px) !important;
    gap: 8px !important;
  }

  .trtl-mobile #mobile-quick-actions .m-btn,
  .trtl-mobile .mobile-emoji-panel button.m-btn,
  .trtl-mobile .m-btn.emoji-bubble {
    width: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
    line-height: 42px !important;
  }

  .trtl-mobile #web3-panel { 
    width: 150px !important; 
    padding: 5px !important; 
    font-size: 0.80rem !important; 
  }
  .trtl-mobile #web3-panel #web3-panel-expanded { 
    width: 150px !important; 
  }

  .trtl-mobile #chat-box {
    max-width: calc(100vw - 30px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 190px) !important;
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  .trtl-mobile #location-display {
    height: 32px !important;
    font-size: 10px !important;
    padding: 4px 6px !important;
  }

  .trtl-mobile #tokens-hud.mobile { 
    top: calc(var(--trtl-safe-top) + 44px) !important; 
    font-size: 0.78rem !important;
    padding: 3px 6px !important;
  }

  .trtl-mobile #minimap { 
    width: 90px !important; 
    height: 90px !important; 
    right: 8px !important; 
    top: calc(var(--trtl-safe-top) + 8px) !important; 
  }
  
  .trtl-mobile #quests-fab,
  .trtl-mobile #btn-quests,
  .trtl-mobile button[id*="quest"],
  .trtl-mobile button[class*="quest"] {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Compact 2x2 action grid above look pad (H, TP, Run, E) */
.trtl-mobile #mobile-above-look-actions {
  position: fixed !important;
  right: 12px !important;
  bottom: calc(var(--trtl-safe-bottom) + 190px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  pointer-events: auto !important;
  z-index: 11170 !important;
  width: calc(clamp(44px, 12vw, 56px) * 2 + 8px) !important;
}
.trtl-mobile #mobile-above-look-actions .m-btn {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  width: clamp(44px, 12vw, 56px) !important;
  height: clamp(44px, 12vw, 56px) !important;
  font-size: clamp(13px, 3.4vw, 15px) !important;
  line-height: clamp(44px, 12vw, 56px) !important;
  border-radius: 10px !important;
  padding: 0 !important;
}
.trtl-mobile #btn-sprint.is-on {
  box-shadow: 0 0 0 2px rgba(0,255,0,0.35) inset !important;
}

/* Make Web3 panel and sewer/chat buttons less bulky on mobile */
.trtl-mobile #web3-toggle,
.trtl-mobile #web3-panel button,
.trtl-mobile #web3-panel .chain-select-btn {
  padding: 8px 10px !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
}
.trtl-mobile #web3-panel #web3-panel-expanded { box-shadow: none !important; }

.trtl-mobile #chat-toggle,
.trtl-mobile #chat-close,
.trtl-mobile #chat-send {
  padding: 8px 10px !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
}

/* Ensure the compact web3/chat sizing applies in small portrait too */
@media (orientation: portrait) and (max-width: 420px) {
  .trtl-mobile #web3-toggle { padding: 6px 8px !important; font-size: 0.9rem !important; }
  .trtl-mobile #chat-toggle, .trtl-mobile #chat-close { padding: 6px 8px !important; font-size: 0.9rem !important; }
  .trtl-mobile #mobile-above-look-actions .m-btn { width: 44px !important; height: 44px !important; font-size: 14px !important; line-height:44px !important; }
}


/* -------------------------------
   Hide mobile HUD over intro/username splash screens
-------------------------------- */
body.trtl-splash-open #chat-box,
body.trtl-splash-open #mobile-controls,
body.trtl-splash-open #trtl-touch-ui,
body.trtl-splash-open #mobile-quick-actions,
body.trtl-splash-open #mobile-emoji-panel,
body.trtl-splash-open #mobile-emoji-bubble,
body.trtl-splash-open #mobile-above-look-actions{
  display: none !important;
}

/* Final micro-adjustment: keep chat a bit lower on mobile only. */
.trtl-mobile #chat-box {
  transform: translateY(10px) !important;
}

/* ═══════════════════════════════════════════════════════
   WEB3 PANEL — MOBILE OVERRIDES
═══════════════════════════════════════════════════════ */

/* Reposition web3 panel on small screens */
@media (max-width: 600px) {
  #web3-panel {
    right: 8px !important;
    bottom: calc(var(--trtl-safe-bottom) + 10px) !important;
  }
  #web3-panel-expanded {
    width: min(240px, calc(100vw - 24px)) !important;
    right: 0 !important;
    font-size: 0.8rem !important;
    padding: 10px !important;
  }
  #web3-toggle {
    font-size: 0.75rem !important;
    padding: 8px 10px !important;
  }
}

/* Final safety overrides: keep interaction clusters away from both sticks. */
.trtl-mobile #mobile-controls .joystick {
  bottom: calc(var(--trtl-safe-bottom) + 120px) !important;
}

.trtl-mobile #mobile-controls .look-area {
  bottom: calc(var(--trtl-safe-bottom) + 120px) !important;
}

.trtl-mobile #mobile-quick-actions {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--trtl-safe-bottom) + 248px) !important;
  z-index: 11165 !important;
}

.trtl-mobile #mobile-above-look-actions {
  right: 12px !important;
  bottom: calc(var(--trtl-safe-bottom) + 272px) !important;
  z-index: 11170 !important;
}

.trtl-mobile #chat-box {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--trtl-safe-bottom) + 320px) !important;
  z-index: 11172 !important;
  max-width: calc(100vw - 28px) !important;
}

/* When mobile controls are visible, push web3 panel up */
.trtl-mobile #web3-panel {
  bottom: calc(var(--trtl-safe-bottom) + 160px) !important;
  right: 8px !important;
}

/* Ensure web3 panel-expanded opens upward and doesn't overflow viewport */
#web3-panel-expanded {
  max-height: min(420px, 70vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Touch-friendly chain buttons */
.w3chain-btn {
  min-height: 36px !important;
  touch-action: manipulation;
}

/* Wallet badge wrapping on narrow screens */
.trtl-mobile #web3-wallet-badge {
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   GENERAL MOBILE TOUCH IMPROVEMENTS
═══════════════════════════════════════════════════════ */

/* Minimum tap targets */
button, [role="button"], .btn, .tab, input[type=button], input[type=submit] {
  touch-action: manipulation;
}

/* Prevent double-tap zoom on buttons */
button {
  touch-action: manipulation;
}

/* Fix iOS rubber-band scroll on fixed elements */
#pause-menu, #options-menu, #teleport-menu {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* CRITICAL: Ensure menus appear ABOVE all mobile HUD elements (z-index 11xxx) */
.trtl-mobile #pause-menu {
  z-index: 21000 !important;
}
.trtl-mobile #options-menu {
  z-index: 21500 !important;
}
.trtl-mobile #teleport-menu {
  z-index: 21200 !important;
}

/* Hide ALL mobile controls when pause/options/teleport menus are open */
.trtl-mobile #pause-menu[style*="display: flex"] ~ #mobile-controls,
.trtl-mobile #pause-menu[style*="display:flex"] ~ #mobile-controls,
.trtl-mobile #options-menu[style*="display: flex"] ~ #mobile-controls,
.trtl-mobile #options-menu[style*="display:flex"] ~ #mobile-controls,
.trtl-mobile #teleport-menu[style*="display: flex"] ~ #mobile-controls,
.trtl-mobile #teleport-menu[style*="display:flex"] ~ #mobile-controls {
  display: none !important;
  pointer-events: none !important;
}

/* Better scrollable panels on mobile */
#legend-content, #teleport-list, .lb-list, .qp-list, #chat-messages {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Responsive teleport menu */
@media (max-width: 600px) {
  #teleport-menu {
    max-width: calc(100vw - 20px) !important;
    max-height: 75vh !important;
    padding: 16px 12px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Responsive pause / options / bug-report menus */
@media (max-width: 600px) {
  /* ---- Pause menu ---- */
  #pause-menu > div {
    min-width: unset !important;
    width: calc(100vw - 32px) !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  /* Shrink PAUSED title */
  #pause-menu > div > div:first-child {
    font-size: 28px !important;
    margin-bottom: 4px !important;
  }
  /* Username label */
  #pause-username-label {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  /* Button row: 2-column grid for neat layout */
  #pause-menu > div > div[style*="flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #pause-menu button {
    font-size: 15px !important;
    padding: 10px 6px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }
  /* ESC hint line */
  #pause-menu > div > div:last-of-type {
    font-size: 12px !important;
    margin-top: 10px !important;
  }

  /* ---- Options menu ---- */
  #options-menu > div {
    min-width: unset !important;
    width: calc(100vw - 32px) !important;
    padding: 16px !important;
    max-height: 85vh;
    overflow-y: auto;
    box-sizing: border-box !important;
  }
  #options-menu > div > div:first-child {
    font-size: 22px !important;
  }
  #options-menu > div > div > div[style*="flex:1"],
  #options-menu > div > div > div[style*="flex: 1"] {
    min-width: calc(50% - 4px) !important;
    flex: 0 0 calc(50% - 4px) !important;
    box-sizing: border-box !important;
  }
  .binding-btn {
    font-size: 0.82rem !important;
    padding: 6px 4px !important;
    min-height: 38px !important;
    width: 100% !important;
  }
  #options-reset-btn, #options-cancel-btn, #options-save-btn {
    font-size: 0.85rem !important;
    padding: 8px 8px !important;
    min-height: 40px !important;
  }

  /* ---- Bug report modal ---- */
  #trtl-bug-modal > div {
    width: calc(100vw - 24px) !important;
    max-height: 88vh !important;
    padding: 14px !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  #trtl-bug-subject, #trtl-bug-desc {
    font-size: 0.9rem !important;
  }
  #trtl-bug-desc {
    height: 100px !important;
  }
  #trtl-bug-send, #trtl-bug-copy, #trtl-bug-download {
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
    flex: 1 1 auto !important;
  }
  #trtl-bug-attach {
    font-size: 0.8rem !important;
    width: 100% !important;
  }
}

/* Responsive minimap label */
@media (max-width: 400px) {
  #minimap { width: 80px !important; height: 80px !important; }
  #minimap-canvas { width: 80px !important; height: 80px !important; }
}

/* Responsive HUD font for landscape orientation on short screens */
@media (max-height: 500px) {
  #location-display { font-size: 0.85rem !important; padding: 6px 10px !important; }
  #instructions { font-size: 0.7rem !important; }
}

/* Prevent font inflation on iOS */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Stable phone gameplay layout */
@media (max-width: 900px) {
  .trtl-mobile #instructions {
    display: none !important;
  }

  .trtl-mobile #location-display {
    max-width: calc(100vw - 132px) !important;
  }

  .trtl-mobile #tokens-hud.mobile {
    top: calc(var(--trtl-safe-top) + 44px) !important;
    left: 8px !important;
  }

  .trtl-mobile #fps-counter {
    top: calc(var(--trtl-safe-top) + 8px) !important;
    right: 8px !important;
  }

  .trtl-mobile #web3-panel {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 48px) !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .trtl-mobile #web3-panel #web3-panel-expanded {
    max-height: 42vh !important;
  }

  .trtl-mobile #minimap {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 104px) !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: 88px !important;
    height: 88px !important;
  }

  .trtl-mobile #legend {
    right: 8px !important;
    top: auto !important;
    bottom: calc(var(--trtl-safe-bottom) + 164px) !important;
    transform: scale(0.82) !important;
    transform-origin: bottom right !important;
    z-index: 11112 !important;
  }

  .trtl-mobile #legend.expanded {
    width: min(240px, calc(100vw - 24px)) !important;
    height: min(46vh, 320px) !important;
  }

  .trtl-mobile #mobile-controls {
    position: fixed !important;
    inset: 0 !important;
    z-index: 11100 !important;
    pointer-events: none !important;
  }

  .trtl-mobile #mobile-controls .joystick {
    position: fixed !important;
    left: calc(var(--trtl-safe-left) + 12px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 14px) !important;
    width: clamp(88px, 24vw, 104px) !important;
    height: clamp(88px, 24vw, 104px) !important;
  }

  .trtl-mobile #mobile-controls .joystick .stick {
    width: clamp(40px, 11vw, 46px) !important;
    height: clamp(40px, 11vw, 46px) !important;
  }

  .trtl-mobile #mobile-controls .look-area {
    position: fixed !important;
    top: auto !important;
    right: calc(var(--trtl-safe-right) + 12px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 14px) !important;
    width: clamp(104px, 29vw, 136px) !important;
    height: clamp(104px, 29vw, 136px) !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,0.45) !important;
  }

  .trtl-mobile #mobile-controls .look-area .look-hint {
    display: none !important;
  }

  .trtl-mobile #mobile-controls .m-btn,
  .trtl-mobile #mobile-quick-actions .m-btn,
  .trtl-mobile #mobile-above-look-actions .m-btn,
  .trtl-mobile .mobile-emoji-panel .m-btn,
  .trtl-mobile .emoji-bubble {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(0,0,0,0.56) !important;
    color: #eaffea !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35) !important;
    pointer-events: auto !important;
  }

  .trtl-mobile #mobile-quick-actions .m-btn,
  .trtl-mobile #mobile-above-look-actions .m-btn,
  .trtl-mobile .mobile-emoji-panel .m-btn,
  .trtl-mobile .emoji-bubble {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .trtl-mobile #mobile-quick-actions {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(var(--trtl-safe-bottom) + 92px) !important;
    width: auto !important;
    max-width: calc(100vw - 152px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transform: translateX(-50%) !important;
    z-index: 11150 !important;
    pointer-events: auto !important;
  }

  .trtl-mobile .mobile-emoji-panel {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(var(--trtl-safe-bottom) + 146px) !important;
    transform: translateX(-50%) !important;
    z-index: 11155 !important;
  }

  .trtl-mobile #mobile-above-look-actions {
    position: fixed !important;
    right: calc(var(--trtl-safe-right) + 12px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 124px) !important;
    width: 104px !important;
    max-width: 104px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 48px !important;
    gap: 8px !important;
    align-items: start !important;
    justify-items: stretch !important;
    z-index: 11170 !important;
  }

  .trtl-mobile #building-prompt {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(var(--trtl-safe-bottom) + 182px) !important;
    transform: translateX(-50%) !important;
    width: min(300px, calc(100vw - 24px)) !important;
    padding: 10px 14px !important;
    font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
    line-height: 1.2 !important;
    border-width: 2px !important;
    border-radius: 14px !important;
    white-space: normal !important;
    z-index: 11145 !important;
    touch-action: manipulation !important;
  }

  .trtl-mobile #building-info {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(var(--trtl-safe-bottom) + 242px) !important;
    transform: translateX(-50%) !important;
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 26vh !important;
    padding: 14px 16px !important;
    border-width: 2px !important;
    border-radius: 16px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: none !important;
    z-index: 11140 !important;
  }

  .trtl-mobile #building-info h2 {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
    margin-bottom: 6px !important;
  }

  .trtl-mobile #building-info p {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
    line-height: 1.3 !important;
  }

  .trtl-mobile #chat-box {
    position: fixed !important;
    left: 12px !important;
    bottom: calc(var(--trtl-safe-bottom) + 86px) !important;
    width: min(280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    z-index: 11125 !important;
    overflow: hidden !important;
  }

  .trtl-mobile #chat-container {
    max-height: min(40vh, 320px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .trtl-mobile #chat-messages {
    height: min(24vh, 180px) !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  .trtl-mobile #chat-input-container {
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .trtl-mobile #chat-input {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .trtl-mobile #chat-send {
    flex: 0 0 auto !important;
  }

  .trtl-mobile #exit-button,
  .trtl-mobile #sewer-return-button {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
    border-width: 2px !important;
    transform: translateX(-50%) !important;
    z-index: 11160 !important;
  }

  .trtl-mobile #exit-button {
    top: calc(var(--trtl-safe-top) + 12px) !important;
  }

  .trtl-mobile #sewer-return-button {
    top: calc(var(--trtl-safe-top) + 64px) !important;
  }
}

/* Final phone HUD pass: keep the right-side stack out of the controls area */
@media (max-width: 900px) {
  .trtl-mobile #quests-fab,
  .trtl-mobile #quick-place-house {
    display: none !important;
  }

  .trtl-mobile #location-display {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 8px) !important;
    left: 8px !important;
    max-width: calc(100vw - 126px) !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    font-size: clamp(0.95rem, 3vw, 1.1rem) !important;
    z-index: 11124 !important;
  }

  .trtl-mobile #location-display .location-row {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .trtl-mobile #time-display,
  .trtl-mobile #weather-display,
  .trtl-mobile #time-value,
  .trtl-mobile #time-period,
  .trtl-mobile #weather-value {
    font-size: inherit !important;
    line-height: 1.1 !important;
  }

  .trtl-mobile #tokens-hud.mobile {
    top: calc(var(--trtl-safe-top) + 64px) !important;
    left: 8px !important;
    padding: 6px 10px !important;
    font-size: 0.84rem !important;
  }

  .trtl-mobile #fps-counter {
    padding: 8px 10px !important;
    font-size: 0.95rem !important;
    max-width: 120px !important;
    text-align: left !important;
  }

  .trtl-mobile #web3-toggle {
    min-height: 42px !important;
    min-width: 116px !important;
    max-width: min(150px, calc(100vw - 24px)) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    line-height: 1.05 !important;
  }

  .trtl-mobile #web3-toggle-title {
    display: block !important;
    width: 100% !important;
    font-size: 0.74rem !important;
  }

  .trtl-mobile #web3-toggle-meta {
    display: block !important;
    width: 100% !important;
    font-size: 0.56rem !important;
    line-height: 1.05 !important;
  }

  .trtl-mobile #legend {
    width: min(178px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .trtl-mobile #legend.collapsed {
    height: 48px !important;
  }

  .trtl-mobile #legend.expanded {
    width: min(300px, calc(100vw - 24px)) !important;
    height: min(44vh, 300px) !important;
  }

  .trtl-mobile #legend-header {
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .trtl-mobile #legend-content {
    padding: 12px !important;
    font-size: 0.95rem !important;
  }

  .trtl-mobile #trtl-amb-audio .wrap {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .trtl-mobile #trtl-amb-audio .vol {
    width: min(120px, 34vw) !important;
  }

  .trtl-mobile #trtl-amb-audio .hint {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-width: 900px), (orientation: landscape) and (max-height: 600px) {
  .trtl-mobile #location-display {
    max-width: calc(100vw - 300px) !important;
    padding: 8px 12px !important;
    font-size: 0.92rem !important;
  }

  .trtl-mobile #tokens-hud.mobile {
    top: calc(var(--trtl-safe-top) + 52px) !important;
  }

  .trtl-mobile #legend {
    width: min(168px, 30vw) !important;
  }

  .trtl-mobile #legend.expanded {
    width: min(248px, 38vw) !important;
    height: min(48vh, 238px) !important;
  }

  .trtl-mobile #chat-box {
    width: min(220px, 28vw) !important;
    bottom: calc(var(--trtl-safe-bottom) + 74px) !important;
  }

  .trtl-mobile #building-prompt {
    width: min(250px, 36vw) !important;
    bottom: calc(var(--trtl-safe-bottom) + 116px) !important;
  }

  .trtl-mobile #building-info {
    width: min(280px, 42vw) !important;
    bottom: calc(var(--trtl-safe-bottom) + 170px) !important;
  }

  .trtl-mobile #trtl-amb-audio .vol {
    width: min(96px, 16vw) !important;
  }
}

/* Final mobile HUD lock: keep the right dock simple and out of the look controls */
@media (max-width: 900px) {
  .trtl-mobile #trtl-amb-audio {
    display: none !important;
  }

  .trtl-mobile #web3-toggle {
    min-width: 104px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
  }

  .trtl-mobile #minimap {
    top: calc(var(--trtl-safe-top) + 96px) !important;
    right: 12px !important;
    width: 88px !important;
    height: 88px !important;
  }

  .trtl-mobile #legend {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 192px) !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: hidden !important;
    z-index: 11116 !important;
  }

  .trtl-mobile #legend.collapsed {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
  }

  .trtl-mobile #legend.collapsed #legend-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .trtl-mobile #legend.collapsed #legend-header span:first-child {
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
  }

  .trtl-mobile #legend.collapsed #legend-toggle {
    display: none !important;
  }

  .trtl-mobile #legend.expanded {
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: calc(var(--trtl-safe-bottom) + 108px) !important;
    transform: translateX(-50%) !important;
    width: min(320px, calc(100vw - 24px)) !important;
    height: min(46vh, 320px) !important;
  }

  .trtl-mobile #legend.expanded #legend-header {
    justify-content: space-between !important;
    padding: 10px 12px !important;
  }

  .trtl-mobile #legend.expanded #legend-toggle {
    display: inline-flex !important;
  }

  .trtl-mobile #mobile-above-look-actions {
    width: auto !important;
    max-width: none !important;
    grid-template-columns: repeat(2, 48px) !important;
  }
}

@media (orientation: landscape) and (max-width: 900px), (orientation: landscape) and (max-height: 600px) {
  .trtl-mobile #web3-toggle {
    min-width: 96px !important;
    font-size: 0.84rem !important;
  }

  .trtl-mobile #minimap {
    top: calc(var(--trtl-safe-top) + 92px) !important;
    width: 76px !important;
    height: 76px !important;
  }

  .trtl-mobile #legend {
    top: calc(var(--trtl-safe-top) + 176px) !important;
  }

  .trtl-mobile #legend.expanded {
    bottom: calc(var(--trtl-safe-bottom) + 72px) !important;
    width: min(300px, calc(100vw - 32px)) !important;
    height: min(58vh, 250px) !important;
  }
}

/* Final mobile cleanup pass after HUD regression reports */
@media (max-width: 900px) {
  .trtl-mobile #btn-pause {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 8px) !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 11260 !important;
  }

  .trtl-mobile #fps-counter {
    top: calc(var(--trtl-safe-top) + 8px) !important;
    right: 62px !important;
    max-width: 110px !important;
    z-index: 11230 !important;
    transform: none !important;
  }

  .trtl-mobile #web3-panel {
    top: calc(var(--trtl-safe-top) + 54px) !important;
    right: 8px !important;
    z-index: 11200 !important;
  }

  .trtl-mobile #minimap {
    top: calc(var(--trtl-safe-top) + 104px) !important;
    right: 8px !important;
    width: 84px !important;
    height: 84px !important;
    z-index: 11190 !important;
  }

  .trtl-mobile #legend {
    top: calc(var(--trtl-safe-top) + 196px) !important;
    right: 8px !important;
    z-index: 11220 !important;
  }

  .trtl-mobile #legend.expanded {
    bottom: calc(var(--trtl-safe-bottom) + 156px) !important;
    z-index: 11280 !important;
    pointer-events: auto !important;
  }

  .trtl-mobile #mobile-controls .look-area {
    right: calc(var(--trtl-safe-right) + 10px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 12px) !important;
    width: clamp(96px, 25vw, 118px) !important;
    height: clamp(96px, 25vw, 118px) !important;
    z-index: 11100 !important;
  }

  .trtl-mobile #mobile-above-look-actions {
    right: calc(var(--trtl-safe-right) + 10px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 134px) !important;
    z-index: 11240 !important;
  }

  .trtl-mobile #chat-box {
    left: 12px !important;
    bottom: calc(var(--trtl-safe-bottom) + 86px) !important;
    width: min(180px, 44vw) !important;
    z-index: 11120 !important;
  }
}

@media (orientation: landscape) and (max-width: 900px), (orientation: landscape) and (max-height: 600px) {
  .trtl-mobile #fps-counter {
    right: 58px !important;
    max-width: 104px !important;
    font-size: 0.88rem !important;
  }

  .trtl-mobile #web3-panel {
    top: calc(var(--trtl-safe-top) + 48px) !important;
  }

  .trtl-mobile #minimap {
    top: calc(var(--trtl-safe-top) + 92px) !important;
    width: 76px !important;
    height: 76px !important;
  }

  .trtl-mobile #legend {
    top: calc(var(--trtl-safe-top) + 174px) !important;
  }

  .trtl-mobile #legend.expanded {
    bottom: calc(var(--trtl-safe-bottom) + 118px) !important;
    width: min(280px, calc(100vw - 28px)) !important;
    height: min(54vh, 240px) !important;
  }

  .trtl-mobile #chat-box {
    width: min(170px, 26vw) !important;
  }
}

/* Final portrait phone pass: keep quick actions and chat clear of each other */
@media (max-width: 900px) and (orientation: portrait) {
  .trtl-mobile #location-display {
    max-width: calc(100vw - 140px) !important;
  }

  .trtl-mobile #tokens-hud.mobile {
    top: calc(var(--trtl-safe-top) + 56px) !important;
    max-width: calc(100vw - 152px) !important;
  }

  .trtl-mobile #fps-counter {
    max-width: 96px !important;
  }

  .trtl-mobile #web3-toggle {
    min-width: 96px !important;
    max-width: 112px !important;
  }

  .trtl-mobile #mobile-quick-actions {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--trtl-safe-bottom) + 128px) !important;
    transform: translateX(-50%) !important;
    width: min(228px, calc(100vw - 124px)) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 11250 !important;
  }

  .trtl-mobile #mobile-quick-actions .m-btn,
  .trtl-mobile #mobile-emoji-bubble,
  .trtl-mobile .mobile-emoji-panel .m-btn {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 0 !important;
  }

  .trtl-mobile .mobile-emoji-panel {
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--trtl-safe-bottom) + 188px) !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 24px) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .trtl-mobile #chat-box {
    left: 12px !important;
    bottom: calc(var(--trtl-safe-bottom) + 244px) !important;
    width: min(220px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .trtl-mobile #building-prompt {
    bottom: calc(var(--trtl-safe-bottom) + 176px) !important;
    width: min(260px, calc(100vw - 24px)) !important;
  }

  .trtl-mobile #building-info {
    bottom: calc(var(--trtl-safe-bottom) + 226px) !important;
    width: min(300px, calc(100vw - 24px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE LAYOUT FINAL — single source of truth for
   portrait/landscape HUD positioning.
   JS inline-styles are overridden with !important here.
═══════════════════════════════════════════════════════ */

/* === PORTRAIT === */
@media (max-width: 900px) and (orientation: portrait) {
  /* Location box — scrollable so all info is reachable */
  .trtl-mobile #location-display {
    max-height: 62px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .trtl-mobile #location-display::-webkit-scrollbar { display: none !important; }

  /* Chat container — left-aligned, below $TRTL tokens badge */
  .trtl-mobile #chat-box {
    position: fixed !important;
    left: 8px !important;
    transform: none !important;
    bottom: auto !important;
    top: calc(var(--trtl-safe-top) + 82px) !important;
    width: min(320px, calc(100vw - 24px)) !important;
    z-index: 11300 !important;
  }

  /* Hamburger — top-right corner */
  .trtl-mobile #btn-pause {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 8px) !important;
    right: 8px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 11260 !important;
  }

  /* FPS counter — sits LEFT of hamburger, never overlaps */
  .trtl-mobile #fps-counter {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 8px) !important;
    right: 58px !important; /* 44px btn + 6px gap + 8px edge */
    left: auto !important;
    max-width: 90px !important;
    padding: 6px 8px !important;
    font-size: 0.82rem !important;
    z-index: 11230 !important;
    transform: none !important;
  }

  /* Web3 toggle — below FPS, same right edge */
  .trtl-mobile #web3-panel {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 58px) !important;
    right: 8px !important;
    left: auto !important;
    z-index: 11200 !important;
  }

  .trtl-mobile #web3-toggle {
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: 0.68rem !important;
  }

  /* Minimap — below Web3 */
  .trtl-mobile #minimap {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 100px) !important;
    right: 8px !important;
    width: 80px !important;
    height: 80px !important;
    z-index: 11190 !important;
  }

  /* Look pad — bottom-right, clear corner — bigger for easier reach */
  .trtl-mobile #mobile-controls .look-area {
    position: fixed !important;
    right: calc(var(--trtl-safe-right) + 8px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 10px) !important;
    top: auto !important;
    width: 128px !important;
    height: 128px !important;
    z-index: 11100 !important;
    background: rgba(0,20,10,0.22) !important;
    border: 1px solid rgba(0,255,100,0.15) !important;
    border-radius: 16px !important;
  }

  /* Joystick — bottom-left, bigger for easier reach */
  .trtl-mobile #mobile-controls .joystick {
    position: fixed !important;
    left: calc(var(--trtl-safe-left) + 12px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 12px) !important;
    width: 120px !important;
    height: 120px !important;
  }

  .trtl-mobile #mobile-controls .joystick .stick {
    width: 52px !important;
    height: 52px !important;
  }

  /* Run/E/Jump — LEFT side, stacked above emoji (no conflict with right-side minimap/MAP) */
  .trtl-mobile #mobile-above-look-actions {
    position: fixed !important;
    right: auto !important;
    left: calc(var(--trtl-safe-left) + 12px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 228px) !important;
    width: 110px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    z-index: 11240 !important;
  }

  .trtl-mobile #mobile-above-look-actions .m-btn {
    width: 50px !important;
    height: 50px !important;
    font-size: 13px !important;
  }

  /* Quick actions (emoji bubble row) — centered, raised clear of joystick */
  .trtl-mobile #mobile-quick-actions {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--trtl-safe-bottom) + 160px) !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 248px) !important;
    z-index: 11250 !important;
    flex-direction: row !important;
  }

  /* Emoji panel opens upward from quick-actions */
  .trtl-mobile .mobile-emoji-panel,
  .trtl-mobile #mobile-emoji-panel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--trtl-safe-bottom) + 196px) !important;
    transform: translateX(-50%) !important;
    z-index: 11255 !important;
    max-width: calc(100vw - 140px) !important;
  }
}

/* === LANDSCAPE === */
@media (orientation: landscape) and (max-width: 900px),
       (orientation: landscape) and (max-height: 600px) {
  /* Location display — wider + scrollable so full info is readable */
  .trtl-mobile #location-display {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 6px) !important;
    left: 10px !important;
    max-width: min(380px, 46vw) !important;
    max-height: 52px !important;
    padding: 6px 10px !important;
    font-size: 0.84rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    z-index: 11124 !important;
  }

  .trtl-mobile #location-display::-webkit-scrollbar { display: none !important; }

  .trtl-mobile #location-display .location-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .trtl-mobile #weather-display,
  .trtl-mobile #weather-value {
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.76rem !important;
  }

  /* Hamburger — top-right */
  .trtl-mobile #btn-pause {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 6px) !important;
    right: 6px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 11260 !important;
  }

  /* FPS — left of hamburger */
  .trtl-mobile #fps-counter {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 6px) !important;
    right: 54px !important;
    max-width: 86px !important;
    font-size: 0.76rem !important;
    padding: 5px 7px !important;
    z-index: 11230 !important;
    transform: none !important;
  }

  /* Web3 — smaller, below FPS */
  .trtl-mobile #web3-panel {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 50px) !important;
    right: 6px !important;
    z-index: 11200 !important;
  }

  .trtl-mobile #web3-toggle {
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 26px !important;
    padding: 3px 5px !important;
    font-size: 0.62rem !important;
  }

  /* Minimap — slightly bigger */
  .trtl-mobile #minimap {
    position: fixed !important;
    top: calc(var(--trtl-safe-top) + 80px) !important;
    right: 6px !important;
    width: 82px !important;
    height: 82px !important;
    z-index: 11190 !important;
  }

  /* MAP/legend button — compact */
  .trtl-mobile #legend:not(.expanded) {
    width: 52px !important;
    height: 44px !important;
  }

  /* Look pad — bottom-right */
  .trtl-mobile #mobile-controls .look-area {
    position: fixed !important;
    right: calc(var(--trtl-safe-right) + 8px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 8px) !important;
    top: auto !important;
    width: 96px !important;
    height: 96px !important;
    z-index: 11100 !important;
    background: rgba(0,20,10,0.22) !important;
    border: 1px solid rgba(0,255,100,0.15) !important;
    border-radius: 14px !important;
  }

  /* Run/E/Jump — RIGHT of joystick (left: 108px), same row as quick-actions — no conflict with right-side panels */
  .trtl-mobile #mobile-above-look-actions {
    position: fixed !important;
    right: auto !important;
    left: calc(var(--trtl-safe-left) + 108px) !important;
    bottom: calc(var(--trtl-safe-bottom) + 112px) !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    z-index: 11240 !important;
  }

  .trtl-mobile #mobile-above-look-actions .m-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 12px !important;
  }

  /* Quick actions — LEFT side above joystick */
  .trtl-mobile #mobile-quick-actions {
    position: fixed !important;
    left: calc(var(--trtl-safe-left) + 12px) !important;
    right: auto !important;
    bottom: calc(var(--trtl-safe-bottom) + 112px) !important;
    transform: none !important;
    max-width: 200px !important;
    flex-direction: row !important;
    z-index: 11250 !important;
  }

  /* Emoji panel — opens from LEFT side, NOT center */
  .trtl-mobile .mobile-emoji-panel,
  .trtl-mobile #mobile-emoji-panel {
    position: fixed !important;
    left: calc(var(--trtl-safe-left) + 12px) !important;
    right: auto !important;
    bottom: calc(var(--trtl-safe-bottom) + 158px) !important;
    transform: none !important;
    z-index: 11255 !important;
  }

  /* Tokens — below location, left side */
  .trtl-mobile #tokens-hud.mobile {
    top: calc(var(--trtl-safe-top) + 46px) !important;
    left: 10px !important;
    font-size: 0.76rem !important;
    padding: 4px 7px !important;
  }

  /* Chat — left edge, below tokens so they don't overlap */
  .trtl-mobile #chat-box {
    position: fixed !important;
    left: calc(var(--trtl-safe-left) + 8px) !important;
    top: calc(var(--trtl-safe-top) + 78px) !important;
    bottom: auto !important;
    width: min(210px, 30vw) !important;
    z-index: 11300 !important;
  }

  /* Emoji bubble — slightly smaller */
  .trtl-mobile #mobile-emoji-bubble,
  .trtl-mobile .emoji-bubble {
    width: 42px !important;
    height: 42px !important;
  }

  /* Emoji panel buttons — slightly smaller */
  .trtl-mobile #mobile-emoji-panel .m-btn,
  .trtl-mobile .mobile-emoji-panel .m-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 15px !important;
  }
}

/* Emoji elements: no transition ever (prevents ghost positions on rotation) */
.trtl-mobile #mobile-emoji-bubble,
.trtl-mobile .emoji-bubble,
.trtl-mobile .mobile-emoji-panel,
.trtl-mobile #mobile-emoji-panel {
  transition: none !important;
}

/* ===== Zone-hint: small pill toast on mobile ===== */
.trtl-mobile #zone-hint {
  /* Sit just above the quick-actions row (quick-actions: bottom+160px, row ~44px tall) */
  bottom: calc(var(--trtl-safe-bottom) + 212px) !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Auto width — shrinks to content */
  width: auto !important;
  max-width: min(320px, calc(100vw - 40px)) !important;
  white-space: nowrap !important;
  /* Compact pill */
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  gap: 10px !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Hide verbose desktop-only tips and controls-summary on mobile */
.trtl-mobile #zone-tip-quests,
.trtl-mobile #zone-tip-placehouse,
.trtl-mobile #zone-tip-teleport,
.trtl-mobile #controls-summary {
  display: none !important;
}