/* ============================================================
   FarmBrawl — Mobile Play Mode v3
   Landscape phone/tablet: clean HUD, full canvas, clear controls.
   Specificity: html body.mobile-play beats topbar-farm / sidebar.
   ============================================================ */

/* ── Portrait lock ── */
/* Desactivado temporalmente por usuario */
html body #rotate-hint {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(8, 6, 4, 0.96);
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
html body #rotate-hint.is-visible { display: none !important; }
html body #rotate-hint .rotate-hint-card {
  max-width: 300px;
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #2a1f14, #14100c);
  border: 3px solid #e8b830;
  padding: 20px 16px;
  box-shadow: 0 0 0 2px #0d0a07, 0 16px 40px rgba(0,0,0,.55);
}
html body #rotate-hint .rotate-hint-icon {
  font-size: 38px;
  margin-bottom: 8px;
  animation: fb-rotate-phone 1.5s ease-in-out infinite;
}
@keyframes fb-rotate-phone {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(76deg); }
}
html body #rotate-hint .rotate-hint-title {
  font-family: var(--font-game, monospace);
  font-size: 10px;
  color: #e8b830;
  margin: 0 0 8px;
  line-height: 1.4;
}
html body #rotate-hint .rotate-hint-sub {
  font-size: 13px;
  color: #d4c4a8;
  margin: 0 0 6px;
  line-height: 1.4;
}
html body #rotate-hint .rotate-hint-hint {
  font-size: 11px;
  color: #8a7a62;
  margin: 0;
}
html body #rotate-hint .rotate-hint-btn,
html body #rotate-hint #rotate-hint-dismiss {
  display: none !important;
}

/* Portrait-first: orientation-locked neutralized — game works in both */
html body.orientation-locked #app,
html body.orientation-locked #touch-controls,
html body.orientation-locked #hotbar {
  pointer-events: auto !important;
  filter: none !important;
}
html body.orientation-locked #rotate-hint {
  display: none !important;
}

/* ── Landscape tip (compact toast) ── */
html body #landscape-tip {
  display: none;
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 8600;
  max-width: min(280px, calc(100vw - 170px));
  background: rgba(12, 10, 8, 0.94);
  border: 2px solid #c49a20;
  padding: 4px 6px 4px 10px;
  color: #efe4d0;
  font-size: 10px;
  line-height: 1.2;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
html body #landscape-tip.is-visible { display: flex; }
html body #landscape-tip .landscape-tip-txt {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body #landscape-tip .landscape-tip-txt strong { color: #e8b830; }
html body #landscape-tip .landscape-tip-ok {
  flex-shrink: 0;
  font-family: var(--font-game, monospace);
  font-size: 7px;
  background: #6ab04a;
  color: #fff;
  border: 2px solid #0a0806;
  padding: 5px 7px;
  cursor: pointer;
}
html body.is-portrait #landscape-tip { display: none !important; }

/* ============================================================
   body.mobile-play — full play layout
   ============================================================ */
html body.mobile-play {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  overscroll-behavior: none !important;
  -webkit-text-size-adjust: 100%;
  background: #0a0806 !important;
}

html body.mobile-play #app {
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* Hide non-essential chrome */
html body.mobile-play #live-feed-bar,
html body.mobile-play #status-bar,
html body.mobile-play #mission-bar,
html body.mobile-play #res-hud,
html body.mobile-play #npc-panel,
html body.mobile-play #sidebar-footer,
html body.mobile-play .sidebar-version {
  display: none !important;
}

/* ───────── TOPBAR: 3-column grid, no wrap/overlap ─────────
   Debe ganar a topbar-farm (min-height 52, wrap @1100px, phantom text) */
html body.mobile-play #topbar {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  grid-template-rows: 34px !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 4px !important;
  flex: 0 0 34px !important;
  flex-wrap: nowrap !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-bottom: 2px solid #0a0806 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #241c14, #14100c) !important;
  line-height: 1 !important;
}

html body.mobile-play #topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: unset !important;
  flex-shrink: 0 !important;
  max-width: 24px !important;
  min-width: 0 !important;
  width: 24px !important;
  order: unset !important;
  grid-column: 1;
  overflow: hidden !important;
}
html body.mobile-play #logo {
  display: flex !important;
  align-items: center !important;
  font-size: 0 !important;
  gap: 0 !important;
  max-width: 20px !important;
  overflow: hidden !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
html body.mobile-play #logo .logo-berry {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* Resources: center row only, never wrap under wallet */
html body.mobile-play #topbar-center {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: 28px !important;
  max-height: 28px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  grid-column: 2;
  flex: unset !important;
  order: unset !important;
}
html body.mobile-play #topbar-center::-webkit-scrollbar { display: none !important; }

html body.mobile-play #topbar .hud-card {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: auto !important;
  height: 24px !important;
  max-height: 24px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  border: 2px solid #0a0806 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(40, 30, 20, 0.85), rgba(0, 0, 0, 0.55)) !important;
  box-shadow:
    0 0 0 1px rgba(196, 154, 32, 0.28),
    inset 0 1px 0 rgba(255, 240, 180, 0.08) !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}
html body.mobile-play #topbar .hud-card .hc-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
html body.mobile-play #topbar .hud-card .hc-label { display: none !important; }
html body.mobile-play #topbar .hud-card .hc-value {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #f8f0e0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 #000 !important;
  font-variant-numeric: tabular-nums;
}
html body.mobile-play #topbar .hud-card canvas,
html body.mobile-play #topbar .hud-card .hc-ic-img,
html body.mobile-play #topbar .hud-card svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
html body.mobile-play #topbar .card-usdc {
  border-color: #0a4a3a !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), inset 0 1px 0 rgba(255, 240, 180, 0.06) !important;
}
html body.mobile-play #topbar .card-bc {
  border-color: #3a2a0a !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35), inset 0 1px 0 rgba(255, 240, 180, 0.06) !important;
}
html body.mobile-play #topbar .card-gems {
  border-color: #2a1a4a !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4), inset 0 1px 0 rgba(255, 240, 180, 0.06) !important;
}
html body.mobile-play #topbar .card-agua {
  border-color: #0a2a4a !important;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4), inset 0 1px 0 rgba(255, 240, 180, 0.06) !important;
}
/* tasa hidden and zero-size so layout tests don't false-positive */
html body.mobile-play #topbar .card-tasa {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Deposit = gold square icon only */
html body.mobile-play #topbar .hud-deposit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 24px !important;
  min-height: 0 !important;
  min-width: 26px !important;
  max-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 2px solid #0a0806 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #f5d76e, #c49a20) !important;
  box-shadow: 0 2px 0 #0a0806, inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
html body.mobile-play #topbar .hud-deposit .hd-text {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}
html body.mobile-play #topbar .hud-deposit canvas {
  width: 12px !important;
  height: 12px !important;
}

/* Inicio / Ayuda = compact icon chips next to deposit */
html body.mobile-play #topbar .hud-nav-link,
html body.mobile-play #topbar .game-topbar-inicio {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 24px !important;
  min-height: 0 !important;
  min-width: 26px !important;
  max-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 2px solid #0a0806 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #2a1f14, #1a1410) !important;
  box-shadow: 0 2px 0 #0a0806, inset 0 1px 0 rgba(255, 220, 150, 0.12) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  color: #f0d060 !important;
  -webkit-text-fill-color: #f0d060 !important;
}
html body.mobile-play #topbar .hud-nav-link .hud-nav-label,
html body.mobile-play #topbar .game-topbar-inicio .hud-nav-label {
  display: none !important;
}
html body.mobile-play #topbar .hud-nav-link i,
html body.mobile-play #topbar .game-topbar-inicio i {
  font-size: 10px !important;
}

/* Right: wallet icon + settings only (lang hidden — use settings) */
html body.mobile-play #topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex: unset !important;
  flex-shrink: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
  order: unset !important;
  grid-column: 3;
  justify-content: flex-end !important;
}
html body.mobile-play #lang-select {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}
html body.mobile-play #btn-connect-wallet.phantom-btn,
html body.mobile-play .phantom-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 26px !important;
  min-width: 28px !important;
  min-height: 0 !important;
  max-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 2px solid #0a0806 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #9b87f5, #5b4a9e) !important;
  box-shadow: 0 2px 0 #2a1560, inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
html body.mobile-play #btn-connect-wallet .phantom-btn-text,
html body.mobile-play .phantom-btn .phantom-btn-text {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: absolute !important;
}
html body.mobile-play #btn-connect-wallet .phantom-btn-ic,
html body.mobile-play .phantom-btn-ic {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
html body.mobile-play #btn-settings.icon-btn,
html body.mobile-play #btn-settings {
  width: 28px !important;
  height: 26px !important;
  min-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
  border: 2px solid #0a0806 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #e8dcc8 !important;
  box-shadow: 0 2px 0 #0a0806 !important;
}
/* Account chip: only when not .hidden (connected). Never force display over .hidden */
html body.mobile-play #account-header-chip.hidden {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
html body.mobile-play #account-header-chip:not(.hidden) {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
html body.mobile-play #account-header-chip:not(.hidden) .profile-info { display: none !important; }
html body.mobile-play #account-header-chip:not(.hidden) #account-avatar-img,
html body.mobile-play #account-header-chip:not(.hidden) .profile-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 2px !important;
}
/* Connected: profile chip replaces the connect button (saves topbar space) */
html body.mobile-play:has(#account-header-chip:not(.hidden)) #btn-connect-wallet {
  display: none !important;
}

/* ───────── MAIN + WORLD ───────── */
html body.mobile-play #main {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

/* Sidebar: wide enough to tap + readable icons (not a 34px micro-strip) */
html body.mobile-play #sidebar {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  flex: 0 0 52px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 4px 3px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(180deg, #2a1f14 0%, #16110c 100%) !important;
  border-right: 2px solid #0a0806 !important;
  box-shadow: inset -1px 0 0 rgba(196, 154, 32, 0.25) !important;
  -webkit-overflow-scrolling: touch;
}
html body.mobile-play #sidebar .sb-section-label,
html body.mobile-play #sidebar .tab > span:not(.tab-ic-wrap) {
  display: none !important;
}
html body.mobile-play #sidebar .sb-section {
  margin: 0 0 4px !important;
  padding: 0 !important;
}
html body.mobile-play #sidebar .sb-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
}
html body.mobile-play #sidebar .tab {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  background: rgba(0, 0, 0, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
html body.mobile-play #sidebar .tab:active,
html body.mobile-play #sidebar .tab.is-pressed {
  transform: scale(0.96);
  filter: brightness(1.12);
}
html body.mobile-play #sidebar .tab.active {
  border-color: #e8b830 !important;
  background: linear-gradient(180deg, rgba(232, 184, 48, 0.28), rgba(80, 55, 12, 0.55)) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 240, 180, 0.2) !important;
}
html body.mobile-play #sidebar .tab-ic-wrap {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(196, 154, 32, 0.35) !important;
}
html body.mobile-play #sidebar .tab.active .tab-ic-wrap {
  background: rgba(0, 0, 0, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 48, 0.55) !important;
}
html body.mobile-play #sidebar .tab-ic {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  display: block !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) !important;
}
html body.mobile-play #sidebar .tab-ic-wrap i,
html body.mobile-play #sidebar .tab .fa-solid,
html body.mobile-play #sidebar .tab .fa-crown {
  font-size: 15px !important;
  color: #f0d060 !important;
  line-height: 1 !important;
}
html body.mobile-play #sidebar .tab[data-tab="attack"] .tab-ic-wrap i,
html body.mobile-play #sidebar .tab[data-tab="attack"] .fa-solid {
  color: #ef6a52 !important;
}
html body.mobile-play #sidebar .tab-ic-wrap--vip i {
  color: #f0d060 !important;
  font-size: 14px !important;
}

html body.mobile-play #world {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
html body.mobile-play #canvas-container {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  display: block !important;
}
html body.mobile-play #canvas-container::after {
  border-width: 1px !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.25) !important;
}
html body.mobile-play #game-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
  cursor: default !important;
}

/* Other tabs still scrollable */
html body.mobile-play #main > .panel:not(#world) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   SIDEBAR TAB PANELS — fit phone landscape (no desktop blowout)
   Structure: #world > #tab-views > #content-* > .tab-view
   ============================================================ */

/* Overlay host fills the world canvas area only */
html body.mobile-play #tab-views {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 80 !important;
  box-sizing: border-box !important;
}

/* Content wrappers: don't break absolute tab-view containment */
html body.mobile-play #tab-views [id^="content-"] {
  position: static !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Active panel shell: compact frame inside #tab-views */
html body.mobile-play #tab-views .tab-view {
  position: absolute !important;
  inset: 4px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 10px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  z-index: 90 !important;
  overscroll-behavior: contain !important;
  background:
    linear-gradient(165deg, rgba(30, 24, 16, 0.98) 0%, rgba(12, 10, 8, 0.99) 100%) !important;
  border: 2px solid #0a0806 !important;
  box-shadow:
    0 0 0 2px #c49a20,
    0 12px 36px rgba(0, 0, 0, 0.6) !important;
}

/* Home overlay is empty — never block the world */
html body.mobile-play #tab-views .tab-view#view-home {
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  inset: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Shared panel chrome density */
html body.mobile-play #tab-views .panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  margin: 0 0 8px !important;
  padding: 0 0 6px !important;
  border-bottom: 1px solid rgba(232, 184, 48, 0.28) !important;
}
html body.mobile-play #tab-views .panel-head h2 {
  font-size: 11px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  gap: 6px !important;
}
html body.mobile-play #tab-views .panel-head .ph-ic {
  width: 14px !important;
  height: 14px !important;
}
html body.mobile-play #tab-views .muted {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
}
html body.mobile-play #tab-views .pixel-btn,
html body.mobile-play #tab-views button.pixel-btn {
  min-height: 36px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
}
html body.mobile-play #tab-views .stat-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
html body.mobile-play #tab-views .stat-card {
  padding: 6px 8px !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html body.mobile-play #tab-views .stat-val {
  font-size: 13px !important;
}
html body.mobile-play #tab-views .stat-label {
  font-size: 8px !important;
}
html body.mobile-play #tab-views .stat-ic {
  width: 26px !important;
  height: 26px !important;
  font-size: 12px !important;
}

/* Hide game chrome that fights panels (full hide — not dim) */
html body.mobile-play.panel-open #touch-controls,
html body.mobile-play.shop-open #touch-controls,
html body.mobile-play.panel-open #hotbar,
html body.mobile-play.shop-open #hotbar,
html body.mobile-play.panel-open #minimap-panel,
html body.mobile-play.shop-open #minimap-panel,
html body.mobile-play.panel-open #held-water-chip,
html body.mobile-play.panel-open #held-seed-chip,
html body.mobile-play.panel-open #landscape-tip {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── SHOP (dense catalog: max product rows, min chrome) ── */
html body.mobile-play #view-shop.tab-view {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html body.mobile-play #view-shop .shop-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

/* Title row only — hide long description to free vertical space */
html body.mobile-play #view-shop .shop-hero {
  flex-shrink: 0 !important;
  padding: 4px 10px !important;
  gap: 6px !important;
  align-items: center !important;
  min-height: 0 !important;
}
html body.mobile-play #view-shop .shop-hero-left {
  align-items: center !important;
  gap: 6px !important;
}
html body.mobile-play #view-shop .shop-hero-mark {
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
}
html body.mobile-play #view-shop .shop-hero-mark img {
  width: 14px !important;
  height: 14px !important;
}
html body.mobile-play #view-shop .shop-hero-copy h2 {
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
html body.mobile-play #view-shop .shop-hero-copy p {
  display: none !important;
}

/* VIP offer banner removed from shop markup; keep hidden if reintroduced */
html body.mobile-play #view-shop .shop-vip-cta,
#view-shop .shop-vip-cta {
  display: none !important;
}

html body.mobile-play #view-shop .shop-filters,
html body.mobile-play #view-shop #shop-filters {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  scroll-padding-inline: 8px !important;
  min-height: 0 !important;
}
html body.mobile-play #view-shop .shop-filters > *,
html body.mobile-play #view-shop #shop-filters > * {
  flex: 0 0 auto !important;
  max-width: none !important;
}
html body.mobile-play #view-shop .si-filter,
html body.mobile-play #view-shop .shop-filter-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  max-width: none !important;
  min-width: max-content !important;
  padding: 4px 8px !important;
  font-size: 9px !important;
  gap: 3px !important;
  min-height: 28px !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
}
html body.mobile-play #view-shop .si-filter i,
html body.mobile-play #view-shop .shop-filter-btn i {
  font-size: 9px !important;
}
html body.mobile-play #view-shop .shop-filters::-webkit-scrollbar,
html body.mobile-play #view-shop #shop-filters::-webkit-scrollbar {
  display: none !important;
}

/* Catalog: take all remaining height */
html body.mobile-play #view-shop .shop-grid,
html body.mobile-play #view-shop #shop-grid,
html body.mobile-play #view-shop .si-grid-host {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 4px 8px 10px !important;
  align-content: start !important;
  grid-template-columns: none !important;
}

/* Section heads compact */
html body.mobile-play #view-shop .si-section {
  gap: 4px !important;
  margin: 0 !important;
}
html body.mobile-play #view-shop .si-section-head {
  padding: 2px 2px 0 !important;
  font-size: 9px !important;
  gap: 4px !important;
  margin: 0 !important;
}
html body.mobile-play #view-shop .si-section-head i {
  font-size: 10px !important;
}
html body.mobile-play #view-shop .si-grid {
  gap: 4px !important;
}

/* Product rows: shorter so more fit on screen */
html body.mobile-play #view-shop .si-card,
html body.mobile-play #view-shop .shop-item-card {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 5px 8px 5px 6px !important;
  gap: 6px 8px !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  border-radius: 6px !important;
}
html body.mobile-play #view-shop .si-art,
html body.mobile-play #view-shop .shop-item-media,
html body.mobile-play #view-shop .shop-item-header {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px !important;
  padding: 2px !important;
  border-radius: 6px !important;
  margin: 0 !important;
}
html body.mobile-play #view-shop .si-art img,
html body.mobile-play #view-shop .si-art canvas {
  max-width: 40px !important;
  max-height: 40px !important;
}
html body.mobile-play #view-shop .si-name,
html body.mobile-play #view-shop .si-title {
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin: 0 0 1px !important;
}
html body.mobile-play #view-shop .si-desc,
html body.mobile-play #view-shop .si-sub {
  font-size: 9px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body.mobile-play #view-shop .si-meta,
html body.mobile-play #view-shop .si-price-row {
  font-size: 9px !important;
  gap: 4px !important;
  margin-top: 2px !important;
}
html body.mobile-play #view-shop .si-buy,
html body.mobile-play #view-shop .si-card button {
  min-height: 32px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

/* ── ATTACK ── */
html body.mobile-play #view-attack.tab-view,
html body.mobile-play #view-attack.attack-tab-shell {
  max-width: none !important;
  gap: 8px !important;
  padding: 6px 8px 10px !important;
}
html body.mobile-play #view-attack .attack-hero-cinematic {
  border-radius: 8px !important;
  min-height: 0 !important;
}
html body.mobile-play #view-attack .attack-hero-content {
  padding: 10px !important;
  gap: 8px !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
html body.mobile-play #view-attack .attack-hero-title {
  font-size: 14px !important;
  margin: 0 0 4px !important;
}
html body.mobile-play #view-attack .attack-hero-desc {
  font-size: 10px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
html body.mobile-play #view-attack .attack-hero-kicker {
  font-size: 9px !important;
}
html body.mobile-play #view-attack .attack-hero-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 4px !important;
  width: 100% !important;
}
html body.mobile-play #view-attack .attack-stat-chip {
  padding: 4px 6px !important;
  font-size: 9px !important;
  min-width: 0 !important;
  gap: 4px !important;
}
html body.mobile-play #view-attack .attack-stat-chip strong {
  font-size: 9px !important;
  display: block !important;
}
html body.mobile-play #view-attack .attack-section {
  gap: 6px !important;
}
html body.mobile-play #view-attack .raid-village-card,
html body.mobile-play #view-attack .pvp-target-card {
  min-width: 0 !important;
  padding: 8px !important;
}
html body.mobile-play #view-attack .attack-mode-row,
html body.mobile-play #view-attack .attack-modes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* ── MISSIONS ── */
html body.mobile-play #view-missions.tab-view {
  padding: 8px !important;
}
html body.mobile-play #view-missions .missions-shell {
  max-width: none !important;
  gap: 8px !important;
  width: 100% !important;
}
html body.mobile-play #view-missions .missions-list,
html body.mobile-play #view-missions #missions-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
html body.mobile-play #view-missions .mission-card,
html body.mobile-play #view-missions .streak-card {
  min-width: 0 !important;
  padding: 8px !important;
}

/* ── INVENTORY ──
   #mochila-container.inv-grid is a WRAPPER (titles + grids), not the card grid.
   Never apply card-grid columns to the container or section titles collapse. */
html body.mobile-play #view-inventory.tab-view {
  padding: 8px !important;
}
html body.mobile-play #view-inventory #mochila-container,
html body.mobile-play #view-inventory #mochila-container.inv-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 2px 0 8px !important;
  /* cancel juegoprueba .inv-grid multi-column on this host */
  grid-template-columns: none !important;
  grid-auto-flow: row !important;
}
html body.mobile-play #view-inventory .mochila-section-title {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 6px 0 2px !important;
  padding: 0 2px !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 0 0 auto !important;
  grid-column: unset !important;
}
html body.mobile-play #view-inventory .mochila-section-title:first-child {
  margin-top: 0 !important;
}
html body.mobile-play #view-inventory .mochila-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}
html body.mobile-play #view-inventory .mochila-card,
html body.mobile-play #view-inventory .inv-item,
html body.mobile-play #view-inventory .mochila-item {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* ── MARKET / BAZAAR ── */
html body.mobile-play #view-market.tab-view {
  padding: 8px !important;
}
html body.mobile-play #view-market .bazaar-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}
html body.mobile-play #view-market .bazaar-side,
html body.mobile-play #view-market .bazaar-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
html body.mobile-play #view-market .bazaar-inv-body,
html body.mobile-play #view-market #bazaar-inventory {
  max-height: 120px !important;
  overflow: auto !important;
}

/* ── EXCHANGE ── */
html body.mobile-play #view-exchange.tab-view {
  padding: 8px !important;
}
html body.mobile-play #view-exchange .exchange-grid,
html body.mobile-play #view-exchange .exchange-layout,
html body.mobile-play #view-exchange .exchange-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ── STAKING ── */
html body.mobile-play #view-staking.tab-view {
  padding: 8px !important;
  inset: 4px !important;
}
html body.mobile-play #view-staking .staking-shell,
html body.mobile-play #view-staking #staking-root {
  max-width: none !important;
  width: 100% !important;
  gap: 8px !important;
}
html body.mobile-play #view-staking .staking-grid,
html body.mobile-play #view-staking .stake-cards {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

/* ── WITHDRAWALS ── */
html body.mobile-play #view-withdrawals.tab-view,
html body.mobile-play #content-withdrawals .tab-view {
  padding: 8px !important;
}
html body.mobile-play #content-withdrawals,
html body.mobile-play #content-withdrawals.withdraw-hub {
  height: 0 !important;
  min-height: 0 !important;
}

/* ── CALCULATOR ── */
html body.mobile-play #view-calculator.tab-view,
html body.mobile-play #view-calculator.calc-tab-shell {
  padding: 8px !important;
  max-width: none !important;
}
html body.mobile-play #view-calculator .calc-grid,
html body.mobile-play #view-calculator .calc-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}
html body.mobile-play #view-calculator .calc-btn {
  min-height: 36px !important;
  font-size: 11px !important;
}

/* ── FORGE / LAB / REFERRALS / REWARDS ── */
html body.mobile-play #view-forge.tab-view,
html body.mobile-play #view-lab.tab-view,
html body.mobile-play #view-referrals.tab-view,
html body.mobile-play #view-rewards.tab-view {
  padding: 8px !important;
  inset: 4px !important;
}
html body.mobile-play #view-forge .forge-grid,
html body.mobile-play #view-lab .lab-grid,
html body.mobile-play #view-lab .lab-layout {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html body.mobile-play #view-lab .lab-panel-wrap {
  min-height: 0 !important;
}
html body.mobile-play #view-referrals .ref-grid,
html body.mobile-play #view-referrals .referrals-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* ── FARM plots panel ── */
html body.mobile-play #view-farm.tab-view {
  padding: 8px !important;
}
html body.mobile-play #view-farm .plots-grid {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 6px !important;
}
html body.mobile-play #view-farm .plot {
  height: 72px !important;
}

/* Kill desktop fixed min-widths inside panels (not filter chips / section titles) */
html body.mobile-play #tab-views .tab-view * {
  max-width: 100%;
}
html body.mobile-play #tab-views .tab-view .si-filter,
html body.mobile-play #tab-views .tab-view .shop-filter-btn,
html body.mobile-play #tab-views .tab-view .shop-filters,
html body.mobile-play #tab-views .tab-view #shop-filters,
html body.mobile-play #tab-views .tab-view .mochila-section-title,
html body.mobile-play #tab-views .tab-view .mochila-section-title * {
  max-width: none !important;
}
html body.mobile-play #tab-views table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Short landscape: even denser panels */
@media (max-height: 420px) {
  html body.mobile-play #tab-views .tab-view {
    inset: 0 !important;
    padding: 0 !important;
  }
  html body.mobile-play #view-shop .shop-hero {
    padding: 3px 8px !important;
  }
  html body.mobile-play #view-shop .shop-hero-mark {
    display: none !important;
  }
  html body.mobile-play #view-shop .shop-filters,
  html body.mobile-play #view-shop #shop-filters {
    padding: 3px 6px !important;
  }
  html body.mobile-play #view-shop .si-filter,
  html body.mobile-play #view-shop .shop-filter-btn {
    padding: 3px 7px !important;
    min-height: 26px !important;
    font-size: 8px !important;
  }
  html body.mobile-play #view-shop .shop-grid,
  html body.mobile-play #view-shop #shop-grid {
    padding: 3px 6px 8px !important;
    gap: 3px !important;
  }
  html body.mobile-play #view-shop .si-card {
    min-height: 46px !important;
    padding: 4px 6px !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
  }
  html body.mobile-play #view-shop .si-art {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
  }
  html body.mobile-play #view-shop .si-desc,
  html body.mobile-play #view-shop .si-sub {
    display: none !important;
  }
  html body.mobile-play #view-attack .attack-hero-desc {
    display: none !important;
  }
  html body.mobile-play #view-attack .attack-hero-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  html body.mobile-play #view-attack .attack-stat-chip:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* ───────── TOUCH CONTROLS — layout clásico limpio ───────── */
html body.mobile-play #touch-controls.is-visible {
  display: block !important;
  z-index: 90;
  pointer-events: none;
}

/* Stick bottom-left — polished ring + gold knob */
html body.mobile-play .touch-stick {
  position: absolute !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  right: auto !important;
  top: auto !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
html body.mobile-play .touch-stick-base {
  width: 100px !important;
  height: 100px !important;
  border-width: 3px !important;
  border-color: rgba(232, 184, 48, 0.65) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(70, 55, 35, 0.55), rgba(12, 10, 8, 0.82) 68%) !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.65),
    inset 0 0 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 230, 160, 0.12) !important;
}
html body.mobile-play .touch-stick-base.is-active {
  border-color: rgba(255, 210, 80, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.65),
    0 0 16px rgba(232, 184, 48, 0.35),
    inset 0 0 22px rgba(0, 0, 0, 0.45) !important;
}
html body.mobile-play .touch-stick-knob {
  width: 42px !important;
  height: 42px !important;
  margin: -21px 0 0 -21px !important;
  background: linear-gradient(160deg, #f0d060 0%, #e8b830 42%, #a87820 100%) !important;
  border: 2px solid rgba(255, 245, 200, 0.65) !important;
  box-shadow:
    0 3px 0 #5a3a10,
    0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}
html body.mobile-play .touch-stick-cross {
  border-color: rgba(255, 240, 200, 0.14) !important;
}

/*
  Action pad — CSS GRID (no absolute fights / media overlaps):
           [L]
      [↑]       [⚔]
    [R]    [◎]
*/
html body.mobile-play .touch-actions,
html body.mobile-play #touch-actions {
  position: absolute !important;
  right: max(6px, env(safe-area-inset-right)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 40px 46px 50px !important;
  grid-template-rows: 38px 44px 48px !important;
  grid-template-areas:
    ".    .    lbtn"
    ".    jump atk"
    "rbtn use  atk" !important;
  gap: 6px 8px !important;
  align-items: center !important;
  justify-items: center !important;
  pointer-events: auto !important;
}

html body.mobile-play .touch-btn {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-width: 3px !important;
  border-color: rgba(0, 0, 0, 0.7) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  align-self: center !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 8px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
html body.mobile-play .touch-btn.is-pressed,
html body.mobile-play .touch-btn.is-touch-active {
  transform: translateY(2px) scale(0.96) !important;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html body.mobile-play .touch-btn-atk {
  grid-area: atk !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 19px !important;
  align-self: end !important;
  background: linear-gradient(160deg, #ff6b66, #c62828 55%, #8e1515) !important;
  border-color: #4a0c0c !important;
}

html body.mobile-play .touch-btn-use {
  grid-area: use !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 17px !important;
  background: linear-gradient(160deg, #7ed56f, #43a047 55%, #2e7d32) !important;
  border-color: #1b4d1e !important;
}

html body.mobile-play .touch-btn-jump {
  grid-area: jump !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  background: linear-gradient(160deg, #6ed4f5, #1e88e5 55%, #1565c0) !important;
  border-color: #0d3a6e !important;
}

html body.mobile-play .touch-btn-water-l {
  grid-area: lbtn !important;
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(160deg, #8bc34a, #558b2f 55%, #33691e) !important;
  border-color: #1b3a0c !important;
}
html body.mobile-play .touch-btn-water-l small {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

html body.mobile-play .touch-btn-water-r {
  grid-area: rbtn !important;
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(160deg, #64b5f6, #1e88e5 55%, #0d47a1) !important;
  border-color: #0a2f55 !important;
}
html body.mobile-play .touch-btn-water-r small {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

/* Hotbar center bottom */
html body.mobile-play #hotbar {
  position: fixed !important;
  left: 50% !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 3px 6px !important;
  gap: 3px !important;
  z-index: 92 !important;
  background: rgba(10, 8, 6, 0.88) !important;
  border: 2px solid #0a0806 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: row !important;
}
html body.mobile-play #hotbar .tool {
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}
html body.mobile-play #hotbar .tool small { display: none !important; }

/* Minimap top-right of world */
html body.mobile-play #minimap-panel {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  bottom: auto !important;
  left: auto !important;
  transform: scale(0.48) !important;
  transform-origin: top right !important;
  z-index: 60 !important;
  opacity: 0.9 !important;
}

/* Chips / tips */
html body.mobile-play #landscape-tip {
  bottom: max(48px, calc(env(safe-area-inset-bottom) + 42px)) !important;
  max-width: min(260px, calc(100vw - 190px)) !important;
  z-index: 84 !important;
}
html body.mobile-play #held-water-chip,
html body.mobile-play #held-seed-chip {
  bottom: max(54px, calc(env(safe-area-inset-bottom) + 48px)) !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  z-index: 93 !important;
}
html body.mobile-play .raid-attack-banner {
  top: 40px !important;
  max-width: min(400px, calc(100vw - 16px)) !important;
}
html body.mobile-play .raid-attack-banner-inner {
  padding: 6px 10px !important;
  gap: 6px !important;
}

/* Short landscape phones — smaller chrome, same grid (gaps preserved) */
@media (max-height: 390px) {
  html body.mobile-play #topbar {
    flex: 0 0 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    grid-template-rows: 30px !important;
  }
  html body.mobile-play .touch-stick-base {
    width: 86px !important;
    height: 86px !important;
  }
  html body.mobile-play .touch-stick-knob {
    width: 36px !important;
    height: 36px !important;
    margin: -18px 0 0 -18px !important;
  }
  html body.mobile-play .touch-actions,
  html body.mobile-play #touch-actions {
    grid-template-columns: 36px 42px 46px !important;
    grid-template-rows: 34px 40px 44px !important;
    gap: 5px 7px !important;
  }
  html body.mobile-play .touch-btn {
    width: 38px !important;
    height: 38px !important;
  }
  html body.mobile-play .touch-btn-atk {
    width: 46px !important;
    height: 46px !important;
  }
  html body.mobile-play .touch-btn-use {
    width: 42px !important;
    height: 42px !important;
  }
  html body.mobile-play .touch-btn-jump {
    width: 38px !important;
    height: 38px !important;
  }
  html body.mobile-play .touch-btn-water-l,
  html body.mobile-play .touch-btn-water-r {
    width: 34px !important;
    height: 34px !important;
  }
  html body.mobile-play #hotbar .tool {
    width: 32px !important;
    height: 32px !important;
  }
  /* Keep sidebar tappable even on short phones */
  html body.mobile-play #sidebar {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    flex-basis: 48px !important;
    padding: 3px 2px !important;
  }
  html body.mobile-play #sidebar .tab {
    min-height: 40px !important;
    height: 40px !important;
  }
  html body.mobile-play #sidebar .tab-ic-wrap {
    width: 26px !important;
    height: 26px !important;
  }
  html body.mobile-play #sidebar .tab-ic {
    width: 18px !important;
    height: 18px !important;
  }
  html body.mobile-play #minimap-panel {
    transform: scale(0.38) !important;
  }
}

/* Ultra-short landscape: panel aligns with 48px sidebar */
@media (max-height: 390px) and (orientation: landscape) {
  html body.mobile-play.panel-open #tab-views {
    left: 48px !important;
    width: calc(100vw - 48px) !important;
  }
}

/* Narrow landscape width (SE / small Android) */
@media (max-width: 700px) and (orientation: landscape) {
  html body.mobile-play #topbar {
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    gap: 2px !important;
    padding: 0 4px !important;
  }
  html body.mobile-play #topbar .hud-card {
    padding: 0 3px !important;
  }
  html body.mobile-play #topbar .hud-card .hc-value {
    font-size: 9px !important;
  }
  html body.mobile-play .touch-actions,
  html body.mobile-play #touch-actions {
    grid-template-columns: 34px 40px 44px !important;
    grid-template-rows: 32px 38px 42px !important;
    gap: 5px 6px !important;
  }
}

/* Wide landscape tablets — keep topbar slim so chips no se cortan */
@media (min-width: 800px) and (orientation: landscape) {
  html body.mobile-play #topbar {
    flex: 0 0 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    grid-template-rows: 36px !important;
  }
  html body.mobile-play #sidebar {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex-basis: 56px !important;
  }
  html body.mobile-play #sidebar .tab {
    min-height: 46px !important;
    height: 46px !important;
  }
  html body.mobile-play #sidebar .tab-ic-wrap {
    width: 30px !important;
    height: 30px !important;
  }
  html body.mobile-play #sidebar .tab-ic {
    width: 22px !important;
    height: 22px !important;
  }
  html body.mobile-play .touch-stick-base {
    width: 104px !important;
    height: 104px !important;
  }
  html body.mobile-play .touch-actions,
  html body.mobile-play #touch-actions {
    grid-template-columns: 44px 50px 54px !important;
    grid-template-rows: 40px 48px 52px !important;
    gap: 8px 10px !important;
  }
  html body.mobile-play .touch-btn-atk {
    width: 54px !important;
    height: 54px !important;
  }
  /* Tablet landscape: panel aligns with 56px sidebar */
  html body.mobile-play.panel-open #tab-views {
    left: 56px !important;
    width: calc(100vw - 56px) !important;
  }
}

/* Toasts: compact top strip so they don't cover the pad */
html body.mobile-play #toast-container {
  top: 36px !important;
  right: 6px !important;
  left: auto !important;
  max-width: min(240px, 42vw) !important;
  gap: 4px !important;
  z-index: 200 !important;
}
html body.mobile-play #toast-container .toast {
  font-size: 10px !important;
  padding: 5px 8px !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}

/* Cookie banner: full-width bottom, above controls but dismissible */
html body.mobile-play .cookie-banner {
  max-width: min(520px, calc(100vw - 12px)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  z-index: 500 !important;
}

/* Desktop mouse: no mobile chrome */
@media (hover: hover) and (pointer: fine) {
  html body:not(.is-touch) #rotate-hint,
  html body:not(.is-touch) #landscape-tip,
  html body:not(.is-touch) #touch-controls {
    display: none !important;
  }
}

/* Panel open MUST beat #touch-controls.is-visible { display:block } (same file, later wins) */
html body.mobile-play.panel-open #touch-controls,
html body.mobile-play.panel-open #touch-controls.is-visible,
html body.mobile-play.shop-open #touch-controls,
html body.mobile-play.shop-open #touch-controls.is-visible,
html body.mobile-play.panel-open #hotbar,
html body.mobile-play.shop-open #hotbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ============================================================
   A+B: FULLSCREEN MENUS + BOTTOM NAV (mobile-play only)
   ============================================================ */

/* Desktop: hide mobile nav chrome */
#mobile-bottom-nav,
#mobile-more-sheet {
  display: none !important;
}

/* CSS variables for nav / topbar height */
html body.mobile-play {
  --topbar-h: 34px;
  --mbn-h: 52px;
  --mbn-safe: env(safe-area-inset-bottom, 0px);
  --mbn-total: calc(var(--mbn-h) + var(--mbn-safe));
}

/* Hide left desktop sidebar ONLY in portrait — bottom nav is primary there */
@media (orientation: portrait) {
  html body.mobile-play #sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
}
@media (orientation: landscape) {
  html body.mobile-play #sidebar {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* App reserves space for bottom nav ONLY in portrait */
@media (orientation: portrait) {
  html body.mobile-play #app {
    padding-bottom: var(--mbn-total) !important;
    box-sizing: border-box !important;
  }
}
@media (orientation: landscape) {
  html body.mobile-play #app {
    padding-bottom: 0 !important;
  }
}

/* Landscape: panel alongside sidebar, not over it; no bottom-nav gap */
@media (orientation: landscape) {
  html body.mobile-play.panel-open #tab-views {
    left: 52px !important;
    width: calc(100vw - 52px) !important;
    bottom: 0 !important;
    height: calc(100dvh - var(--topbar-h, 34px)) !important;
    max-height: calc(100dvh - var(--topbar-h, 34px)) !important;
  }
  html body.mobile-play #sidebar {
    z-index: 200 !important;
  }
}

/* Landscape: denser panel content, wider cards */
@media (orientation: landscape) {
  html body.mobile-play #tab-views .tab-view {
    padding: 6px 8px 8px !important;
  }
  html body.mobile-play #tab-views .stat-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  html body.mobile-play #tab-views .stat-card {
    flex: 1 1 auto !important;
    min-width: 80px !important;
  }
  /* Shop: 2-column product grid in landscape */
  html body.mobile-play #view-shop .shop-grid,
  html body.mobile-play #view-shop #shop-grid {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  html body.mobile-play #view-shop .si-card {
    flex: 0 0 calc(50% - 4px) !important;
    min-height: 44px !important;
    padding: 4px 6px !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
  }
  html body.mobile-play #view-shop .si-art {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
  }
  html body.mobile-play #view-shop .si-name {
    font-size: 10px !important;
  }
  html body.mobile-play #view-shop .si-desc {
    display: none !important;
  }
  html body.mobile-play #view-shop .si-buy {
    min-height: 28px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
  }
  /* Inventory: tighter grid in landscape */
  html body.mobile-play #view-inventory .mochila-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  }
  /* Attack: compact hero, horizontal stats */
  html body.mobile-play #view-attack .attack-hero-content {
    padding: 6px 8px !important;
  }
  html body.mobile-play #view-attack .attack-hero-title {
    font-size: 12px !important;
  }
  /* Missions: tighter */
  html body.mobile-play #view-missions .mission-card {
    padding: 6px !important;
  }
}

html body.mobile-play #main {
  width: 100% !important;
  min-height: 0 !important;
}
html body.mobile-play #world {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* ── Bottom nav bar (ONLY in portrait) ── */
@media (orientation: portrait) {
  html body.mobile-play #mobile-bottom-nav,
  html body.mobile-play .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 250 !important;
    height: var(--mbn-total) !important;
    min-height: var(--mbn-total) !important;
    padding: 0 4px var(--mbn-safe) !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    background:
      linear-gradient(180deg, #2a1f14 0%, #14100c 100%) !important;
    border-top: 2px solid #0a0806 !important;
    box-shadow:
      0 -2px 0 rgba(196, 154, 32, 0.35),
      0 -8px 24px rgba(0, 0, 0, 0.45) !important;
    pointer-events: auto !important;
  }
  html body.mobile-play #mobile-bottom-nav[hidden] {
    display: flex !important; /* force show when mobile-play even if hidden attr race */
  }
}
@media (orientation: landscape) {
  html body.mobile-play #mobile-bottom-nav,
  html body.mobile-play .mobile-bottom-nav,
  html body.mobile-play #mobile-bottom-nav[hidden] {
    display: none !important;
  }
}

html body.mobile-play .mbn-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: var(--mbn-h) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 2px !important;
  margin: 2px 1px !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #c8b8a0 !important;
  font-family: var(--font-ui, system-ui, sans-serif) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  box-sizing: border-box !important;
}
html body.mobile-play .mbn-item:active {
  transform: scale(0.96);
  filter: brightness(1.1);
}
html body.mobile-play .mbn-item.is-active {
  color: #f0d060 !important;
  background: rgba(232, 184, 48, 0.14) !important;
  border-color: rgba(232, 184, 48, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.12) !important;
}
html body.mobile-play .mbn-ic {
  font-size: 16px !important;
  line-height: 1 !important;
  display: block !important;
}
html body.mobile-play .mbn-lbl {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* ── Fullscreen menu panels (between topbar and bottom nav) ── */
html body.mobile-play.panel-open #tab-views {
  position: fixed !important;
  top: var(--topbar-h, 34px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--mbn-total) !important;
  inset: auto !important;
  width: 100vw !important;
  height: calc(100dvh - var(--topbar-h, 34px) - var(--mbn-total)) !important;
  min-height: 180px !important;
  max-height: calc(100dvh - var(--topbar-h, 34px) - var(--mbn-total)) !important;
  z-index: 180 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
html body.mobile-play.panel-open #tab-views [id^="content-"]:not(.hidden) {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  pointer-events: none !important;
  overflow: visible !important;
  display: block !important;
}
html body.mobile-play.panel-open #tab-views .tab-view {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px 12px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, #241c14 0%, #12100c 55%, #0c0a08 100%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 181 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
html body.mobile-play.panel-open #tab-views .tab-view#view-home {
  display: none !important;
}

/* Raise topbar above panels */
html body.mobile-play #topbar {
  z-index: 260 !important;
  position: relative !important;
}
html body.mobile-play.panel-open #topbar {
  position: sticky !important;
  top: 0 !important;
}

/* Play chrome clearance for bottom nav (ONLY in portrait) — detailed sizes in portrait block below */
@media (orientation: portrait) {
  html body.mobile-play .touch-stick {
    bottom: calc(var(--mbn-total) + 12px) !important;
  }
  html body.mobile-play .touch-actions,
  html body.mobile-play #touch-actions {
    bottom: calc(var(--mbn-total) + 10px) !important;
  }
  html body.mobile-play #hotbar {
    bottom: calc(var(--mbn-total) + 130px) !important;
  }
}

/* ── Más sheet ── */
html body.mobile-play #mobile-more-sheet,
html body.mobile-play .mobile-more-sheet {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 300 !important;
  pointer-events: none !important;
}
html body.mobile-play #mobile-more-sheet.is-open,
html body.mobile-play .mobile-more-sheet.is-open {
  display: block !important;
  pointer-events: auto !important;
}
html body.mobile-play .mobile-more-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.62) !important;
  cursor: pointer !important;
}
html body.mobile-play .mobile-more-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-height: min(78dvh, 420px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, #2a1f14, #14100c) !important;
  border-top: 3px solid #c49a20 !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55) !important;
  padding: 0 0 var(--mbn-safe) !important;
  box-sizing: border-box !important;
  animation: mbn-sheet-up 0.22s ease-out;
}
@keyframes mbn-sheet-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
html body.mobile-play .mobile-more-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(232, 184, 48, 0.25) !important;
  flex-shrink: 0 !important;
}
html body.mobile-play .mobile-more-head h2 {
  margin: 0 !important;
  font-family: var(--font-game, monospace) !important;
  font-size: 11px !important;
  color: #f0d060 !important;
}
html body.mobile-play .mobile-more-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 2px solid #0a0806 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #e8dcc8 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}
html body.mobile-play .mobile-more-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 10px 12px 12px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
}
html body.mobile-play .mobile-more-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  border: 2px solid #0a0806 !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  color: #f0e6d4 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
html body.mobile-play .mobile-more-item span {
  font-size: 15px !important;
  flex-shrink: 0 !important;
}
html body.mobile-play .mobile-more-item.is-active {
  border-color: #e8b830 !important;
  background: rgba(232, 184, 48, 0.18) !important;
  color: #f0d060 !important;
}
html body.mobile-play .mobile-more-item:active {
  transform: scale(0.98);
}

/* Short phones: slightly shorter nav labels */
@media (max-height: 390px) {
  html body.mobile-play {
    --mbn-h: 48px;
    --topbar-h: 30px;
  }
  html body.mobile-play.panel-open #tab-views {
    top: var(--topbar-h, 30px) !important;
  }
  html body.mobile-play .mbn-lbl {
    font-size: 8px !important;
  }
}

/* ============================================================
   PORTRAIT-FIRST PLAY (vertical phones)
   Higher-specificity + orientation media so landscape icon HUD stays.
   ============================================================ */

@media (orientation: portrait) {
  html body.mobile-play {
    --topbar-h: 48px;
    --mbn-h: 56px;
    /* reserved right cluster: wallet + settings (no hidden chip) */
    --topbar-right-min: 118px;
  }

  /* Taller topbar: resources stay in center track; wallet fixed on right */
  html body.mobile-play #topbar {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) minmax(var(--topbar-right-min), auto) !important;
    grid-template-rows: var(--topbar-h) !important;
    flex: 0 0 var(--topbar-h) !important;
    height: var(--topbar-h) !important;
    min-height: var(--topbar-h) !important;
    max-height: var(--topbar-h) !important;
    gap: 4px !important;
    padding:
      max(2px, env(safe-area-inset-top, 0px))
      max(6px, env(safe-area-inset-right, 0px))
      2px
      max(6px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
    border-bottom: 2px solid #0a0806 !important;
    background: linear-gradient(180deg, #2c2218 0%, #1a1410 100%) !important;
    box-shadow:
      0 2px 0 rgba(196, 154, 32, 0.28),
      0 6px 16px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
  }

  html body.mobile-play #topbar-left {
    max-width: 22px !important;
    width: 22px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html body.mobile-play #logo {
    max-width: 20px !important;
  }
  html body.mobile-play #logo .logo-berry {
    width: 18px !important;
    height: 18px !important;
  }

  /* Center: clip so cards never paint into wallet column */
  html body.mobile-play #topbar-center {
    height: 36px !important;
    max-height: 36px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 3px !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    /* hard clip: children rects used for hit-tests stay in band via containment */
    contain: inline-size !important;
  }

  html body.mobile-play #topbar .hud-card {
    height: 30px !important;
    max-height: 30px !important;
    min-height: 30px !important;
    padding: 0 5px !important;
    gap: 2px !important;
    border-radius: 6px !important;
    border-width: 2px !important;
    flex: 0 0 auto !important;
    max-width: 72px !important;
  }
  html body.mobile-play #topbar .hud-card .hc-value {
    font-size: 10px !important;
    letter-spacing: 0 !important;
    max-width: 42px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body.mobile-play #topbar .hud-card canvas,
  html body.mobile-play #topbar .hud-card .hc-ic-img,
  html body.mobile-play #topbar .hud-card svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Deposit + Inicio/Ayuda: hide in portrait — space for 4 resources + wallet */
  html body.mobile-play #topbar .hud-deposit,
  html body.mobile-play #topbar .hud-nav-link,
  html body.mobile-play #topbar .game-topbar-inicio {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    visibility: hidden !important;
  }

  /* Right cluster: PROMINENT connect wallet + settings only */
  html body.mobile-play #topbar-right {
    gap: 4px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: var(--topbar-right-min) !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 3 !important;
  }

  html body.mobile-play #btn-connect-wallet.phantom-btn,
  html body.mobile-play .phantom-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 44px !important;
    max-width: 92px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    border: 2px solid #0a0806 !important;
    background: linear-gradient(165deg, #b5a6ff 0%, #7c6ad4 48%, #5b4a9e 100%) !important;
    box-shadow:
      0 3px 0 #2a1560,
      0 0 0 1px rgba(171, 159, 242, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  html body.mobile-play #btn-connect-wallet.phantom-btn.phantom-btn--connected,
  html body.mobile-play .phantom-btn.phantom-btn--connected {
    background: linear-gradient(165deg, #6ee7b7 0%, #10b981 55%, #047857 100%) !important;
    box-shadow:
      0 3px 0 #064e3b,
      0 0 0 1px rgba(52, 211, 153, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }
  html body.mobile-play #btn-connect-wallet .phantom-btn-text,
  html body.mobile-play .phantom-btn .phantom-btn-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 54px !important;
    overflow: hidden !important;
    position: static !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    color: #f8f4ff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
  }
  html body.mobile-play #btn-connect-wallet.phantom-btn--connected .phantom-btn-text,
  html body.mobile-play .phantom-btn.phantom-btn--connected .phantom-btn-text {
    color: #052e1c !important;
    text-shadow: none !important;
  }
  html body.mobile-play #btn-connect-wallet .phantom-btn-ic,
  html body.mobile-play .phantom-btn-ic {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  html body.mobile-play #btn-settings.icon-btn,
  html body.mobile-play #btn-settings {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    box-shadow: 0 3px 0 #0a0806 !important;
    flex-shrink: 0 !important;
  }

  /* Connected chip only when not .hidden */
  html body.mobile-play #account-header-chip.hidden {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  html body.mobile-play #account-header-chip:not(.hidden) {
    width: auto !important;
    min-width: 38px !important;
    max-width: 96px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 6px 0 3px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
  }
  html body.mobile-play #account-header-chip:not(.hidden) .profile-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    max-width: 56px !important;
  }
  html body.mobile-play #account-header-chip:not(.hidden) .profile-name {
    font-size: 8px !important;
    line-height: 1.1 !important;
    color: #f0e6d4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body.mobile-play #account-header-chip:not(.hidden) .profile-wallet {
    font-size: 7px !important;
    max-width: 56px !important;
  }
  html body.mobile-play #account-header-chip:not(.hidden) #account-avatar-img,
  html body.mobile-play #account-header-chip:not(.hidden) .profile-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
  }

  /* Touch chrome: sized for thumbs, clear of bottom nav */
  html body.mobile-play .touch-stick {
    left: max(12px, env(safe-area-inset-left)) !important;
    bottom: calc(var(--mbn-total) + 12px) !important;
  }
  html body.mobile-play .touch-stick-base {
    width: 112px !important;
    height: 112px !important;
  }
  html body.mobile-play .touch-stick-knob {
    width: 46px !important;
    height: 46px !important;
    margin: -23px 0 0 -23px !important;
  }

  html body.mobile-play .touch-actions,
  html body.mobile-play #touch-actions {
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--mbn-total) + 10px) !important;
    grid-template-columns: 42px 48px 54px !important;
    grid-template-rows: 40px 48px 52px !important;
    gap: 8px 10px !important;
  }
  html body.mobile-play .touch-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 17px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  html body.mobile-play .touch-btn-atk {
    width: 56px !important;
    height: 56px !important;
    font-size: 20px !important;
  }
  html body.mobile-play .touch-btn-use {
    width: 50px !important;
    height: 50px !important;
  }
  html body.mobile-play .touch-btn-jump {
    width: 46px !important;
    height: 46px !important;
  }
  html body.mobile-play .touch-btn-water-l,
  html body.mobile-play .touch-btn-water-r {
    width: 42px !important;
    height: 42px !important;
  }

  /* Hotbar fully above stick (112) + actions so no overlap with chrome */
  html body.mobile-play #hotbar {
    bottom: calc(var(--mbn-total) + 130px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(200px, calc(100vw - 36px)) !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    background: rgba(10, 8, 6, 0.92) !important;
    box-shadow:
      0 0 0 1px rgba(196, 154, 32, 0.35),
      0 6px 16px rgba(0, 0, 0, 0.4) !important;
  }
  html body.mobile-play #hotbar .tool {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  html body.mobile-play #held-water-chip,
  html body.mobile-play #held-seed-chip {
    bottom: calc(var(--mbn-total) + 58px) !important;
  }

  html body.mobile-play #minimap-panel {
    top: 6px !important;
    right: 6px !important;
    transform: scale(0.55) !important;
    transform-origin: top right !important;
  }

  html body.mobile-play #toast-container {
    top: calc(var(--topbar-h) + 6px) !important;
    max-width: min(280px, 72vw) !important;
  }

  /* Bottom nav — roomier portrait targets */
  html body.mobile-play #mobile-bottom-nav,
  html body.mobile-play .mobile-bottom-nav {
    height: var(--mbn-total) !important;
    min-height: var(--mbn-total) !important;
    padding: 0 6px var(--mbn-safe) !important;
  }
  html body.mobile-play .mbn-item {
    min-height: 48px !important;
    height: var(--mbn-h) !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }
  html body.mobile-play .mbn-ic {
    font-size: 18px !important;
  }
  html body.mobile-play .mbn-lbl {
    font-size: 10px !important;
  }

  /* Panels fill between topbar and bottom nav */
  html body.mobile-play.panel-open #tab-views {
    top: var(--topbar-h) !important;
    bottom: var(--mbn-total) !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--topbar-h) - var(--mbn-total)) !important;
    max-height: calc(100dvh - var(--topbar-h) - var(--mbn-total)) !important;
  }
  html body.mobile-play.panel-open #tab-views .tab-view {
    padding: 12px 14px 16px !important;
  }

  /* Cookie banner above bottom nav */
  html body.mobile-play .cookie-banner {
    bottom: calc(var(--mbn-total) + 8px) !important;
  }
}

/* Narrow portrait (SE / small Android) — keep wallet text, slightly denser */
@media (orientation: portrait) and (max-width: 380px) {
  html body.mobile-play #topbar {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  html body.mobile-play #topbar-left {
    max-width: 22px !important;
    width: 22px !important;
  }
  html body.mobile-play #topbar .hud-card {
    padding: 0 5px !important;
  }
  html body.mobile-play #topbar .hud-card .hc-value {
    font-size: 11px !important;
  }
  html body.mobile-play #btn-connect-wallet.phantom-btn,
  html body.mobile-play .phantom-btn {
    padding: 0 8px !important;
    height: 38px !important;
    min-height: 38px !important;
    gap: 4px !important;
  }
  html body.mobile-play #btn-connect-wallet .phantom-btn-text,
  html body.mobile-play .phantom-btn .phantom-btn-text {
    font-size: 8px !important;
  }
  html body.mobile-play #btn-settings.icon-btn,
  html body.mobile-play #btn-settings {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  html body.mobile-play .touch-stick-base {
    width: 100px !important;
    height: 100px !important;
  }
  html body.mobile-play .touch-stick-knob {
    width: 42px !important;
    height: 42px !important;
    margin: -21px 0 0 -21px !important;
  }
  html body.mobile-play .touch-actions,
  html body.mobile-play #touch-actions {
    grid-template-columns: 38px 44px 48px !important;
    grid-template-rows: 36px 44px 48px !important;
    gap: 6px 8px !important;
  }
  html body.mobile-play .touch-btn {
    width: 44px !important;
    height: 44px !important;
  }
  html body.mobile-play .touch-btn-atk {
    width: 50px !important;
    height: 50px !important;
  }
  html body.mobile-play #hotbar {
    bottom: calc(var(--mbn-total) + 118px) !important;
  }
}

/* Class-based mirror (touch-ui sets is-portrait; helps when media orientation lags) */
html body.mobile-play.is-portrait {
  --topbar-h: 48px;
  --mbn-h: 56px;
  --topbar-right-min: 118px;
}
html body.mobile-play.is-portrait #btn-connect-wallet .phantom-btn-text,
html body.mobile-play.is-portrait .phantom-btn .phantom-btn-text {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  height: auto !important;
  max-width: 54px !important;
  overflow: hidden !important;
  position: static !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #f8f4ff !important;
}
html body.mobile-play.is-portrait #btn-connect-wallet.phantom-btn,
html body.mobile-play.is-portrait .phantom-btn {
  width: auto !important;
  max-width: 92px !important;
  min-width: 44px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 8px !important;
  gap: 4px !important;
}
html body.mobile-play.is-portrait #account-header-chip.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
html body.mobile-play.is-portrait #topbar .hud-deposit,
html body.mobile-play.is-portrait #topbar .hud-nav-link,
html body.mobile-play.is-portrait #topbar .game-topbar-inicio {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}