/* ============================================================================
   ELDORIA — MOBILE DESIGN SYSTEM (v5 — full redesign)

   Activado por body.mobile-mode (JS lo añade en viewport ≤ 1024px).
   Estrategia: prefijo body.mobile-mode en TODOS los selectores → especificidad
   0,2,X que vence cualquier regla desktop (0,1,X). Sin !important salvo
   para `display` en componentes con conflictos de cascada inevitables.

   Filosofía:
   - Todo cabe en pantalla, nada hace overflow horizontal.
   - Tap targets ≥ 44px.
   - Tipografía legible (14-16px body, 11-12px metas).
   - Diseño minimalista: cards planas, espaciado consistente, foco en contenido.
   - Una sola columna por defecto, dos cuando el contenido lo permite.
   ============================================================================ */

/* ============================================================================
   1) RESET y TOKENS móviles
   ============================================================================ */
body.mobile-mode {
  --m-tap: 44px;
  --m-bottom-h: 60px;
  --m-top-h: 52px;
  --m-strip-h: 40px;
  --m-pad: 12px;
  --m-radius: 12px;
  --m-radius-sm: 8px;
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-top: env(safe-area-inset-top, 0px);

  /* Permitir scroll vertical y prevenir scroll horizontal */
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
html:has(body.mobile-mode), body.mobile-mode {
  height: auto;
  min-height: 100%;
}
body.mobile-mode #app {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  display: block;
}
body.mobile-mode * {
  -webkit-overflow-scrolling: touch;
  min-width: 0;  /* CLAVE: previene que items de grid/flex hagan overflow */
}
body.mobile-mode input,
body.mobile-mode select,
body.mobile-mode textarea {
  font-size: 16px;  /* Previene zoom en iOS */
}

/* Hide desktop-only items */
body.mobile-mode .desktop-only { display: none; }

/* Elementos sólo-mobile: ocultos por default en desktop. Se muestran sólo con body.mobile-mode */
.mobile-drawer-header,
.mobile-drawer-backdrop,
.mobile-burger,
.mobile-resources-strip,
.mobile-bottom-tab,
.nav-sidebar .drawer-footer {
  display: none;
}

/* ============================================================================
   2) SHELL — top bar + drawer + main + bottom-tab
   ============================================================================ */
body.mobile-mode .game-shell {
  display: block;
  grid-template-areas: none;
  grid-template-columns: none;
  grid-template-rows: none;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  width: 100%;
  padding-bottom: calc(var(--m-bottom-h) + var(--m-safe-bottom) + 16px);
}

/* 2.1 Top bar — minimal, 52px alto.
   2026-05-15: bugfix iOS PWA "agregar a inicio" — el safe-area-inset-top
   (notch / status bar, ~47px en iPhone) hacía que el contenido se aplastara
   contra la parte inferior del top-bar y se viera todo apilado. Solución:
   incluir el safe area en la altura TOTAL en vez de robarlo del content area.
   Box-sizing border-box es el default global, así que padding-top + min-height
   ahora suman correctamente. */
body.mobile-mode .top-bar {
  grid-area: auto;
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  /* Altura mínima = barra (52px) + safe area del notch (0-47px en iPhone PWA).
     Antes era height fijo + padding-top, lo que aplastaba el contenido. */
  min-height: calc(var(--m-top-h) + var(--m-safe-top));
  height: calc(var(--m-top-h) + var(--m-safe-top));
  padding: 0 var(--m-pad);
  padding-top: var(--m-safe-top);
  box-sizing: border-box;
  background: rgba(15, 8, 28, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(233, 185, 99, 0.25);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
/* Asegurar que los hijos del top-bar se alinean al ÁREA DE CONTENIDO (debajo del safe-area),
   no sobre el status bar del iPhone. align-items: center del grid ya lo hace porque
   el padding empuja el centro vertical hacia abajo. */
body.mobile-mode .top-bar > * { align-self: center; }
body.mobile-mode .top-bar .brand {
  grid-column: 2;
  justify-self: center;
  height: auto;
  min-width: 0;
  padding: 0;
}
body.mobile-mode .top-bar .brand .brand-logo,
body.mobile-mode .top-bar .brand img.brand-logo {
  height: 28px;
  width: auto;
}
body.mobile-mode .top-bar .top-divider,
body.mobile-mode .top-bar .player-resources,
body.mobile-mode .top-bar .top-player {
  display: none;
}
body.mobile-mode .top-bar .top-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  margin: 0;
  gap: 0;
}
body.mobile-mode .top-bar .top-actions .top-action-btn:not(#btn-notifications) {
  display: none;
}
body.mobile-mode .top-bar .top-action-btn {
  width: 38px;
  height: 38px;
  font-size: 14px;
  border-radius: 10px;
}

/* 2026-05-26: header V2 Obsidian Codex en mobile — replica la estructura grid
   3-col del header legacy pero apuntando a clases tbv2-*. Sin esto, los
   selectores mobile no matcheaban y el header se veía descalibrado. */
body.mobile-mode .top-bar.tbv2 {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 var(--m-pad);
  padding-top: var(--m-safe-top);
}
body.mobile-mode .top-bar.tbv2 .tbv2-brand {
  grid-column: 2;
  justify-self: center;
  position: relative;
  left: auto; top: auto;
  transform: none;
  height: auto;
  padding: 0;
  flex-shrink: 1;
  z-index: auto;
}
body.mobile-mode .top-bar.tbv2 .tbv2-brand-logo { height: 28px; width: auto; }
body.mobile-mode .top-bar.tbv2 .tbv2-resources,
body.mobile-mode .top-bar.tbv2 .tbv2-player,
body.mobile-mode .top-bar.tbv2 .tbv2-spacer { display: none; }
body.mobile-mode .top-bar.tbv2 .tbv2-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 0;
  margin: 0;
}
/* En mobile dejamos visibles: notifications + audio toggle (inyectado por audio.js).
   Ocultamos los .tbv2-btn restantes (lang, wiki, logout) y el .tbv2-cta de
   Próximos Cambios. Espejo del comportamiento del header legacy en mobile. */
body.mobile-mode .top-bar.tbv2 .tbv2-actions .tbv2-btn:not(#btn-notifications) { display: none; }
body.mobile-mode .top-bar.tbv2 .tbv2-actions .tbv2-cta { display: none; }
body.mobile-mode .top-bar.tbv2 .tbv2-btn {
  width: 38px; height: 38px;
  font-size: 14px;
  border-radius: 10px;
}

/* 2.2 Hamburger button (en columna 1 del top-bar) */
body.mobile-mode .mobile-burger {
  display: flex !important;
  grid-column: 1;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(233, 185, 99, 0.25);
  border-radius: 10px;
  color: var(--gold);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.1s, background 0.15s;
}
body.mobile-mode .mobile-burger:active {
  transform: scale(0.94);
  background: rgba(233, 185, 99, 0.15);
}

/* 2.3 Resources strip — pills horizontales, scroll lateral */
body.mobile-mode .mobile-resources-strip {
  display: flex !important;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px var(--m-pad);
  background: rgba(10, 5, 18, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: sticky;
  /* 2026-05-15: incluir safe-area-inset-top para iOS PWA — sino el strip
     se posicionaba debajo de donde está realmente el top-bar y quedaba tapado. */
  top: calc(var(--m-top-h) + var(--m-safe-top));
  z-index: 49;
  height: var(--m-strip-h);
}
body.mobile-mode .mobile-resources-strip::-webkit-scrollbar { display: none; }

body.mobile-mode .mob-res-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  height: 26px;
}
body.mobile-mode .mob-res-pill i { font-size: 10px; }
body.mobile-mode .mob-res-pill.lvl    { color: var(--gold); border-color: var(--gold); background: rgba(233, 185, 99, 0.1); }
body.mobile-mode .mob-res-pill.hp     { color: #f8838e; border-color: rgba(225, 80, 90, 0.45); }
body.mobile-mode .mob-res-pill.mp     { color: #4cc4ff; border-color: rgba(86, 200, 255, 0.45); }
body.mobile-mode .mob-res-pill.gold   { color: var(--gold); border-color: rgba(233, 185, 99, 0.4); }
body.mobile-mode .mob-res-pill.gems   { color: #b89dff; border-color: rgba(122, 76, 240, 0.4); }
body.mobile-mode .mob-res-pill.eldor  { color: #ff8d63; border-color: rgba(255, 113, 67, 0.45); }
body.mobile-mode .mob-res-pill.stamina { color: #ffc857; border-color: rgba(255, 200, 87, 0.45); background: rgba(255, 141, 51, 0.08); }

/* 2.4 Backdrop compartido */
body.mobile-mode .mobile-drawer-backdrop {
  display: block !important;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
body.mobile-mode .mobile-drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* 2.5 Drawer — slide elegante desde izquierda */
body.mobile-mode .nav-sidebar {
  position: fixed;
  grid-area: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  width: 300px;
  max-width: 86vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: flex;
  flex-direction: column;     /* override game.css @1100px que usa row */
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: hidden;
  overflow-y: hidden;          /* el body interno hace el scroll */
  padding: 0;
  margin: 0;
  background: linear-gradient(180deg, #16092b 0%, #0a0414 100%);
  border: none;
  border-right: 1px solid rgba(233, 185, 99, 0.2);
  border-top: none;            /* override game.css @1100px que añade border-top */
  box-shadow:
    8px 0 40px rgba(0, 0, 0, 0.8),
    1px 0 0 rgba(233, 185, 99, 0.15);
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(.22, .9, .32, 1.04);
}
body.mobile-mode .nav-sidebar.open { transform: translateX(0); }
/* Cuando GSAP toma control, ignorar la transición CSS */
body.mobile-mode .nav-sidebar[style*="transform"] { transition: none; }

/* === Header del drawer === */
body.mobile-mode .mobile-drawer-header {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: calc(18px + var(--m-safe-top)) 16px 16px;
  background:
    radial-gradient(ellipse 200% 100% at 50% 0%, rgba(233,185,99,0.18), transparent 70%),
    linear-gradient(180deg, rgba(122,76,240,0.18), transparent);
  border-bottom: 1px solid rgba(233, 185, 99, 0.18);
  flex-shrink: 0;
  position: relative;
}
body.mobile-mode .mobile-drawer-avatar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(233, 185, 99, 0.4);
}
body.mobile-mode .mobile-drawer-avatar > .race-portrait-img,
body.mobile-mode .mobile-drawer-avatar > .race-portrait-fa {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
body.mobile-mode .vip-crown-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0c674, #b97f2e);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a1a00;
  font-size: 11px;
  border: 2px solid #16092b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
body.mobile-mode .mobile-drawer-info {
  flex: 1;
  min-width: 0;
}
body.mobile-mode .mobile-drawer-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.mobile-mode .mobile-drawer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
body.mobile-mode .mobile-drawer-meta .lvl-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: rgba(233,185,99,0.15);
  border: 1px solid rgba(233,185,99,0.4);
  border-radius: 99px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
body.mobile-mode .mobile-drawer-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
body.mobile-mode .mobile-drawer-close:active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
  transform: scale(0.92);
}

/* === Body scrollable del drawer === */
body.mobile-mode .nav-sidebar .drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px 16px;
}
body.mobile-mode .nav-sidebar .drawer-body::-webkit-scrollbar { width: 4px; }
body.mobile-mode .nav-sidebar .drawer-body::-webkit-scrollbar-thumb {
  background: rgba(233, 185, 99, 0.25);
  border-radius: 4px;
}

/* Section label — override game.css @1100px que las oculta con display:none */
body.mobile-mode .nav-sidebar .nav-section-label,
body.mobile-mode .nav-sidebar .drawer-body .nav-section-label {
  display: block !important;
  font-family: var(--font-title);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.55;
  padding: 14px 12px 6px;
  font-weight: 700;
  border: none;
  margin: 0;
  background: transparent;
}
body.mobile-mode .nav-sidebar .drawer-body > .nav-section-label:first-child {
  padding-top: 6px;
}

/* Nav items — flex ROW horizontal (override game.css mobile media que pone column) */
body.mobile-mode .nav-sidebar .nav-item {
  display: flex;
  flex-direction: row;        /* CRÍTICO: game.css @media 1100px aplicaba column */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 48px;
  min-width: 0;                /* override min-width: 70px del desktop mobile media */
  width: auto;
  padding: 0 14px;
  margin: 0 0 2px;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  border: none;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.08s;
  position: relative;
}
body.mobile-mode .nav-sidebar .nav-item:active {
  background: rgba(233, 185, 99, 0.1);
  transform: scale(0.985);
}
body.mobile-mode .nav-sidebar .nav-item.active {
  background: linear-gradient(90deg,
    rgba(233, 185, 99, 0.22) 0%,
    rgba(233, 185, 99, 0.04) 100%);
  color: var(--gold);
  font-weight: 600;
}
body.mobile-mode .nav-sidebar .nav-item.active::before {
  content: '' !important;        /* desktop @1100px hace display:none de este pseudo */
  display: block !important;
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(233,185,99,0.7);
}

/* Icono Phosphor */
body.mobile-mode .nav-sidebar .nav-item > i.ph,
body.mobile-mode .nav-sidebar .nav-item > i[class*="ph-"]:first-child {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: inherit;
  opacity: 0.9;
  flex-shrink: 0;
}
body.mobile-mode .nav-sidebar .nav-item.active > i.ph:first-child {
  opacity: 1;
}
body.mobile-mode .nav-sidebar .nav-item span {
  flex: 1;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron a la derecha */
body.mobile-mode .nav-sidebar .nav-item .nav-chev {
  font-size: 14px;
  opacity: 0.3;
  flex-shrink: 0;
}
body.mobile-mode .nav-sidebar .nav-item.active .nav-chev {
  opacity: 0.7;
  color: var(--gold);
}

/* Badges en items (HOT, NEW) */
body.mobile-mode .nav-sidebar .nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
body.mobile-mode .nav-sidebar .nav-badge-gold {
  background: linear-gradient(180deg, #f0c674, #b97f2e);
  color: #2a1a00;
  box-shadow: 0 2px 6px rgba(233,185,99,0.4);
}
body.mobile-mode .nav-sidebar .nav-badge-mint {
  background: linear-gradient(180deg, #5be3a8, #2a8b5e);
  color: #0a1a10;
  box-shadow: 0 2px 6px rgba(91,227,168,0.3);
}

/* VIP item — destaca */
body.mobile-mode .nav-sidebar .nav-item-vip {
  background: linear-gradient(90deg,
    rgba(233, 185, 99, 0.10),
    transparent);
}
body.mobile-mode .nav-sidebar .nav-item-vip > i.ph-fill {
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(233,185,99,0.5));
}

/* === Footer del drawer (logout) === */
body.mobile-mode .nav-sidebar .drawer-footer {
  flex-shrink: 0;
  padding: 12px 12px calc(14px + var(--m-safe-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.35);
}
body.mobile-mode .drawer-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  background: rgba(225, 80, 90, 0.1);
  border: 1px solid rgba(225, 80, 90, 0.35);
  border-radius: 10px;
  color: #f8838e;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s, transform 0.08s;
}
body.mobile-mode .drawer-logout-btn:active {
  background: rgba(225, 80, 90, 0.2);
  transform: scale(0.98);
}
body.mobile-mode .drawer-logout-btn i {
  font-size: 17px;
}

/* 2.6 Bottom tab — diseño tipo iOS/Android nativo */
body.mobile-mode .mobile-bottom-tab {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--m-bottom-h) + var(--m-safe-bottom));
  padding: 0 4px var(--m-safe-bottom);
  background:
    linear-gradient(180deg,
      rgba(15, 8, 28, 0.92) 0%,
      rgba(8, 4, 18, 0.99) 100%);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-top: 1px solid rgba(233, 185, 99, 0.18);
  z-index: 50;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}
body.mobile-mode .mob-tab-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans, system-ui, -apple-system);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  position: relative;
  padding: 6px 2px 4px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: color 0.18s, transform 0.1s;
}
body.mobile-mode .mob-tab-btn i {
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  transition: transform 0.18s;
}
body.mobile-mode .mob-tab-btn span {
  display: block;
  line-height: 1;
  font-size: 10px;
}
body.mobile-mode .mob-tab-btn:active {
  transform: scale(0.9);
}
body.mobile-mode .mob-tab-btn:active i {
  transform: scale(1.15);
}

/* Active state */
body.mobile-mode .mob-tab-btn.active {
  color: var(--gold);
}
body.mobile-mode .mob-tab-btn.active i {
  filter: drop-shadow(0 0 6px rgba(233, 185, 99, 0.5));
}
body.mobile-mode .mob-tab-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 10px rgba(233, 185, 99, 0.7);
}
body.mobile-mode .mob-tab-btn.active span {
  font-weight: 700;
}

/* 2.7 Side panel oculto en mobile */
body.mobile-mode .side-panel {
  display: none;
}

/* 2.8 Main area */
body.mobile-mode .main-area {
  grid-area: auto;
  width: 100%;
  max-width: 100%;
  padding: var(--m-pad);
  overflow-x: hidden;
}

/* Page header consistente */
body.mobile-mode .page-header {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .page-header > div:last-child {
  flex-wrap: wrap;
}
body.mobile-mode .page-title {
  font-size: 20px;
  letter-spacing: 0.04em;
}
body.mobile-mode .page-sub {
  font-size: 12px;
}

/* ============================================================================
   3) AUTH — Login/Registro
   ============================================================================ */
body.mobile-mode .auth-scene {
  display: block;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  flex: none;
  padding: 14px;
  background: linear-gradient(180deg, rgba(10, 4, 24, 0.7), rgba(2, 1, 10, 0.95)),
              url('../assets/bg/login.webp') center/cover no-repeat;
}
body.mobile-mode .auth-left {
  background: transparent;
  overflow: visible;
  padding: 16px 0 8px;
  text-align: center;
  align-items: center;
  min-height: auto;
}
body.mobile-mode .auth-left::before,
body.mobile-mode .auth-left::after {
  display: none;
}
body.mobile-mode .auth-logo-img {
  max-width: 240px;
  margin: 0 auto 12px;
}
body.mobile-mode .auth-left .subtitle-hero {
  font-size: 12px;
  letter-spacing: 0.25em;
  margin-bottom: 8px;
}
body.mobile-mode .auth-left p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: none !important;
}
body.mobile-mode .auth-features {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  max-width: 100%;
}
body.mobile-mode .auth-feature {
  padding: 8px 10px;
  background: rgba(20, 10, 40, 0.7);
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .auth-feature i {
  font-size: 14px;
}
body.mobile-mode .auth-feature-text {
  font-size: 10.5px;
  line-height: 1.3;
}
body.mobile-mode .auth-feature-text b {
  font-size: 12px;
}

body.mobile-mode .auth-right {
  background: rgba(10, 5, 18, 0.96);
  border: 1px solid rgba(233, 185, 99, 0.25);
  border-radius: var(--m-radius);
  padding: 20px 16px;
  margin-top: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
body.mobile-mode .auth-right::before {
  display: none;
}
body.mobile-mode .auth-crest-img {
  width: 40px;
  height: 40px;
}
body.mobile-mode .auth-box-title {
  font-size: 17px;
  margin-bottom: 4px;
}
body.mobile-mode .auth-box-sub {
  font-size: 11.5px;
  margin-bottom: 16px;
}
body.mobile-mode .auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px;
  border-radius: var(--m-radius-sm);
  margin-bottom: 16px;
}
body.mobile-mode .auth-tab {
  flex: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13px;
  border-radius: 6px;
  color: var(--text-muted);
}
body.mobile-mode .auth-tab.active {
  background: linear-gradient(180deg, #f0c674, #b97f2e);
  color: #2a1a00;
  box-shadow: 0 2px 10px rgba(233, 185, 99, 0.4);
  text-shadow: none;
}
body.mobile-mode .auth-right .field {
  margin-bottom: 12px;
}
body.mobile-mode .auth-right .input,
body.mobile-mode .auth-right input {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .auth-right button[type="submit"],
body.mobile-mode .auth-right .btn-lg {
  min-height: 50px;
  font-size: 14px;
  border-radius: var(--m-radius-sm);
  margin-top: 4px;
}
body.mobile-mode .auth-ref-banner {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--m-radius-sm);
}

/* Auth en pantalla muy chica */
@media (max-width: 380px) {
  body.mobile-mode .auth-features { grid-template-columns: 1fr; }
}

/* ============================================================================
   4) CHARACTER CREATION
   ============================================================================ */
body.mobile-mode .creation-scene {
  flex: none;
  overflow: visible;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 14px;
  background: rgba(10, 4, 20, 0.95);
}
body.mobile-mode .creation-grid {
  display: block;
  grid-template-columns: 1fr;
}
body.mobile-mode .creation-header .title-hero {
  font-size: 24px;
  letter-spacing: 0.05em;
}
body.mobile-mode .creation-header .subtitle-hero {
  font-size: 12px;
}
body.mobile-mode .creation-header p {
  font-size: 12.5px;
  line-height: 1.55;
}

/* Preview portrait — arriba */
body.mobile-mode .character-preview {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .preview-portrait {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
}
body.mobile-mode .preview-portrait > * {
  width: 100% !important;
  height: 100% !important;
}
body.mobile-mode .character-preview .title-hero {
  font-size: 22px;
}
body.mobile-mode .character-preview .subtitle-hero {
  font-size: 11px;
  letter-spacing: 0.15em;
}

/* Race list — 2 columnas */
body.mobile-mode .race-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .race-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: 10px 8px;
  min-height: auto;
  border-radius: var(--m-radius-sm);
  cursor: pointer;
}
body.mobile-mode .race-card .race-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 6px;
  border-radius: 50%;
  overflow: hidden;
}
body.mobile-mode .race-card .race-icon > * {
  width: 100% !important;
  height: 100% !important;
}
body.mobile-mode .race-card .race-name {
  font-size: 12.5px;
}
body.mobile-mode .race-card .race-desc {
  font-size: 10px;
  line-height: 1.3;
  margin: 4px 0;
}
body.mobile-mode .race-card .race-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
}
body.mobile-mode .race-card .race-stat {
  font-size: 9.5px;
  padding: 2px 5px;
}
@media (max-width: 380px) {
  body.mobile-mode .race-list { grid-template-columns: 1fr; }
  body.mobile-mode .race-card {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 12px;
  }
  body.mobile-mode .race-card .race-icon { margin: 0; flex-shrink: 0; }
  body.mobile-mode .race-card .race-info { flex: 1; }
  body.mobile-mode .race-card .race-stats { justify-content: flex-start; }
}

/* ============================================================================
   5) CHARACTER SHEET (tab Personaje)
   ============================================================================ */
body.mobile-mode .sheet-grid {
  display: block;
  grid-template-columns: 1fr;
}
body.mobile-mode .sheet-grid > .flex-col {
  gap: 12px;
  margin-bottom: 12px;
}
body.mobile-mode .sheet-grid .grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
body.mobile-mode .hero-portrait {
  padding: 16px;
  border-radius: var(--m-radius);
}
body.mobile-mode .portrait-circle {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}
body.mobile-mode .portrait-circle > * {
  width: 100% !important;
  height: 100% !important;
}
body.mobile-mode .hero-name {
  font-size: 22px;
}
body.mobile-mode .hero-title-line {
  font-size: 12.5px;
}

body.mobile-mode .stat-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.mobile-mode .attr-row {
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--m-radius-sm);
  background: rgba(0, 0, 0, 0.3);
}
body.mobile-mode .attr-add {
  width: 36px;
  height: 36px;
  min-width: 36px;
}
body.mobile-mode .derived-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .derived-cell {
  padding: 10px;
  gap: 8px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .derived-cell .d-val { font-size: 16px; }
body.mobile-mode .derived-cell i { font-size: 16px; }

/* Claim card */
body.mobile-mode .claim-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .claim-card-icon-wrap {
  margin: 0 auto;
}
body.mobile-mode .claim-card-action {
  width: 100%;
}
body.mobile-mode .claim-card-amount {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
body.mobile-mode .claim-amount-num { font-size: 26px; }
body.mobile-mode .claim-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.mobile-mode .cm-stat {
  font-size: 11px;
  flex: 1 1 calc(33% - 6px);
}

/* ============================================================================
   6) INVENTORY — Mochila + Equipo
   ============================================================================ */
/* 2026-05-15: layout compacto mobile-only — split 2 columnas + grid denso.
   Reemplaza el layout viejo (vertical paperdoll → bag) por un diseño estilo
   "AI inventory" con avatar/stats a la izquierda y equipment a la derecha. */
body.mobile-mode .inv-m-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
/* 2026-05-15: header en 2 filas — fila 1: título + descripción inline,
   fila 2: tabs Mochila/Almacén. Antes era título-arriba / tabs-derecha. */
body.mobile-mode .inv-m-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(28,19,52,0.6), rgba(10,5,24,0.7));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
body.mobile-mode .inv-m-title-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.mobile-mode .inv-m-title-ico {
  font-size: 24px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(233,185,99,0.4));
  flex-shrink: 0;
}
body.mobile-mode .inv-m-title-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
body.mobile-mode .inv-m-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.08em;
  line-height: 1;
  flex-shrink: 0;
}
body.mobile-mode .inv-m-sub-sep {
  color: rgba(255,255,255,0.3);
  font-size: 11px;
  flex-shrink: 0;
}
body.mobile-mode .inv-m-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
body.mobile-mode .inv-m-tabs {
  display: flex;
  gap: 6px;
  width: 100%;
}
body.mobile-mode .inv-m-tabs > .inv-m-tab { flex: 1; justify-content: center; padding: 7px 10px; font-size: 11.5px; }
body.mobile-mode .inv-m-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-title);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
}
body.mobile-mode .inv-m-tab > i { font-size: 12px; }
body.mobile-mode .inv-m-tab > b {
  margin-left: 2px;
  padding: 1px 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}
body.mobile-mode .inv-m-tab.active {
  background: linear-gradient(180deg, rgba(233,185,99,0.30), rgba(233,185,99,0.10));
  border-color: rgba(233,185,99,0.55);
  color: var(--gold);
}
body.mobile-mode .inv-m-tab.active > b { background: rgba(233,185,99,0.28); color: var(--gold); }
body.mobile-mode .inv-m-tab-overflow.active {
  background: linear-gradient(180deg, rgba(255,138,138,0.25), rgba(255,138,138,0.08));
  border-color: rgba(255,138,138,0.5);
  color: #ff8a8a;
}

/* TOP SPLIT — avatar+stats LEFT, equipment RIGHT */
body.mobile-mode .inv-m-top {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 10px;
  align-items: stretch;
}
body.mobile-mode .inv-m-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(28,19,52,0.55), rgba(10,5,24,0.75));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
body.mobile-mode .inv-m-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 130px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(184,132,255,0.25), rgba(255,200,87,0.15));
  border: 3px solid rgba(255,200,87,0.4);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
body.mobile-mode .inv-m-avatar .race-portrait-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}
body.mobile-mode .inv-m-avatar .race-portrait-fa { font-size: 56px; }
body.mobile-mode .inv-m-lv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
body.mobile-mode .inv-m-lv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-title);
  font-weight: 800;
}
body.mobile-mode .inv-m-lv-num { font-size: 14px; color: #fff; }
body.mobile-mode .inv-m-lv-pct { font-size: 11px; color: var(--gold); }
body.mobile-mode .inv-m-xp-bar {
  height: 5px;
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
body.mobile-mode .inv-m-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #b884ff, #ffc857);
  border-radius: inherit;
  transition: width 0.4s ease;
}
body.mobile-mode .inv-m-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding: 0 2px;
}
body.mobile-mode .inv-m-stat {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
body.mobile-mode .inv-m-stat > i { font-size: 13px; color: rgba(255,255,255,0.55); text-align: center; }
body.mobile-mode .inv-m-stat-l {
  color: rgba(255,255,255,0.7);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
}
body.mobile-mode .inv-m-stat-v {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  font-size: 11.5px;
}
body.mobile-mode .inv-m-see-stats {
  margin-top: 6px;
  padding: 7px 10px;
  background: linear-gradient(135deg, rgba(255,200,87,0.18), rgba(255,200,87,0.06));
  border: 1px solid rgba(255,200,87,0.4);
  border-radius: 8px;
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
body.mobile-mode .inv-m-see-stats:active { transform: scale(0.97); }

body.mobile-mode .inv-m-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(28,19,52,0.55), rgba(10,5,24,0.75));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
body.mobile-mode .inv-m-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
body.mobile-mode .inv-m-section-head > i { font-size: 13px; }
body.mobile-mode .inv-m-section-head-race { color: #c39dff; }
body.mobile-mode .inv-m-section-head-race > i { color: #b884ff; }
body.mobile-mode .inv-m-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
body.mobile-mode .inv-m-slot {
  aspect-ratio: 1 / 1;
  padding: 4px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  border: 1.5px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  overflow: hidden;
}
body.mobile-mode .inv-m-slot:active { transform: scale(0.93); }
body.mobile-mode .inv-m-slot.filled {
  border-color: rgba(233,185,99,0.5);
  background: linear-gradient(180deg, rgba(20,12,40,0.92), rgba(10,6,20,0.95));
}
body.mobile-mode .inv-m-slot.rb-common.filled    { border-color: #b4b4c8; }
body.mobile-mode .inv-m-slot.rb-uncommon.filled  { border-color: #5fd684; }
body.mobile-mode .inv-m-slot.rb-rare.filled      { border-color: #5aa6ff; }
body.mobile-mode .inv-m-slot.rb-epic.filled      { border-color: #b884ff; }
body.mobile-mode .inv-m-slot.rb-legendary.filled { border-color: #ffaa50; }
body.mobile-mode .inv-m-slot.rb-mythic.filled    { border-color: #ff5a78; }
body.mobile-mode .inv-m-slot.inv-m-slot-race.filled { border-color: #b884ff; }
body.mobile-mode .inv-m-slot-empty {
  font-size: 22px;
  color: rgba(255,255,255,0.25);
}
body.mobile-mode .inv-m-slot-label {
  display: none; /* el title attr es suficiente en este layout — los iconos son claros */
}
body.mobile-mode .inv-m-slot .race-slot-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #c39dff;
  font-size: 22px;
}

/* Cinturón de pociones más compacto en mobile */
body.mobile-mode .inv-m-potion-belt {
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 11px;
}
body.mobile-mode .inv-m-potion-belt > i:first-child { font-size: 16px; }
body.mobile-mode .inv-m-potion-belt .potion-belt-soon { font-size: 8.5px; padding: 2px 6px; }

/* Grid de items más denso (5 columnas) */
body.mobile-mode .inv-m-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
body.mobile-mode .inv-m-grid .inv-cell {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  font-size: 22px;
}

/* Filtros más compactos */
body.mobile-mode .inv-m-filters { padding: 8px; }
body.mobile-mode .inv-m-filters .pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
body.mobile-mode .inv-m-filters .pf-chip {
  padding: 4px 8px;
  font-size: 10.5px;
}
body.mobile-mode .inv-m-filters .pf-chip > i { font-size: 9px; }

/* Modal "Ver estadísticas" (mobile) */
body.mobile-mode .ifs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ifs-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.ifs-cell > i { font-size: 18px; color: var(--gold); margin-bottom: 2px; }
.ifs-val { font-family: var(--font-mono); font-weight: 800; color: #fff; font-size: 14px; }
.ifs-lbl { font-family: var(--font-title); font-size: 10.5px; color: rgba(255,255,255,0.6); letter-spacing: 0.05em; text-transform: uppercase; }

/* Asegurar que el layout viejo / desktop v2 NO renderice en mobile (mobile usa su propio inv-m-root) */
body.mobile-mode .inv-m-root ~ .inv-layout,
body.mobile-mode .inv-m-root ~ .inv-desktop-v2,
body.mobile-mode .inv-m-root ~ .page-header { display: none !important; }

body.mobile-mode .inv-layout {
  display: block;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}
body.mobile-mode .paperdoll,
body.mobile-mode .inv-bag {
  width: 100%;
  max-width: 100%;
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .paperdoll {
  min-height: auto;
  margin-bottom: 12px;
}

/* Paperdoll figure */
body.mobile-mode .paperdoll-figure {
  width: 120px;
  height: 160px;
  margin: 6px auto 4px;
  font-size: 60px;
}
body.mobile-mode .paperdoll-figure .race-portrait-fa { font-size: 64px; }

/* === Equipment slots — 4 cols con espacio para labels === */
body.mobile-mode .equip-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 8px;
  row-gap: 28px;          /* clave: espacio para que slot-label NO se tape */
  margin-top: 18px;
  margin-bottom: 8px;
  padding: 0 4px;
}

/* Cada slot: card con padding + label INSIDE acceso visible */
body.mobile-mode .equip-slot {
  aspect-ratio: 1 / 1;
  padding: 6px;
  font-size: 22px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  cursor: pointer;
}
body.mobile-mode .equip-slot:active {
  transform: scale(0.94);
  border-color: var(--gold);
}
body.mobile-mode .equip-slot.filled {
  border-color: rgba(233, 185, 99, 0.45);
  background: linear-gradient(180deg, rgba(20, 12, 40, 0.9), rgba(10, 6, 20, 0.95));
  box-shadow: 0 2px 10px rgba(233, 185, 99, 0.15);
}

/* Icono cuando slot está vacío */
body.mobile-mode .equip-slot .equip-slot-empty-icon {
  font-size: 24px;
  color: var(--text-dim);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen del item dentro del slot — position:absolute desacopla del flow del cell
   para que el aspect-ratio 1/1 siempre mande y todos los cuadrados queden iguales,
   tengan imagen o solo icono. (Mismo fix que .inv-cell.) */
body.mobile-mode .equip-slot .item-image {
  position: absolute;
  inset: 6px;
  width: auto;
  height: auto;
}

/* Slot label — debajo del slot, con espacio respiración */
body.mobile-mode .equip-slot .slot-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  font-family: var(--font-title);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  line-height: 1;
  pointer-events: none;
}
body.mobile-mode .equip-slot.filled .slot-label {
  color: var(--gold);
  opacity: 0.9;
}

/* === Bag grid — celdas que NO hacen overflow === */
body.mobile-mode .inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin-top: 8px;
}
body.mobile-mode .inv-cell {
  aspect-ratio: 1 / 1;
  padding: 4px;
  font-size: 16px;
  min-width: 0;
  width: auto;
  border-width: 1.5px;
  border-radius: 10px;
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  /* Forzar layout consistente — flex centra los iconos y la imagen va position:absolute
     para que no afecte el alto del cell (bug: cells con item-image se veían más altas) */
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
body.mobile-mode .inv-cell .item-image {
  /* position:absolute desacopla la imagen del flow del cell, así el aspect-ratio 1/1
     siempre manda y el cuadrado nunca crece por culpa del contenido. */
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
}
body.mobile-mode .inv-cell .qty {
  font-size: 9.5px;
  padding: 1px 4px;
  bottom: 2px;
  right: 2px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 4px;
}
body.mobile-mode .inv-cell .equipped-mark,
body.mobile-mode .inv-cell .lock-mark {
  width: 16px;
  height: 16px;
  font-size: 9px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.mobile-mode .inv-cell .equipped-mark {
  background: var(--mint);
  color: #0a1a10;
  top: 2px;
  left: 2px;
}
body.mobile-mode .inv-cell .lock-mark {
  background: rgba(0, 0, 0, 0.85);
  color: var(--gold);
  top: 2px;
  right: 2px;
  border: 1px solid var(--gold);
}

@media (max-width: 480px) {
  body.mobile-mode .inv-grid { grid-template-columns: repeat(5, 1fr); }
  body.mobile-mode .equip-slots {
    grid-template-columns: repeat(4, 1fr);   /* mantiene 4 cols incluso en 480 */
    row-gap: 26px;
    column-gap: 6px;
  }
  body.mobile-mode .equip-slot { padding: 5px; }
  body.mobile-mode .equip-slot .slot-label { font-size: 8.5px; }
}
@media (max-width: 380px) {
  body.mobile-mode .inv-grid { grid-template-columns: repeat(4, 1fr); }
  body.mobile-mode .equip-slots {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 24px;
    column-gap: 5px;
  }
  body.mobile-mode .equip-slot .slot-label { font-size: 8px; letter-spacing: 0.05em; }
}

/* ============================================================================
   7) MARKET / BAZAR — mobile rediseñado
   ============================================================================ */

/* Summary card */
body.mobile-mode .market-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .msum-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
body.mobile-mode .msum-cell { padding: 10px 6px 8px; }
body.mobile-mode .msum-cell > i { font-size: 17px; }
body.mobile-mode .msum-val { font-size: 17px; }
body.mobile-mode .msum-lbl { font-size: 9px; }

/* Tabs */
body.mobile-mode .market-tabs-row {
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
}
body.mobile-mode .market-tab-btn {
  flex: 1 1 calc(50% - 4px);
  min-height: 42px;
  padding: 8px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
body.mobile-mode .market-tab-btn i { font-size: 14px; }
body.mobile-mode .market-tab-count { font-size: 10px; min-width: 18px; height: 18px; }

/* Filter chips horizontal scroll */
body.mobile-mode .market-filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -12px 14px;
  padding: 0 12px 4px;
}
body.mobile-mode .market-filter-row::-webkit-scrollbar { display: none; }
body.mobile-mode .market-filter-row .filter-chip {
  flex: 0 0 auto;
  font-size: 10.5px;
  padding: 7px 12px;
  min-height: 36px;
}
body.mobile-mode .market-filter-row .filter-chip i { font-size: 12px; }

/* Grid 1 col */
body.mobile-mode .market-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Cards mobile — compactas */
body.mobile-mode .market-card {
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  padding: 10px;
  border-radius: var(--m-radius);
}
body.mobile-mode .market-card .market-item-ic {
  width: 56px;
  height: 56px;
  padding: 5px;
}
body.mobile-mode .market-card .market-item-ic > i { font-size: 26px; }
body.mobile-mode .market-card .mi-name { font-size: 13px; }
body.mobile-mode .mi-rarity-pill,
body.mobile-mode .mi-meta-pill { font-size: 9.5px; padding: 1px 6px; }
body.mobile-mode .market-card .mi-seller { font-size: 10.5px; }
body.mobile-mode .market-card .mi-price-val { font-size: 14px; }
body.mobile-mode .market-card .mi-price i { font-size: 14px; }
body.mobile-mode .market-card .mi-view-btn,
body.mobile-mode .market-card .mi-cancel-btn {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

@media (max-width: 380px) {
  body.mobile-mode .market-card {
    grid-template-columns: 50px 1fr auto;
    padding: 8px;
  }
  body.mobile-mode .market-card .market-item-ic { width: 50px; height: 50px; }
  body.mobile-mode .market-card .mi-name { font-size: 12.5px; }
}

/* === Buy panel mobile === */
body.mobile-mode .market-buy-panel {
  padding: 12px;
}
body.mobile-mode .mbp-header { font-size: 10px; padding-bottom: 8px; margin-bottom: 10px; }
body.mobile-mode .mbp-row { font-size: 12px; padding: 3px 0; }
body.mobile-mode .mbp-qty-label { font-size: 10px; }

/* Stepper en mobile: stack 2 filas */
body.mobile-mode .mbp-stepper {
  grid-template-columns: 36px 32px 1fr 32px 36px;
  gap: 3px;
  padding: 3px;
}
body.mobile-mode .mbp-step-btn { font-size: 11px; min-height: 32px; }
body.mobile-mode .mbp-max-btn { display: none; }    /* MAX se accede tocando "+10" varias veces o mejor agregar abajo */
body.mobile-mode .mbp-qty-input { font-size: 16px; min-height: 32px; }

/* Botón MAX como fila aparte en mobile */
body.mobile-mode .mbp-qty-row {
  position: relative;
}
body.mobile-mode .mbp-qty-row::after {
  content: '';
  display: block;
  height: 4px;
}
body.mobile-mode .mbp-stepper {
  position: relative;
}
/* Mostrar MAX como botón completo abajo */
body.mobile-mode .mbp-stepper {
  grid-template-columns: 38px 32px 1fr 32px 38px;
}

body.mobile-mode .mbp-total .mbp-val { font-size: 18px; }
body.mobile-mode .mbp-error { font-size: 11px; padding: 7px 10px; }

/* Tip card */
body.mobile-mode .item-tip-card { padding: 10px 12px; }
body.mobile-mode .item-tip-card > i { font-size: 16px; }
body.mobile-mode .item-tip-text { font-size: 12px; }

/* ============================================================================
   8) STORE / TIENDA
   ============================================================================ */
body.mobile-mode .store-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
body.mobile-mode .store-tab {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  min-height: 42px;
  font-size: 11px;
  padding: 8px 10px;
}
body.mobile-mode .store-tab i { font-size: 13px; }
body.mobile-mode .store-tab span { font-size: 10.5px; }
body.mobile-mode .store-tab-count { font-size: 10px; min-width: 18px; height: 18px; }

body.mobile-mode .premium-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .premium-pack {
  padding: 12px 10px;
  border-radius: var(--m-radius);
}
body.mobile-mode .pack-icon-wrap {
  width: 56px;
  height: 56px;
  font-size: 26px;
  margin: 0 auto;
}
body.mobile-mode .pack-name { font-size: 13px; }
body.mobile-mode .pack-desc { font-size: 10.5px; line-height: 1.35; }
body.mobile-mode .pack-tier-label { font-size: 9px; padding: 2px 6px; }
body.mobile-mode .pack-price-big { font-size: 22px; }
body.mobile-mode .pack-contents .pc-row { font-size: 11px; }
body.mobile-mode .pack-ribbon { font-size: 9px; padding: 2px 8px; }

body.mobile-mode .resource-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .resource-pack {
  padding: 12px 10px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .resource-pack-icon {
  width: 44px;
  height: 44px;
  font-size: 22px;
}
body.mobile-mode .resource-pack-amount { font-size: 18px; }
body.mobile-mode .resource-pack-name { font-size: 11.5px; }

body.mobile-mode .utility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
body.mobile-mode .utility-pack {
  padding: 10px;
  gap: 10px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .utility-pack-icon {
  width: 40px;
  height: 40px;
  font-size: 18px;
}
body.mobile-mode .utility-pack-name { font-size: 13px; }
body.mobile-mode .utility-pack-desc { font-size: 11px; }
body.mobile-mode .utility-pack-price { font-size: 12px; }

@media (max-width: 380px) {
  body.mobile-mode .premium-grid,
  body.mobile-mode .resource-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   9) SKILLS — mobile específico para nuevo diseño
   ============================================================================ */

/* Summary card */
body.mobile-mode .skills-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .skills-summary-card .ssum-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
body.mobile-mode .skills-summary-card .ssum-cell {
  padding: 10px 6px 8px;
}
body.mobile-mode .skills-summary-card .ssum-cell > i { font-size: 17px; }
body.mobile-mode .skills-summary-card .ssum-val { font-size: 18px; }
body.mobile-mode .skills-summary-card .ssum-frac { font-size: 12px; }
body.mobile-mode .skills-summary-card .ssum-lbl { font-size: 9px; }

/* Tree cards horizontal scroll */
body.mobile-mode .skill-trees-section { margin-bottom: 14px; }
body.mobile-mode .skill-trees-section-title { font-size: 10px; margin-bottom: 8px; }
body.mobile-mode .skill-trees-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 8px;
  padding: 0 12px 4px;
  margin: 0 -12px;
  scroll-snap-type: x mandatory;
}
body.mobile-mode .skill-trees-row::-webkit-scrollbar { display: none; }
body.mobile-mode .tree-card {
  flex: 0 0 auto;
  width: 110px;
  padding: 12px 8px 10px;
  scroll-snap-align: start;
}
body.mobile-mode .tree-card-icon { width: 42px; height: 42px; font-size: 19px; }
body.mobile-mode .tree-card-name { font-size: 11px; }
body.mobile-mode .tree-card-frac { font-size: 10.5px; }

/* Tree banner */
body.mobile-mode .skill-tree-banner {
  padding: 12px 14px;
  border-radius: var(--m-radius-sm);
  gap: 12px;
  margin-bottom: 12px;
}
body.mobile-mode .stb-icon { width: 48px; height: 48px; font-size: 22px; }
body.mobile-mode .stb-name { font-size: 16px; letter-spacing: 0.06em; }
body.mobile-mode .stb-desc { font-size: 12px; }

/* Filters */
body.mobile-mode .skill-filter-row {
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
body.mobile-mode .skill-filter-row .filter-chip {
  flex: 1 1 calc(50% - 4px);
  font-size: 10.5px;
  padding: 7px 8px;
  min-height: 38px;
}
body.mobile-mode .skill-filter-row .filter-chip i { font-size: 12px; }

/* Grid 1 col en mobile pequeño, 2 cols en tablet */
body.mobile-mode .skill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 481px) and (max-width: 1024px) {
  body.mobile-mode .skill-grid { grid-template-columns: 1fr 1fr; }
}

/* Skill cards */
body.mobile-mode .skill-node-pro {
  padding: 14px 12px 12px;
  gap: 8px;
  border-radius: var(--m-radius);
}
body.mobile-mode .skn-icon-wrap { margin: 4px auto 0; }
body.mobile-mode .skn-icon { width: 56px; height: 56px; font-size: 24px; border-radius: 12px; }
body.mobile-mode .skn-lv-badge { font-size: 10px; padding: 2px 6px; }
body.mobile-mode .skn-name { font-size: 13.5px; }
body.mobile-mode .skn-desc { font-size: 12px; padding: 2px 0; line-height: 1.45; }
body.mobile-mode .skn-status { font-size: 8.5px; padding: 2px 6px; top: 8px; right: 8px; }
body.mobile-mode .skn-status i { font-size: 9px; }
body.mobile-mode .skn-tag { font-size: 9.5px; padding: 2px 6px; }
body.mobile-mode .skn-action .btn { font-size: 11.5px; min-height: 40px; }
body.mobile-mode .lv-dot { width: 7px; height: 7px; }

@media (max-width: 380px) {
  body.mobile-mode .skills-summary-card .ssum-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   10) QUESTS — mobile (matchea rediseño 2026-05-08d)
   ============================================================================ */

/* === Summary card === */
body.mobile-mode .quests-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .qsum-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
body.mobile-mode .qsum-cell { padding: 12px 6px 10px; min-height: 84px; }
body.mobile-mode .qsum-cell > i { font-size: 18px; }
body.mobile-mode .qsum-val { font-size: 19px; }
body.mobile-mode .qsum-lbl { font-size: 9px; letter-spacing: 0.12em; }

/* === Next quest countdown === */
body.mobile-mode .next-quest-countdown { padding: 10px 12px; }
body.mobile-mode .nqc-icon { width: 36px; height: 36px; font-size: 16px; }
body.mobile-mode .nqc-time { font-size: 16px; }
body.mobile-mode .nqc-label { font-size: 9.5px; }

/* === Tabs === */
body.mobile-mode .quest-tabs-row {
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
body.mobile-mode .quest-tab-btn {
  flex: 1 1 calc(33% - 6px);
  min-height: 42px;
  padding: 8px 6px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  gap: 4px;
}
body.mobile-mode .quest-tab-btn i { font-size: 13px; }
body.mobile-mode .quest-tab-count {
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  padding: 0 5px;
}

/* === Grid (1 col en mobile) === */
body.mobile-mode .quest-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* === Quest card === */
body.mobile-mode .quest-card-pro {
  padding: 14px 14px 14px 18px;
  gap: 10px;
  border-radius: var(--m-radius);
}

/* Header */
body.mobile-mode .qc-header { gap: 6px; }
body.mobile-mode .qc-type {
  font-size: 9.5px;
  padding: 3px 9px;
  letter-spacing: 0.14em;
}
body.mobile-mode .qc-type i { font-size: 11px; }
body.mobile-mode .qc-chip {
  font-size: 9px;
  padding: 2px 8px;
  letter-spacing: 0.08em;
}
body.mobile-mode .qc-chip i { font-size: 10px; }
body.mobile-mode .qc-header-meta { gap: 4px; }

/* Title */
body.mobile-mode .qc-title-block { gap: 4px; }
body.mobile-mode .qc-name { font-size: 15.5px; line-height: 1.2; }
body.mobile-mode .qc-desc { font-size: 12px; line-height: 1.45; }

/* Status */
body.mobile-mode .qc-status { padding: 7px 10px; gap: 6px; }
body.mobile-mode .qc-status > i { font-size: 14px; }
body.mobile-mode .qc-status-label { font-size: 9px; letter-spacing: 0.1em; }
body.mobile-mode .qc-status-val { font-size: 12.5px; }
body.mobile-mode .qc-status-ready .qc-status-label { font-size: 10.5px; }

/* Section titles */
body.mobile-mode .qc-section { gap: 6px; }
body.mobile-mode .qc-section-title { font-size: 9.5px; gap: 6px; letter-spacing: 0.14em; }
body.mobile-mode .qc-section-title i { font-size: 11px; }

/* Overall */
body.mobile-mode .qc-overall { padding: 9px 11px; gap: 6px; }
body.mobile-mode .qc-overall-label { font-size: 9.5px; }
body.mobile-mode .qc-overall-pct { font-size: 13px; }
body.mobile-mode .qc-bar { height: 7px; }

/* Objectives */
body.mobile-mode .qc-objectives-list { gap: 6px; }
body.mobile-mode .qc-obj-row {
  padding: 9px 11px;
  font-size: 11.5px;
  gap: 8px;
  grid-template-columns: 26px 1fr;
}
body.mobile-mode .qc-obj-row-pro {
  padding: 9px 11px;
  gap: 8px;
  grid-template-columns: 26px 1fr auto;
}
body.mobile-mode .qc-obj-icon { width: 26px; height: 26px; font-size: 13px; }
body.mobile-mode .qc-obj-text { font-size: 11.5px; line-height: 1.35; }
body.mobile-mode .qc-obj-counter { font-size: 11px; min-width: 48px; }
body.mobile-mode .qc-obj-counter i { font-size: 16px; }
body.mobile-mode .qc-obj-bar { height: 3px; }

/* Rewards: 2 cols en tablet, 1 col en celular pequeño */
body.mobile-mode .qc-rewards-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body.mobile-mode .qc-reward {
  padding: 7px 10px;
  gap: 8px;
  grid-template-columns: 28px 1fr;
}
body.mobile-mode .qc-reward > i {
  width: 28px;
  height: 28px;
  font-size: 18px;
}
body.mobile-mode .qcr-val { font-size: 12.5px; }
body.mobile-mode .qcr-lbl { font-size: 8px; letter-spacing: 0.12em; }

/* Action */
body.mobile-mode .qc-action .btn { font-size: 12px; min-height: 44px; }
body.mobile-mode .qc-action-progress { min-height: 44px; }
body.mobile-mode .qc-abandon-btn { flex: 0 0 44px; width: 44px; }

/* Pantallas más chicas: 1 col rewards, header se apila si hace falta */
@media (max-width: 420px) {
  body.mobile-mode .qc-rewards-grid { grid-template-columns: 1fr; }
  body.mobile-mode .qc-rewards-grid > .qc-reward:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 360px) {
  body.mobile-mode .quest-tab-btn { font-size: 9.5px; padding: 8px 4px; }
  body.mobile-mode .qc-header { flex-wrap: wrap; }
  body.mobile-mode .qc-header-meta { width: 100%; justify-content: flex-start; }
}

/* ============================================================================
   11) WORLD MAP — mobile rediseñado
   ============================================================================ */

/* Summary card */
body.mobile-mode .world-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .wsum-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
body.mobile-mode .wsum-cell { padding: 10px 6px 8px; }
body.mobile-mode .wsum-cell > i { font-size: 17px; }
body.mobile-mode .wsum-val { font-size: 18px; }
body.mobile-mode .wsum-cell.is-current .wsum-val { font-size: 12px; }
body.mobile-mode .wsum-lbl { font-size: 9px; }

/* Layout — bloque (sin grid 2-col) */
body.mobile-mode .world-layout {
  display: block;
}
/* Mobile: oculta la card sticky derecha (el current zone se ve en el modal o tap zona actual) */
body.mobile-mode .world-layout-pc {
  display: block;
}
body.mobile-mode .world-current-col {
  display: none;
}

/* Section title */
body.mobile-mode .world-section-title { font-size: 10px; }

/* Map grid */
body.mobile-mode .map-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.mobile-mode .zone-card {
  min-height: 170px;        /* alto para que la imagen se vea bien */
  padding: 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .zone-card .zc-overlay {
  /* Aún más sutil en mobile, dejando ver el fondo */
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(15,8,30,0.45) 50%,
    rgba(10,5,20,0.95) 100%);
}
body.mobile-mode .zc-icon { width: 38px; height: 38px; font-size: 17px; margin-bottom: 6px; }
body.mobile-mode .zc-name { font-size: 14px; margin-bottom: 4px; }
body.mobile-mode .zc-tag { font-size: 9px; padding: 1px 6px; }
body.mobile-mode .zc-pvp { font-size: 9.5px; }
body.mobile-mode .zc-pvp i { font-size: 10px; }
body.mobile-mode .zc-current-badge { font-size: 9px; padding: 3px 8px; top: 8px; left: 8px; }
body.mobile-mode .zc-lock-badge { font-size: 9.5px; padding: 3px 8px; top: 8px; right: 8px; }

@media (max-width: 380px) {
  body.mobile-mode .map-grid { grid-template-columns: 1fr; }
  body.mobile-mode .zone-card { min-height: 160px; }
}

/* === ZONE MODAL mobile === */
body.mobile-mode .zone-modal-overlay {
  padding: 10px;
  align-items: flex-end;
}
body.mobile-mode .zone-modal {
  max-width: 100%;
  width: 100%;
  max-height: 92vh;
  border-radius: 18px 18px 0 0;
}
body.mobile-mode .zone-modal-close {
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  font-size: 14px;
}
body.mobile-mode .zone-modal-hero { height: 170px; }
body.mobile-mode .zm-icon { width: 52px; height: 52px; font-size: 24px; }
body.mobile-mode .zm-name { font-size: 20px; }
body.mobile-mode .zm-pill { font-size: 9.5px; padding: 2px 8px; }
body.mobile-mode .zm-here-tag { font-size: 8.5px; padding: 2px 7px; }

body.mobile-mode .zone-modal-body {
  padding: 14px 16px;
  gap: 12px;
}
body.mobile-mode .zm-desc { font-size: 12.5px; padding-left: 10px; }

/* Stats: 3 cols (2026-06-03: era 4 con Peligro; ahora GoldLoss + PvP + ItemLoss) */
body.mobile-mode .zm-stats-grid {
  gap: 5px;
}
body.mobile-mode .zm-stat { padding: 9px 3px 7px; }
body.mobile-mode .zm-stat > i { font-size: 17px; }
body.mobile-mode .zm-stat-val { font-size: 13.5px; }
body.mobile-mode .zm-stat-lbl { font-size: 8px; letter-spacing: 0.06em; }

/* Section title */
body.mobile-mode .zm-section-title { font-size: 10px; }
body.mobile-mode .zm-section-title > i { font-size: 12px; }
body.mobile-mode .zm-section-count { font-size: 10px; min-width: 18px; height: 18px; padding: 0 5px; }

/* Monster row mobile */
body.mobile-mode .zm-monster-row {
  grid-template-columns: 32px 1fr;
  padding: 8px 10px;
  gap: 8px;
}
body.mobile-mode .zmm-icon { width: 32px; height: 32px; font-size: 16px; }

/* Mobile: cuando hay imagen, portrait más chico (56px) y body con padding propio */
body.mobile-mode .zm-monster-row:has(.zmm-icon.has-img) {
  grid-template-columns: 56px 1fr;
  padding: 0 10px 0 0;
  gap: 10px;
}
body.mobile-mode .zmm-icon.has-img {
  width: 56px;
  min-height: 56px;
}
body.mobile-mode .zm-monster-row:has(.zmm-icon.has-img) .zmm-body {
  padding: 8px 0;
}
body.mobile-mode .zmm-name { font-size: 12.5px; }
body.mobile-mode .zmm-boss-tag { font-size: 8px; padding: 1px 5px; }
body.mobile-mode .zmm-stats { font-size: 10.5px; gap: 6px; }
body.mobile-mode .zmm-stat i { font-size: 11px; }

/* Players mobile */
body.mobile-mode .zm-player-row { padding: 7px 10px; font-size: 11.5px; }
body.mobile-mode .zm-player-row > i { font-size: 16px; }
body.mobile-mode .zm-player-meta { font-size: 10.5px; }

/* Territory + tip */
body.mobile-mode .zm-territory-banner { padding: 9px 12px; }
body.mobile-mode .zm-territory-label { font-size: 9px; }
body.mobile-mode .zm-territory-name { font-size: 13px; }
body.mobile-mode .zm-empty-tip { font-size: 11.5px; padding: 9px 11px; }

/* Actions */
body.mobile-mode .zone-modal-actions {
  padding: 12px 16px calc(14px + var(--m-safe-bottom));
}
body.mobile-mode .zone-modal-actions .btn { font-size: 12.5px; min-height: 46px; }
body.mobile-mode .zm-actions-row .btn { font-size: 11.5px; min-height: 44px; }

@media (max-width: 380px) {
  body.mobile-mode .zm-stats-grid { grid-template-columns: 1fr 1fr; }
  body.mobile-mode .zm-actions-row { grid-template-columns: 1fr; }
}
body.mobile-mode .world-layout {
  display: block;
  grid-template-columns: 1fr;
  gap: 12px;
}
body.mobile-mode .world-map {
  width: 100%;
  margin-bottom: 12px;
}
body.mobile-mode .map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .zone-card {
  padding: 10px;
  min-height: 110px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .zone-card .z-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
body.mobile-mode .zone-card .z-name { font-size: 12.5px; }
body.mobile-mode .zone-card .z-tags {
  font-size: 9.5px;
  flex-wrap: wrap;
  gap: 3px;
}
body.mobile-mode .zone-detail {
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .z-big-name { font-size: 18px; }
@media (max-width: 380px) {
  body.mobile-mode .map-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   12) COMBAT
   ============================================================================ */
body.mobile-mode .combat-arena {
  padding: 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .combat-parties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
body.mobile-mode .combatant {
  padding: 10px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .combatant-sprite {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
body.mobile-mode .combatant-name { font-size: 14px; }
body.mobile-mode .combatant-stats { font-size: 11px; flex-wrap: wrap; gap: 6px; }
body.mobile-mode .combat-vs-divider,
body.mobile-mode .combat-vs {
  transform: rotate(90deg);
  margin: 0 auto;
}
body.mobile-mode .combat-log {
  max-height: 160px;
  font-size: 11px;
  padding: 8px 10px;
}
body.mobile-mode .combat-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  position: sticky;
  bottom: calc(var(--m-bottom-h) + var(--m-safe-bottom) + 6px);
  background: rgba(15, 8, 28, 0.95);
  padding: 8px;
  border-radius: var(--m-radius-sm);
  border: 1px solid rgba(233, 185, 99, 0.25);
  z-index: 40;
}
body.mobile-mode .combat-btn {
  padding: 8px;
  min-height: 56px;
  font-size: 11.5px;
}
body.mobile-mode .cb-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

/* ============================================================================
   12.5) CHAT — mobile rediseñado
   ============================================================================ */
body.mobile-mode .chat-pro {
  /* 2026-05-15: incluir safe-area-top también — iOS PWA */
  height: calc(100vh - var(--m-top-h) - var(--m-strip-h) - var(--m-bottom-h) - var(--m-safe-bottom) - var(--m-safe-top) - 80px);
  height: calc(100dvh - var(--m-top-h) - var(--m-strip-h) - var(--m-bottom-h) - var(--m-safe-bottom) - var(--m-safe-top) - 80px);
  min-height: 420px;
  border-radius: var(--m-radius);
}
body.mobile-mode .chat-channels-row {
  padding: 8px;
  gap: 4px;
}
body.mobile-mode .chat-channel-tab {
  min-width: 80px;
  padding: 8px 10px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  gap: 6px;
}
body.mobile-mode .chat-channel-tab i { font-size: 14px; }
body.mobile-mode .chat-body {
  padding: 12px 12px;
  gap: 8px;
}
body.mobile-mode .chat-day-sep span { font-size: 9px; }
body.mobile-mode .chat-msg-group {
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 5px 8px;
}
body.mobile-mode .cmg-avatar { width: 36px; height: 36px; font-size: 16px; }
body.mobile-mode .cmg-vip-crown { width: 16px; height: 16px; font-size: 8px; }
body.mobile-mode .cmg-name { font-size: 13px; }
body.mobile-mode .cmg-level, body.mobile-mode .cmg-time { font-size: 10px; }
body.mobile-mode .cmg-badge { font-size: 9px; padding: 1px 5px; }
body.mobile-mode .cmg-body { font-size: 13px; line-height: 1.45; }
body.mobile-mode .chat-system-msg { font-size: 11.5px; padding: 7px 12px; }

/* Input bar mobile */
body.mobile-mode .chat-input-bar {
  padding: 10px;
  gap: 6px;
}
body.mobile-mode .chat-input-wrap input {
  height: 42px;
  padding: 0 60px 0 14px;
  font-size: 14px;
}
body.mobile-mode .chat-char-count { font-size: 9px; right: 12px; }
body.mobile-mode .chat-send-btn {
  height: 42px;
  padding: 0 14px;
  font-size: 12px;
}
body.mobile-mode .chat-send-btn span { display: none; }
body.mobile-mode .chat-send-btn i { font-size: 16px; }

/* Empty state */
body.mobile-mode .chat-empty { padding: 40px 16px; }
body.mobile-mode .chat-empty i { font-size: 36px; }

/* ============================================================================
   12.6) RANKING — mobile rediseñado
   ============================================================================ */
body.mobile-mode .rank-myrank-card {
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .rmrc-avatar { width: 48px; height: 48px; font-size: 20px; }
body.mobile-mode .rmrc-label { font-size: 9px; }
body.mobile-mode .rmrc-name { font-size: 16px; }
body.mobile-mode .rmrc-pos-num { font-size: 22px; }
body.mobile-mode .rmrc-pos-val { font-size: 11.5px; }

body.mobile-mode .rank-tabs-row {
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
}
body.mobile-mode .rank-tab-btn {
  flex: 1 1 calc(50% - 4px);
  min-height: 42px;
  padding: 8px;
  font-size: 11px;
  gap: 6px;
}
body.mobile-mode .rank-tab-btn i { font-size: 14px; }

/* Podium mobile: stacked más compacto */
body.mobile-mode .rank-podium {
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 6px;
  margin-bottom: 18px;
  padding: 0;
}
body.mobile-mode .rank-podium-card {
  padding: 12px 8px 10px;
  gap: 6px;
}
body.mobile-mode .rank-podium-card.pos-1 { transform: translateY(-8px); }
body.mobile-mode .rpc-trophy i { font-size: 22px; }
body.mobile-mode .rpc-pos-label { font-size: 12px; }
body.mobile-mode .rpc-avatar { width: 48px; height: 48px; font-size: 20px; border-width: 2px; }
body.mobile-mode .rpc-name { font-size: 12px; }
body.mobile-mode .rank-podium-card.pos-1 .rpc-name { font-size: 13px; }
body.mobile-mode .rpc-level { font-size: 10px; }
body.mobile-mode .rpc-value { font-size: 13px; }
body.mobile-mode .rank-podium-card.pos-1 .rpc-value { font-size: 14px; }
body.mobile-mode .rpc-value i { font-size: 13px; }

/* Section title */
body.mobile-mode .rank-section-title { font-size: 10px; }

/* Lista mobile */
body.mobile-mode .rank-row {
  grid-template-columns: 36px 38px 1fr auto;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .rank-pos-num { font-size: 15px; }
body.mobile-mode .rank-row-avatar { width: 38px; height: 38px; font-size: 16px; border-width: 1.5px; }
body.mobile-mode .rank-row-name { font-size: 13px; }
body.mobile-mode .rank-me-tag { font-size: 8.5px; padding: 1px 6px; }
body.mobile-mode .rank-row-level { font-size: 10px; }
body.mobile-mode .rank-row-value { font-size: 13px; }
body.mobile-mode .rank-row-value i { font-size: 13px; }

@media (max-width: 380px) {
  body.mobile-mode .rank-podium {
    grid-template-columns: 1fr;
  }
  body.mobile-mode .rank-podium-card.pos-1 { transform: none; order: -1; }
  body.mobile-mode .rank-podium-card.pos-2 { order: 1; }
  body.mobile-mode .rank-podium-card.pos-3 { order: 2; }
  body.mobile-mode .rank-row {
    grid-template-columns: 28px 36px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }
  body.mobile-mode .rmrc-name { font-size: 14px; }
}

/* ============================================================================
   12.15) COMBAT — mobile rediseñado épico
   ============================================================================ */

/* Info card */
body.mobile-mode .combat-info-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
/* 2026-05-11: 4 columnas en una sola fila en mobile (antes era 2x2). */
body.mobile-mode .cic-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
body.mobile-mode .cic-cell { padding: 8px 3px 6px; min-width: 0; }
body.mobile-mode .cic-cell > i { font-size: 14px; }
body.mobile-mode .cic-val { font-size: 14px; }
body.mobile-mode .cic-frac { font-size: 10px; }
body.mobile-mode .cic-lbl { font-size: 8px; letter-spacing: 0.04em; }
body.mobile-mode .combat-info-card { padding: 8px 8px; }

body.mobile-mode .combat-section-title { font-size: 10px; }
body.mobile-mode .combat-section-meta { font-size: 10.5px; }

/* Monster + Player cards mobile (legacy: cards SIN .cmc-v2) */
body.mobile-mode .combat-monster-card:not(.cmc-v2),
body.mobile-mode .combat-player-card {
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .cmc-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
body.mobile-mode .cpc-avatar { width: 48px; height: 48px; font-size: 18px; }
body.mobile-mode .cmc-name, body.mobile-mode .cpc-name { font-size: 13px; }
body.mobile-mode .cmc-pill { font-size: 9.5px; padding: 1px 7px; }
body.mobile-mode .combat-monster-card:not(.cmc-v2) .cmc-attack-btn,
body.mobile-mode .combat-player-card .cmc-attack-btn {
  grid-column: 1 / -1;
  width: 100%;
  font-size: 12px;
  min-height: 38px;
}

/* =====================================================================
   CMC v2 — Card rediseñada (2026-05-11) overrides para mobile.
   Layout: clickarea (portrait + info) a la izquierda + botón ATACAR a la
   derecha, ambos en una sola fila. NO stackear el botón.
   ===================================================================== */
body.mobile-mode .combat-monster-card.cmc-v2 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--m-radius, 12px);
}
body.mobile-mode .cmc-v2-clickarea {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 9px;
  align-items: center;
  min-width: 0;
}
body.mobile-mode .cmc-v2-portrait {
  width: 72px;
  height: 72px;
  border-radius: 9px;
}
/* Portrait "infinito" en mobile — se apoya a 3 bordes (top/left/bottom) */
body.mobile-mode .combat-monster-card.cmc-v2.has-portrait {
  padding: 0 10px 0 0;
}
body.mobile-mode .combat-monster-card.cmc-v2.has-portrait .cmc-v2-clickarea {
  align-items: stretch;
  gap: 9px;
}
body.mobile-mode .combat-monster-card.cmc-v2.has-portrait .cmc-v2-info {
  padding: 10px 0;
  justify-content: center;
}
body.mobile-mode .combat-monster-card.cmc-v2.has-portrait .cmc-v2-portrait {
  height: auto;
  min-height: 72px;
  align-self: stretch;
  border-radius: 11px 4px 4px 11px;
}
body.mobile-mode .cmc-v2-portrait-fallback { font-size: 28px; }
body.mobile-mode .cmc-v2-portrait-badge {
  width: 19px;
  height: 19px;
  font-size: 10px;
  top: 4px;
  left: 4px;
}
body.mobile-mode .cmc-v2-lvl-bar {
  font-size: 9px;
  padding: 2px 0;
  letter-spacing: 0.04em;
}
body.mobile-mode .cmc-v2-info { gap: 5px; min-width: 0; }
body.mobile-mode .cmc-v2-name-row { gap: 6px; }
body.mobile-mode .cmc-v2-name {
  font-size: 13.5px;
  max-width: 100%;
  letter-spacing: 0.02em;
}
body.mobile-mode .cmc-v2-boss-chip {
  font-size: 9px;
  padding: 1px 6px;
}
body.mobile-mode .cmc-v2-warn-chip {
  font-size: 9.5px;
  padding: 1px 5px;
}
body.mobile-mode .cmc-v2-warn-chip i { font-size: 10px; }
/* Stats: intentan una sola línea; si no entran, wrap a 2 (sin que el botón las tape).
   La grid de la card es "1fr auto" → las chips viven en la columna 1fr, jamás se solapan con el botón. */
body.mobile-mode .cmc-v2-chips {
  gap: 4px;
  flex-wrap: wrap;
  overflow: visible;
}
body.mobile-mode .cmc-v2-chip {
  font-size: 10px;
  padding: 2px 6px;
  gap: 3px;
  flex-shrink: 0;
}
body.mobile-mode .cmc-v2-chip i { font-size: 10px; }
/* Loot btn: en su propia línea, full width disponible */
body.mobile-mode .cmc-v2-loot-btn {
  font-size: 10px;
  padding: 3px 9px;
  gap: 5px;
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
}
body.mobile-mode .cmc-v2-loot-btn i { font-size: 11px; }
body.mobile-mode .cmc-v2-loot-count {
  font-size: 10px;
  margin-left: auto;
  padding-left: 4px;
}
body.mobile-mode .cmc-v2-training-label {
  font-size: 9.5px;
  padding: 2px 6px;
}
body.mobile-mode .cmc-v2-lock-msg {
  font-size: 10px;
  padding: 5px 7px;
  line-height: 1.25;
}
body.mobile-mode .cmc-v2-lock-msg i { font-size: 11px; }
body.mobile-mode .cmc-v2-attack-col {
  align-self: center;
  gap: 4px;
}
body.mobile-mode .combat-monster-card.cmc-v2 .cmc-v2-attack-btn,
body.mobile-mode .cmc-v2-attack-btn {
  grid-column: auto;
  grid-row: auto;
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 72px;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  min-height: 0;
  gap: 3px;
  flex-direction: column;
  align-self: center;
  justify-content: center;
}
/* Cuando hay cap-below, el botón se achica para dar lugar (mantiene horizontal pero pierde altura) */
body.mobile-mode .cmc-v2-attack-col.has-cap .cmc-v2-attack-btn {
  height: 60px;
}
body.mobile-mode .cmc-v2-attack-icon { font-size: 16px; margin-bottom: 0; }
body.mobile-mode .cmc-v2-attack-col.has-cap .cmc-v2-attack-icon { font-size: 14px; }
body.mobile-mode .cmc-v2-attack-label { font-size: 9.5px; line-height: 1; }
body.mobile-mode .cmc-v2-stam {
  font-size: 9px;
  padding: 1px 6px;
  gap: 2px;
}
body.mobile-mode .cmc-v2-stam i { font-size: 8px; }

/* Mobile: si la card tiene cartel de bloqueo/penalty, ocultar stats y loot.
   Solo se muestran nombre + warning chip + mensaje del cartel + botón. */
body.mobile-mode .combat-monster-card.cmc-v2.is-level-locked .cmc-v2-chips,
body.mobile-mode .combat-monster-card.cmc-v2.is-level-locked .cmc-v2-loot-btn,
body.mobile-mode .combat-monster-card.cmc-v2.is-overlevel .cmc-v2-chips,
body.mobile-mode .combat-monster-card.cmc-v2.is-overlevel .cmc-v2-loot-btn,
body.mobile-mode .combat-monster-card.cmc-v2.is-boss-locked .cmc-v2-chips,
body.mobile-mode .combat-monster-card.cmc-v2.is-boss-locked .cmc-v2-loot-btn {
  display: none !important;
}

/* Mobile: ocultar chip cap en stats, mostrar el cap-below debajo del botón */
body.mobile-mode .cmc-v2-chip-cap { display: none; }
body.mobile-mode .cmc-v2-cap-below {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255,200,87,0.10);
  border: 1px solid rgba(255,200,87,0.40);
  color: #ffd54a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0;
}
body.mobile-mode .cmc-v2-cap-below i { font-size: 11px; color: #ffd54a; }
body.mobile-mode .cmc-v2-cap-below.is-full {
  background: rgba(225,80,90,0.18);
  border-color: rgba(225,80,90,0.50);
  color: #ff8d9a;
}
body.mobile-mode .cmc-v2-cap-below.is-full i { color: #ff8d9a; }

/* MDM modal mobile — full width sin padding lateral excesivo */
body.mobile-mode .mdm-overlay { padding: 10px; }
body.mobile-mode .mdm-modal { max-width: 100%; max-height: calc(100vh - 20px); }
body.mobile-mode .mdm-art-name { font-size: 16px; }
body.mobile-mode .mdm-art-rarity { top: 42px; font-size: 10px; }
body.mobile-mode .mdm-art-lvl-pill { font-size: 12px; padding: 3px 10px; }
body.mobile-mode .mdm-body { padding: 14px 14px 16px; }
body.mobile-mode .mdm-desc { font-size: 12.5px; }
body.mobile-mode .mdm-stat-row { font-size: 12.5px; padding: 5px 0; }
body.mobile-mode .mdm-section-title { font-size: 10.5px; }
body.mobile-mode .mdm-loot-item { width: 46px; height: 46px; font-size: 20px; }
body.mobile-mode .mdm-attack-btn { font-size: 14px; padding: 13px; }

/* Arena mobile */
body.mobile-mode .combat-arena-pro {
  padding: 16px 14px;
  border-radius: var(--m-radius);
}

/* Battlefield: stack vertical en mobile */
body.mobile-mode .cap-battlefield {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

body.mobile-mode .cap-side { padding: 12px; gap: 6px; }
body.mobile-mode .cap-portrait-wrap { width: 80px; height: 80px; }
body.mobile-mode .cap-portrait { width: 80px; height: 80px; border-width: 2.5px; }
body.mobile-mode .cap-portrait-enemy { font-size: 36px; }
body.mobile-mode .cap-popup { font-size: 24px; }

body.mobile-mode .cap-name { font-size: 14px; }
body.mobile-mode .cap-meta { font-size: 10.5px; }
body.mobile-mode .cap-bar-row { grid-template-columns: 18px 1fr 56px; gap: 6px; }
body.mobile-mode .cap-bar { height: 10px; }
body.mobile-mode .cap-bar-val { font-size: 10px; }
body.mobile-mode .cap-buff { font-size: 9.5px; }

/* VS pill horizontal en mobile */
body.mobile-mode .cap-vs {
  flex-direction: row;
  padding: 4px 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 99px;
  border: 1px solid var(--gold);
  align-self: center;
  margin: 0 auto;
}
body.mobile-mode .cap-vs-text { font-size: 18px; }
body.mobile-mode .cap-turn-pill { font-size: 9px; padding: 2px 8px; }

/* Combat log mobile */
body.mobile-mode .cap-log-section { padding: 10px 12px; }
body.mobile-mode .cap-log-title { font-size: 10px; }
body.mobile-mode .cap-log { max-height: 160px; font-size: 11.5px; }
body.mobile-mode .cap-log-line { font-size: 11.5px; padding: 3px 7px; gap: 6px; }
body.mobile-mode .cap-log-line i { font-size: 12px; }

/* Actions mobile: sticky bottom */
body.mobile-mode .cap-actions-wrap {
  position: sticky;
  bottom: calc(var(--m-bottom-h) + var(--m-safe-bottom) + 8px);
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(15,8,28,0.95));
  padding: 10px;
  border-radius: var(--m-radius);
  border: 1px solid rgba(225,80,90,0.4);
  z-index: 40;
}
body.mobile-mode .cap-actions {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body.mobile-mode .cap-action-btn {
  grid-template-columns: 38px 1fr;
  padding: 8px 10px;
  gap: 8px;
  min-height: 56px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .cab-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }
body.mobile-mode .cab-cd-overlay { font-size: 18px; border-radius: 9px; }
body.mobile-mode .cab-name { font-size: 11.5px; margin-bottom: 2px; }
body.mobile-mode .cab-meta { font-size: 9px; gap: 4px; }

@media (max-width: 380px) {
  body.mobile-mode .cap-actions { grid-template-columns: 1fr; }
}

/* Result mobile */
body.mobile-mode .cap-result {
  padding: 32px 18px 24px;
  border-radius: var(--m-radius);
}
body.mobile-mode .cap-result-icon-wrap { width: 90px; height: 90px; margin-bottom: 12px; }
body.mobile-mode .cap-result-icon { font-size: 56px; }
body.mobile-mode .cap-result-title { font-size: 28px; letter-spacing: 0.06em; }
body.mobile-mode .cap-result-sub { font-size: 12.5px; margin-bottom: 18px; }

body.mobile-mode .cap-rewards-grid {
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
body.mobile-mode .cap-reward { padding: 12px 6px 8px; }
body.mobile-mode .cap-reward > i { font-size: 22px; }
body.mobile-mode .cap-reward-num { font-size: 17px; }
body.mobile-mode .cap-reward-lbl { font-size: 8.5px; }

body.mobile-mode .cap-levelup-banner { padding: 10px 16px; }
body.mobile-mode .cap-levelup-banner i { font-size: 22px; }
body.mobile-mode .cap-lvup-eyebrow { font-size: 9px; }
body.mobile-mode .cap-lvup-text { font-size: 14px; }

body.mobile-mode .cap-loot-section { padding: 12px 14px; }
body.mobile-mode .cap-loot-title { font-size: 10px; }
body.mobile-mode .cap-loot-item { font-size: 11.5px; padding: 5px 9px; }
body.mobile-mode .cap-result-btn { font-size: 13px !important; min-height: 48px; }

/* ============================================================================
   12.13) REFERRAL — mobile rediseñado v2
   ============================================================================ */
body.mobile-mode .ref-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .rfsum-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
body.mobile-mode .rfsum-cell { padding: 10px 6px 8px; }
body.mobile-mode .rfsum-cell > i { font-size: 17px; }
body.mobile-mode .rfsum-val { font-size: 18px; }
body.mobile-mode .rfsum-lbl { font-size: 9px; }

/* Hero pro */
body.mobile-mode .ref-hero-pro {
  grid-template-columns: 1fr;
  gap: 12px;
}
body.mobile-mode .rh-left { padding: 16px; border-radius: var(--m-radius); }
body.mobile-mode .rh-eyebrow { font-size: 10px; }
body.mobile-mode .rh-link-row { grid-template-columns: 1fr; gap: 6px; }
body.mobile-mode .rh-link-input { font-size: 12px; padding: 10px 12px; min-height: 42px; }
body.mobile-mode .rh-copy-btn { min-height: 42px; font-size: 12px; }
body.mobile-mode .rh-code-row { gap: 8px; }
body.mobile-mode .rh-code-pill { font-size: 12px; padding: 5px 12px; }
body.mobile-mode .rh-code-copy { width: 32px; height: 32px; }
body.mobile-mode .rh-share-btn { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }

body.mobile-mode .rh-rewards-card { padding: 16px; border-radius: var(--m-radius); }
body.mobile-mode .rh-rewards-title { font-size: 11px; }
body.mobile-mode .rh-reward-line { gap: 10px; padding: 10px 0; }
body.mobile-mode .rh-reward-line > i { font-size: 22px; }
body.mobile-mode .rh-reward-amount { font-size: 16px; }
body.mobile-mode .rh-reward-desc { font-size: 11.5px; }

/* Referrer banner */
body.mobile-mode .ref-by-card-pro { padding: 10px 14px; }
body.mobile-mode .ref-by-card-pro > i { font-size: 20px; }
body.mobile-mode .rby-label { font-size: 9px; }
body.mobile-mode .rby-name { font-size: 14px; }

/* Tabs */
body.mobile-mode .ref-tabs-row {
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
body.mobile-mode .ref-tab-btn {
  flex: 1 1 calc(33% - 4px);
  min-height: 42px;
  padding: 8px 6px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  gap: 4px;
}
body.mobile-mode .ref-tab-btn i { font-size: 13px; }
body.mobile-mode .ref-tab-count { min-width: 18px; height: 18px; font-size: 10px; padding: 0 5px; }

/* Steps grid mobile */
body.mobile-mode .ref-step-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.mobile-mode .ref-step-pro { padding: 22px 12px 14px; }
body.mobile-mode .rs-num { width: 28px; height: 28px; font-size: 14px; top: -12px; }
body.mobile-mode .rs-icon { font-size: 26px; margin: 12px 0 10px; }
body.mobile-mode .rs-title { font-size: 12px; margin-bottom: 6px; }
body.mobile-mode .rs-desc { font-size: 11px; }

/* Example card */
body.mobile-mode .ref-example-card-pro { padding: 14px 16px; }
body.mobile-mode .rec-title { font-size: 11px; }
body.mobile-mode .rec-row { font-size: 12px; }
body.mobile-mode .rec-big { font-size: 18px; }

/* Rules */
body.mobile-mode .ref-rules-card { padding: 12px 14px; }
body.mobile-mode .ref-rules-card > i { font-size: 18px; }
body.mobile-mode .rrc-title { font-size: 10px; }
body.mobile-mode .rrc-text { font-size: 11.5px; }

/* List items mobile: 2 filas */
body.mobile-mode .ref-list-item-pro {
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  padding: 10px 12px;
}
body.mobile-mode .ref-list-item-pro .rli-status {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed rgba(255,255,255,0.06);
  padding-top: 8px;
  margin-top: 2px;
}
body.mobile-mode .rli-avatar { width: 40px; height: 40px; font-size: 16px; }
body.mobile-mode .rli-name { font-size: 13px; }
body.mobile-mode .rli-meta { font-size: 10.5px; }
body.mobile-mode .rli-pill { font-size: 9.5px; }
body.mobile-mode .rli-status-pill { font-size: 9px; }
body.mobile-mode .rli-earned { min-width: auto; }
body.mobile-mode .rli-earn-row { font-size: 12px; }

/* Earnings list mobile */
body.mobile-mode .ref-earn-row {
  grid-template-columns: 36px 1fr auto;
  padding: 9px 12px;
  gap: 10px;
}
body.mobile-mode .rer-icon { width: 36px; height: 36px; font-size: 16px; }
body.mobile-mode .rer-name { font-size: 12.5px; }
body.mobile-mode .rer-tag { font-size: 8.5px; padding: 1px 6px; }
body.mobile-mode .rer-date { font-size: 10px; }
body.mobile-mode .rer-amount { font-size: 14px; }

@media (max-width: 380px) {
  body.mobile-mode .ref-step-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   12.14) GUILD — mobile rediseñado v2
   ============================================================================ */
body.mobile-mode .guild-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .gsum-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
body.mobile-mode .gsum-grid.gsum-grid-3 { grid-template-columns: repeat(3, 1fr); }
body.mobile-mode .gsum-cell { padding: 10px 6px 8px; }
body.mobile-mode .gsum-cell > i { font-size: 17px; }
body.mobile-mode .gsum-val { font-size: 18px; }
body.mobile-mode .gsum-frac { font-size: 12px; }
body.mobile-mode .gsum-lbl { font-size: 9px; }

@media (max-width: 380px) {
  body.mobile-mode .gsum-grid.gsum-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Hero */
body.mobile-mode .guild-hero-pro {
  padding: 24px 16px 20px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .gh-crest { width: 70px; height: 70px; font-size: 34px; }
body.mobile-mode .gh-tag-big { font-size: 18px; }
body.mobile-mode .gh-name { font-size: 22px; }
body.mobile-mode .gh-faction { font-size: 10px; padding: 3px 12px; }
body.mobile-mode .gh-motto { font-size: 12.5px; margin-top: 10px; }

/* Actions — grid 2x2 en mobile para que todos los botones del líder se vean
   (el líder tiene 4: Invitar, Depositar, Transferir, Disolver). */
body.mobile-mode .guild-actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
body.mobile-mode .guild-action-btn {
  font-size: 11.5px;
  min-height: 42px;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
  padding-right: 8px;
}
body.mobile-mode .guild-action-btn i { font-size: 13px; flex-shrink: 0; }

/* Section title */
body.mobile-mode .guild-section-title { font-size: 10px; }
body.mobile-mode .guild-section-meta { font-size: 10.5px; }

/* Members */
body.mobile-mode .guild-member-row {
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  padding: 10px 12px;
  gap: 6px 10px;
}
body.mobile-mode .gmr-avatar { width: 40px; height: 40px; font-size: 16px; }
body.mobile-mode .gmr-status-dot { width: 11px; height: 11px; }
body.mobile-mode .gmr-name { font-size: 13px; }
body.mobile-mode .gmr-pill { font-size: 9.5px; }
body.mobile-mode .gmr-role { font-size: 9px; padding: 3px 8px; }
body.mobile-mode .gmr-kick-btn {
  grid-column: 3;
  grid-row: 1 / -1;
  width: 30px; height: 30px;
}

/* Create card */
body.mobile-mode .guild-create-card {
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  gap: 10px 12px;
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .gcc-icon { width: 52px; height: 52px; font-size: 24px; }
body.mobile-mode .gcc-title { font-size: 14px; }
body.mobile-mode .gcc-desc { font-size: 11.5px; }
body.mobile-mode .gcc-btn {
  grid-column: 1 / -1;
  width: 100%;
  font-size: 12px;
  min-height: 42px;
}

/* Invites */
body.mobile-mode .guild-invite-card {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  padding: 10px 14px;
}
body.mobile-mode .gic-tag { font-size: 12px; padding: 5px 10px; }
body.mobile-mode .gic-name { font-size: 13.5px; }
body.mobile-mode .gic-meta { font-size: 10.5px; gap: 8px; }
body.mobile-mode .gic-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 6px;
}
body.mobile-mode .gic-accept { font-size: 11.5px; min-height: 38px; }
body.mobile-mode .gic-reject { width: 44px; height: 38px; }

/* Guild list cards */
body.mobile-mode .guild-card-pro {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  padding: 10px 14px;
}
body.mobile-mode .gcd-tag { font-size: 12px; padding: 5px 10px; }
body.mobile-mode .gcd-name { font-size: 13px; }
body.mobile-mode .gcd-faction { font-size: 9px; padding: 1px 7px; }
body.mobile-mode .gcd-pill { font-size: 9.5px; }
body.mobile-mode .gcd-prog-text { font-size: 10px; }
body.mobile-mode .gcd-action {
  grid-column: 1 / -1;
}
body.mobile-mode .gcd-action .btn {
  width: 100%;
  font-size: 11.5px;
  min-height: 38px;
}
body.mobile-mode .gcd-closed { width: 100%; justify-content: center; padding: 8px; font-size: 9.5px; }

/* Invite modal mobile */
body.mobile-mode .invite-modal-overlay {
  padding: 10px;
  align-items: flex-end;
}
body.mobile-mode .invite-modal {
  max-width: 100%;
  width: 100%;
  border-radius: 18px 18px 0 0;
  max-height: 86vh;
}
body.mobile-mode .invite-modal-header { padding: 18px 18px 14px; }
body.mobile-mode .im-icon { width: 42px; height: 42px; font-size: 18px; }
body.mobile-mode .im-title { font-size: 15px; }
body.mobile-mode .im-sub { font-size: 11.5px; }
body.mobile-mode .invite-modal-body { padding: 14px 16px calc(20px + var(--m-safe-bottom)); }
body.mobile-mode .im-search-input { font-size: 14px; padding: 11px 14px 11px 38px; min-height: 44px; }
body.mobile-mode .im-search-icon { font-size: 14px; left: 12px; }
body.mobile-mode .im-result-row { padding: 9px 12px; gap: 10px; }
body.mobile-mode .imr-avatar { width: 36px; height: 36px; font-size: 14px; }
body.mobile-mode .imr-name { font-size: 12.5px; }
body.mobile-mode .imr-meta { font-size: 10px; }

/* ============================================================================
   12.11) STORE — mobile rediseñado
   ============================================================================ */
body.mobile-mode .store-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .stsum-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
body.mobile-mode .stsum-cell { padding: 10px 6px 8px; }
body.mobile-mode .stsum-cell > i { font-size: 17px; }
body.mobile-mode .stsum-val { font-size: 17px; }
body.mobile-mode .stsum-lbl { font-size: 9px; }

/* Store tabs */
body.mobile-mode .store-tabs-row {
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}
body.mobile-mode .store-tab-btn {
  flex: 1 1 calc(50% - 4px);
  min-height: 42px;
  padding: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
}
body.mobile-mode .store-tab-btn i { font-size: 14px; }
body.mobile-mode .store-tab-count { font-size: 10px; min-width: 18px; height: 18px; padding: 0 5px; }

/* Premium grid mobile: 1 col, packs apilados */
body.mobile-mode .premium-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.mobile-mode .premium-pack {
  padding: 18px 14px 14px;
  gap: 8px;
  border-radius: var(--m-radius);
}
body.mobile-mode .pack-icon-wrap { width: 64px; height: 64px; font-size: 28px; }
body.mobile-mode .pack-name { font-size: 14px; }
body.mobile-mode .pack-desc { font-size: 11.5px; }
body.mobile-mode .pack-tier-label { font-size: 9px; padding: 3px 9px; }
body.mobile-mode .pc-row { font-size: 11.5px; }
body.mobile-mode .pack-price-big { font-size: 24px; }
body.mobile-mode .pack-price-currency { font-size: 9px; }
body.mobile-mode .pack-ribbon { font-size: 9px; padding: 3px 10px; }

@media (min-width: 481px) and (max-width: 1024px) {
  body.mobile-mode .premium-grid { grid-template-columns: 1fr 1fr; }
}

/* Resource grid mobile */
body.mobile-mode .resource-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .resource-pack {
  padding: 14px 10px 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .resource-pack-icon { width: 48px; height: 48px; font-size: 22px; }
body.mobile-mode .resource-pack-amount { font-size: 18px; }
body.mobile-mode .resource-pack-unit { font-size: 9px; }
body.mobile-mode .resource-pack-name { font-size: 10.5px; }
body.mobile-mode .resource-pack-flag { font-size: 8.5px; padding: 2px 6px; }

@media (max-width: 380px) {
  body.mobile-mode .resource-grid { grid-template-columns: 1fr; }
}

/* Utility grid mobile: 1 col */
body.mobile-mode .utility-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
body.mobile-mode .utility-pack {
  grid-template-columns: 48px 1fr auto;
  padding: 12px;
  gap: 10px;
}
body.mobile-mode .utility-pack-icon { width: 48px; height: 48px; font-size: 20px; }
body.mobile-mode .utility-pack-name { font-size: 13px; }
body.mobile-mode .utility-pack-desc { font-size: 11.5px; }
body.mobile-mode .utility-pack-price { font-size: 14px; }

/* ============================================================================
   12.12) WITHDRAW — mobile rediseñado
   ============================================================================ */
body.mobile-mode .wd-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .wdsum-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
body.mobile-mode .wdsum-cell { padding: 10px 6px 8px; }
body.mobile-mode .wdsum-cell > i { font-size: 17px; }
body.mobile-mode .wdsum-val { font-size: 17px; }
body.mobile-mode .wdsum-lbl { font-size: 9px; }

/* Layout 1 col */
body.mobile-mode .wd-layout-pro {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Form */
body.mobile-mode .wd-form-pro {
  padding: 16px;
  gap: 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .wd-section-title { font-size: 10px; }
body.mobile-mode .wd-section-title i { font-size: 12px; }

/* Quick amounts */
body.mobile-mode .wd-quick-amounts {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
body.mobile-mode .wd-quick-btn { font-size: 12px; min-height: 40px; padding: 8px 4px; }

@media (max-width: 380px) {
  body.mobile-mode .wd-quick-amounts { grid-template-columns: repeat(2, 1fr); }
  body.mobile-mode .wd-quick-btn.wd-max-btn { grid-column: 1 / -1; }
}

/* Input */
body.mobile-mode .wd-input { font-size: 18px; padding: 11px 12px; }
body.mobile-mode .wd-input-unit { padding: 0 12px; font-size: 10px; }
body.mobile-mode .wd-wallet-input { font-size: 12px; padding: 11px 12px; min-height: 44px; }
body.mobile-mode .wd-input-warn { font-size: 10.5px; padding: 6px 9px; }

/* Network grid 1 col */
body.mobile-mode .wd-network-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}
body.mobile-mode .wd-net-btn { padding: 10px 12px; }
body.mobile-mode .wnb-icon { width: 32px; height: 32px; font-size: 14px; }
body.mobile-mode .wnb-name { font-size: 12.5px; }
body.mobile-mode .wnb-tag { font-size: 9.5px; }
body.mobile-mode .wnb-fee { font-size: 8.5px; }

/* Summary block */
body.mobile-mode .wd-summary-block { padding: 12px 14px; }
body.mobile-mode .wsb-row { font-size: 12px; padding: 4px 0; }
body.mobile-mode .wsb-total-num { font-size: 20px; }

body.mobile-mode .wd-submit-btn { font-size: 13px !important; min-height: 50px; }

body.mobile-mode .wd-info-tip { padding: 9px 12px; gap: 8px; }
body.mobile-mode .wd-info-tip > i { font-size: 16px; }
body.mobile-mode .wd-info-title { font-size: 10px; }
body.mobile-mode .wd-info-text { font-size: 11.5px; }

/* Rate card mobile */
body.mobile-mode .wd-rate-card { padding: 12px; }
body.mobile-mode .wrc-num { font-size: 16px; }
body.mobile-mode .wrc-unit { font-size: 8.5px; }
body.mobile-mode .wrc-side i { font-size: 16px; }
body.mobile-mode .wrc-note { font-size: 10.5px; }

/* History */
body.mobile-mode .wd-hist-card { padding: 10px 12px; }
body.mobile-mode .whc-amount-num { font-size: 14px; }
body.mobile-mode .whc-status { font-size: 8.5px; padding: 2px 7px; }
body.mobile-mode .whc-wallet,
body.mobile-mode .whc-tx { font-size: 10px; }

/* ============================================================================
   12.9) ALTAR — mobile rediseñado
   ============================================================================ */
body.mobile-mode .altar-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .altsum-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
body.mobile-mode .altsum-cell { padding: 10px 6px 8px; }
body.mobile-mode .altsum-cell > i { font-size: 17px; }
body.mobile-mode .altsum-val { font-size: 17px; }
body.mobile-mode .altsum-frac { font-size: 12px; }
body.mobile-mode .altsum-lbl { font-size: 9px; }

body.mobile-mode .altar-layout-pro {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

/* Pyre mobile */
body.mobile-mode .altar-pyre-pro {
  padding: 22px 16px 20px;
  border-radius: var(--m-radius);
}
body.mobile-mode .apy-flame-wrap { width: 90px; height: 90px; margin-bottom: 14px; }
body.mobile-mode .apy-flame-icon { font-size: 64px; }
body.mobile-mode .apy-conversion { padding: 10px 16px; gap: 10px; }
body.mobile-mode .apy-conv-num { font-size: 17px; }
body.mobile-mode .apy-conv-lbl { font-size: 9px; }
body.mobile-mode .apy-quote { font-size: 12px; }

/* Forge mobile */
body.mobile-mode .altar-forge-pro {
  padding: 16px;
  border-radius: var(--m-radius);
  gap: 12px;
}
body.mobile-mode .afg-section-title { font-size: 11px; }
body.mobile-mode .afg-quick-amounts { grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.mobile-mode .afg-quick-btn { padding: 10px 6px; font-size: 12px; min-height: 40px; }
body.mobile-mode .afg-input { font-size: 16px; min-height: 44px; }
body.mobile-mode .afg-input-unit { padding: 0 12px; font-size: 10px; }

/* Preview mobile */
body.mobile-mode .afg-preview { padding: 14px 12px; gap: 8px; }
body.mobile-mode .afg-preview-side > i { font-size: 22px; }
body.mobile-mode .afg-preview-num { font-size: 18px; }
body.mobile-mode .afg-preview-lbl { font-size: 9px; }

body.mobile-mode .afg-forge-btn { font-size: 13px !important; min-height: 50px; }
body.mobile-mode .afg-warn-card { padding: 10px 12px; }
body.mobile-mode .afg-warn-title { font-size: 10px; }
body.mobile-mode .afg-warn-text { font-size: 11.5px; }

/* Other ways grid */
body.mobile-mode .altar-other-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .alt-other-card { padding: 12px; }
body.mobile-mode .aoc-icon { width: 36px; height: 36px; font-size: 18px; }
body.mobile-mode .aoc-title { font-size: 12px; }
body.mobile-mode .aoc-desc { font-size: 11px; }

@media (max-width: 380px) {
  body.mobile-mode .altar-other-grid { grid-template-columns: 1fr; }
  body.mobile-mode .afg-quick-amounts { grid-template-columns: repeat(2, 1fr); }
  body.mobile-mode .afg-quick-btn.afg-max-btn { grid-column: 1 / -1; }
}

/* ============================================================================
   12.10) DEPOSIT — mobile rediseñado
   ============================================================================ */
body.mobile-mode .dep-summary-card {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .dsum-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
body.mobile-mode .dsum-cell { padding: 10px 6px 8px; }
body.mobile-mode .dsum-cell > i { font-size: 17px; }
body.mobile-mode .dsum-val { font-size: 17px; }
body.mobile-mode .dsum-frac { font-size: 12px; }
body.mobile-mode .dsum-lbl { font-size: 9px; }

/* Layout 1 col */
body.mobile-mode .dep-layout-pro {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Form */
body.mobile-mode .dep-form-pro {
  padding: 16px;
  gap: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .dep-section-title { font-size: 10px; }
body.mobile-mode .dep-section-title i { font-size: 12px; }

/* Quick amounts: 3 cols en mobile */
body.mobile-mode .dep-quick-amounts {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
body.mobile-mode .dep-quick-btn { padding: 10px 6px; font-size: 12.5px; min-height: 40px; }

/* Input */
body.mobile-mode .dep-input-wrap {
  grid-template-columns: 36px 1fr 56px;
}
body.mobile-mode .dep-input { font-size: 18px; padding: 11px 10px; }
body.mobile-mode .dep-input-prefix { font-size: 16px; }
body.mobile-mode .dep-input-suffix { font-size: 10px; }

/* Preview */
body.mobile-mode .dep-preview-card { padding: 12px 14px; }
body.mobile-mode .dep-preview-row { font-size: 12px; padding: 4px 0; }
body.mobile-mode .dpr-total-num { font-size: 18px; }

/* Network grid */
body.mobile-mode .dep-network-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}
body.mobile-mode .dep-net-btn { padding: 10px 12px; gap: 10px; }
body.mobile-mode .dnb-icon { width: 32px; height: 32px; font-size: 14px; }
body.mobile-mode .dnb-name { font-size: 12.5px; }
body.mobile-mode .dnb-tag { font-size: 9.5px; }
body.mobile-mode .dnb-fee { font-size: 8.5px; }

body.mobile-mode .dep-create-btn { font-size: 13px !important; min-height: 50px; }

body.mobile-mode .dep-info-tip { font-size: 11.5px; padding: 9px 12px; }
body.mobile-mode .dep-info-tip i { font-size: 14px; }

/* Side mobile */
body.mobile-mode .dep-side-pro { gap: 10px; }
body.mobile-mode .dep-bonus-row { padding: 9px 12px; font-size: 12px; }
body.mobile-mode .dbr-tier { font-size: 12px; }
body.mobile-mode .dbr-pct { font-size: 13px; }
body.mobile-mode .dep-bonus-tip { font-size: 11px; padding: 6px 10px; }
body.mobile-mode .dep-uses-list li { font-size: 11.5px; padding: 7px 10px; }
body.mobile-mode .dep-uses-list li i { font-size: 13px; }
body.mobile-mode .dep-store-btn { font-size: 12px; min-height: 42px; }

/* History card mobile */
body.mobile-mode .dep-hist-card { padding: 10px 12px; }
body.mobile-mode .dhc-amount-num { font-size: 14px; }
body.mobile-mode .dhc-amount-net { font-size: 9px; }
body.mobile-mode .dhc-status { font-size: 8.5px; padding: 2px 7px; }
body.mobile-mode .dhc-row-meta { font-size: 10.5px; }

/* Invoice modal mobile */
body.mobile-mode .invoice-modal-overlay {
  padding: 10px;
  align-items: flex-end;
}
body.mobile-mode .invoice-modal {
  max-width: 100%;
  width: 100%;
  border-radius: 18px 18px 0 0;
  max-height: 92vh;
}
body.mobile-mode .invoice-header { padding: 18px 18px 14px; gap: 12px; }
body.mobile-mode .invh-icon { width: 42px; height: 42px; font-size: 19px; }
body.mobile-mode .invh-title { font-size: 15px; }
body.mobile-mode .invh-sub { font-size: 11.5px; }
body.mobile-mode .invoice-body {
  padding: 14px 16px;
  gap: 12px;
}
body.mobile-mode .inv-summary { padding: 10px 14px; }
body.mobile-mode .inv-summary-row { font-size: 12px; }
body.mobile-mode .inv-net-pill { font-size: 10px; padding: 2px 8px; }
body.mobile-mode .inv-address-block { padding: 14px; }
body.mobile-mode .inv-address-label { font-size: 12.5px; }
body.mobile-mode .inv-address-box { font-size: 11.5px; padding: 10px 12px; }
body.mobile-mode .inv-net-warn { font-size: 11px; padding: 7px 11px; }
body.mobile-mode .inv-timer-box { padding: 10px 12px; }
body.mobile-mode .inv-timer-box > i { font-size: 18px; }
body.mobile-mode .inv-timer-title { font-size: 12px; }
body.mobile-mode .inv-timer-sub { font-size: 11px; }
body.mobile-mode .invoice-actions {
  padding: 12px 16px calc(14px + var(--m-safe-bottom));
}
body.mobile-mode .invoice-actions .btn { font-size: 12.5px; min-height: 46px; }

/* ============================================================================
   12.8) VIP — mobile rediseñado premium
   ============================================================================ */

/* Active banner mobile */
body.mobile-mode .vip-active-banner-pro {
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .vab-content {
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-bottom: 12px;
}
body.mobile-mode .vab-left { gap: 10px; }
body.mobile-mode .vab-crown { width: 44px; height: 44px; font-size: 22px; }
body.mobile-mode .vab-eyebrow { font-size: 10px; }
body.mobile-mode .vab-meta { font-size: 11px; }
body.mobile-mode .vab-counter-num { font-size: 32px; }
body.mobile-mode .vab-counter-lbl { font-size: 8.5px; }
body.mobile-mode .vab-progress-bar { height: 7px; }
body.mobile-mode .vab-progress-meta { font-size: 9.5px; }
body.mobile-mode .vab-perk { font-size: 10px; padding: 4px 9px; }

/* Hero mobile */
body.mobile-mode .vip-hero-pro {
  padding: 28px 18px 24px;
  margin-bottom: 18px;
  border-radius: var(--m-radius);
}
body.mobile-mode .vip-hero-glow {
  width: 160px; height: 160px;
  top: 18px;
}
body.mobile-mode .vip-crown-big {
  width: 76px; height: 76px;
  font-size: 38px;
  margin-bottom: 14px;
  border-width: 3px;
}
body.mobile-mode .vip-hero-eyebrow { font-size: 10px; letter-spacing: 0.25em; }
body.mobile-mode .vip-hero-title { font-size: 26px; letter-spacing: 0.05em; }
body.mobile-mode .vip-hero-sub { font-size: 12.5px; margin-bottom: 16px; }

body.mobile-mode .vip-price-block { gap: 8px; }
body.mobile-mode .vip-price-block i { font-size: 22px; }
body.mobile-mode .vip-price-num { font-size: 32px; }
body.mobile-mode .vip-price-unit { font-size: 12px; }
body.mobile-mode .vip-price-usd { font-size: 11.5px; margin-bottom: 18px; }

body.mobile-mode .vip-hero-action { gap: 8px; max-width: 100%; }
body.mobile-mode .vip-buy-btn {
  min-height: 50px;
  font-size: 13px;
  padding: 0 18px;
}
body.mobile-mode .vip-deposit-btn { min-height: 42px; font-size: 12px; }

/* Section title */
body.mobile-mode .vip-section-title { font-size: 11px; margin: 18px 0 10px; }
body.mobile-mode .vip-section-title i { font-size: 14px; }

/* Benefits grid 1 col */
body.mobile-mode .vip-benefits-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.mobile-mode .vip-benefit-card-pro {
  padding: 14px 14px 12px;
  border-radius: var(--m-radius);
  gap: 6px;
}
body.mobile-mode .vbc-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
body.mobile-mode .vbc-tag { font-size: 8.5px; padding: 2px 7px; top: 12px; right: 12px; }
body.mobile-mode .vbc-title { font-size: 13.5px; }
body.mobile-mode .vbc-desc { font-size: 12px; }

/* ROI mobile */
body.mobile-mode .vip-roi-pro {
  padding: 16px 16px 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .vroi-section-title { font-size: 10px; }
body.mobile-mode .vroi-row { font-size: 12px; padding: 6px 0; }
body.mobile-mode .vroi-row.vroi-subtotal { font-size: 12.5px; padding-top: 8px; }
body.mobile-mode .vroi-row.vroi-subtotal .vroi-val { font-size: 13px; }

/* Grand total — más compacto */
body.mobile-mode .vroi-grand-total {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px 16px;
  text-align: center;
}
body.mobile-mode .vroi-grand-label { justify-content: center; font-size: 11px; }
body.mobile-mode .vroi-grand-val { text-align: center; }
body.mobile-mode .vroi-grand-amount { font-size: 30px; }
body.mobile-mode .vroi-disclaimer { font-size: 10.5px; padding: 9px 11px; }

@media (max-width: 380px) {
  body.mobile-mode .vip-hero-title { font-size: 22px; }
  body.mobile-mode .vip-price-num { font-size: 28px; }
  body.mobile-mode .vab-counter-num { font-size: 28px; }
  body.mobile-mode .vroi-grand-amount { font-size: 26px; }
}

/* ============================================================================
   12.7) ACHIEVEMENTS — mobile rediseñado
   ============================================================================ */

/* Summary */
body.mobile-mode .ach-summary-card {
  padding: 12px 14px 14px;
  margin-bottom: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .asum-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
body.mobile-mode .asum-cell { padding: 10px 6px 8px; }
body.mobile-mode .asum-cell > i { font-size: 17px; }
body.mobile-mode .asum-val { font-size: 18px; }
body.mobile-mode .asum-frac { font-size: 12px; }
body.mobile-mode .asum-lbl { font-size: 9px; }
body.mobile-mode .asum-progress-bar { height: 7px; }

/* Filter chips horizontal scroll */
body.mobile-mode .ach-cats-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -12px 14px;
  padding: 0 12px 4px;
}
body.mobile-mode .ach-cats-row::-webkit-scrollbar { display: none; }
body.mobile-mode .ach-cat-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 10.5px;
  min-height: 34px;
}
body.mobile-mode .ach-cat-chip i { font-size: 12px; }
body.mobile-mode .ach-cat-count { font-size: 9px; min-width: 18px; height: 16px; padding: 0 5px; }

/* Grid 1 col */
body.mobile-mode .ach-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Card mobile — más compacto, action button como bloque inferior */
body.mobile-mode .ach-card-pro {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .ach-icon-wrap,
body.mobile-mode .ach-icon { width: 64px; height: 64px; border-radius: 12px; }
body.mobile-mode .ach-icon { font-size: 28px; }
body.mobile-mode .ach-claimed-check { width: 24px; height: 24px; font-size: 11px; bottom: -4px; right: -4px; }

body.mobile-mode .ach-status-badge { font-size: 8.5px; padding: 2px 6px; top: 8px; right: 8px; }
body.mobile-mode .ach-status-badge i { font-size: 9px; }
body.mobile-mode .ach-name {
  font-size: 13.5px;
  padding-right: 80px;  /* deja espacio para badge */
}
body.mobile-mode .ach-desc { font-size: 11.5px; line-height: 1.4; }

/* Progress */
body.mobile-mode .ach-progress-label { font-size: 9px; }
body.mobile-mode .ach-progress-val { font-size: 11px; }
body.mobile-mode .ach-bar { height: 4px; }

/* Rewards */
body.mobile-mode .ach-reward { font-size: 10px; padding: 2px 7px; }
body.mobile-mode .ach-reward i { font-size: 10px; }

/* Action: bloque inferior full-width en mobile en vez de absolute */
body.mobile-mode .ach-action {
  position: static;
  grid-column: 1 / -1;
  margin-top: 6px;
}
body.mobile-mode .ach-claim-btn {
  width: 100%;
  min-height: 40px;
  font-size: 12px;
}

@media (max-width: 380px) {
  body.mobile-mode .ach-card-pro {
    grid-template-columns: 56px 1fr;
    padding: 12px;
    gap: 10px;
  }
  body.mobile-mode .ach-icon-wrap,
  body.mobile-mode .ach-icon { width: 56px; height: 56px; }
  body.mobile-mode .ach-icon { font-size: 24px; }
  body.mobile-mode .ach-name { font-size: 13px; padding-right: 70px; }
}

/* ============================================================================
   13) ACHIEVEMENTS / RANKING / EVENTS / VIP / GUILD / GUIDE / DEPOSIT / WITHDRAW
   ============================================================================ */
body.mobile-mode .achievements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .ranking-grid,
body.mobile-mode .rank-grid,
body.mobile-mode .events-grid,
body.mobile-mode .event-grid,
body.mobile-mode .guild-list,
body.mobile-mode .vip-benefits-grid,
body.mobile-mode .vip-roi-grid,
body.mobile-mode .guide-toc,
body.mobile-mode .guide-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
body.mobile-mode .vip-hero {
  padding: 20px 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .vip-hero-title,
body.mobile-mode .vip-title {
  font-size: 24px;
}
body.mobile-mode .vip-hero-sub { font-size: 12px; }
body.mobile-mode .guild-card {
  padding: 12px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .guild-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body.mobile-mode .guide-section {
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .guide-section h2 { font-size: 17px; }

@media (max-width: 380px) {
  body.mobile-mode .achievements-grid,
  body.mobile-mode .ach-grid {
    grid-template-columns: 1fr;
  }
}

body.mobile-mode .deposit-form,
body.mobile-mode .withdraw-form,
body.mobile-mode .altar-card,
body.mobile-mode .altar-form {
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .deposit-bonus-grid,
body.mobile-mode .bonus-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body.mobile-mode .deposit-bonus-grid > *,
body.mobile-mode .bonus-tiers > * {
  font-size: 11px;
  padding: 8px;
}
body.mobile-mode .wh-row,
body.mobile-mode .deposit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 10px;
  border-radius: var(--m-radius-sm);
}

/* ============================================================================
   14) REFERRAL
   ============================================================================ */
body.mobile-mode .ref-hero {
  display: block;
  grid-template-columns: 1fr;
}
body.mobile-mode .ref-hero-left,
body.mobile-mode .ref-hero-right {
  padding: 16px 14px;
  margin-bottom: 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .ref-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .ref-stat-num { font-size: 22px; }
body.mobile-mode .ref-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.mobile-mode .ref-link-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.mobile-mode .ref-link-row .btn { width: 100%; }
body.mobile-mode .ref-link-input { font-size: 11.5px; }
body.mobile-mode .ref-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.mobile-mode .ref-share-row .btn {
  flex: 1 1 calc(50% - 6px);
  min-height: 38px;
  font-size: 11.5px;
}
body.mobile-mode .ref-list-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  gap: 6px 10px;
}
body.mobile-mode .ref-list-status,
body.mobile-mode .ref-list-earned {
  grid-column: 1 / -1;
  text-align: left;
  border-top: 1px dashed var(--border-soft);
  padding-top: 6px;
}
@media (max-width: 380px) {
  body.mobile-mode .ref-step-grid { grid-template-columns: 1fr; }
}

/* Ref earnings table → cards */
body.mobile-mode .ref-earn-table { display: block; }
body.mobile-mode .ref-earn-table thead { display: none; }
body.mobile-mode .ref-earn-table tbody,
body.mobile-mode .ref-earn-table tr { display: block; width: 100%; }
body.mobile-mode .ref-earn-table tr {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-radius-sm);
  margin-bottom: 8px;
  padding: 10px;
}
body.mobile-mode .ref-earn-table td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border: none;
  font-size: 12.5px;
}
body.mobile-mode .ref-earn-table td::before {
  content: attr(data-label);
  font-family: var(--font-title);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ============================================================================
   15) FORMS / CARDS / BUTTONS / MODALS / TOASTS
   ============================================================================ */
body.mobile-mode .card {
  padding: 14px;
  border-radius: var(--m-radius);
}
body.mobile-mode .card-title {
  font-size: 13px;
  margin-bottom: 10px;
}
body.mobile-mode .btn {
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .btn-sm {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}
body.mobile-mode .btn-lg {
  min-height: 50px;
  padding: 0 18px;
  font-size: 14px;
}
body.mobile-mode .btn-block {
  width: 100%;
}
body.mobile-mode .input,
body.mobile-mode .select,
body.mobile-mode .textarea {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  border-radius: var(--m-radius-sm);
}

/* Modals genéricos */
body.mobile-mode .modal-content,
body.mobile-mode .modal:not(.item-modal) {
  max-width: 92vw;
  max-height: 86vh;
  margin: 5vh auto;
  border-radius: var(--m-radius);
  padding: 16px;
}
body.mobile-mode .modal-overlay { padding: 12px; }
body.mobile-mode .modal-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}
body.mobile-mode .modal-actions .btn { width: 100%; }

/* === ITEM MODAL — ajustes mobile === */
body.mobile-mode .item-modal-overlay {
  padding: 10px;
  align-items: flex-end;       /* aparece tipo bottom sheet en mobile */
  /* 2026-06-04 FIX: bug reportado — no se podía scrolear hacia abajo para ver
     "Si lo equipas". El overlay dejaba pasar el touch a la página de fondo.
     Contener el scroll dentro del overlay. */
  overflow: hidden;
  overscroll-behavior: contain;
}
body.mobile-mode .item-modal {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 18px;
  margin: 0;
  width: 100%;
}
/* 2026-06-04: el body del modal absorbe el touch scroll vertical y NO se lo pasa
   a la página de atrás (overscroll-behavior). touch-action: pan-y permite scroll
   suave con un solo dedo. */
body.mobile-mode .item-modal .item-modal-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
body.mobile-mode .item-modal-close {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  font-size: 14px;
}
body.mobile-mode .item-modal-hero {
  height: 150px;
}
body.mobile-mode .item-modal-image {
  width: 110px;
  height: 110px;
}
body.mobile-mode .item-modal-image > i,
body.mobile-mode .item-modal-image > iconify-icon {
  font-size: 64px;
}
body.mobile-mode .item-modal-title-block {
  padding: 0 18px 12px;
}
body.mobile-mode .item-modal-name {
  font-size: 18px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
body.mobile-mode .item-meta-pill {
  font-size: 10.5px;
  padding: 3px 8px;
}
body.mobile-mode .item-modal-body {
  padding: 14px 16px;
}
body.mobile-mode .item-stats-grid {
  gap: 5px;
  margin-bottom: 12px;
}
body.mobile-mode .item-stat-cell {
  padding: 8px 10px;
  gap: 7px;
}
body.mobile-mode .item-stat-cell > i { font-size: 15px; }
body.mobile-mode .item-stat-val { font-size: 12px; }
body.mobile-mode .item-effect-card,
body.mobile-mode .item-roi-card,
body.mobile-mode .item-craft-card {
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12px;
}
body.mobile-mode .item-effect-card > i,
body.mobile-mode .item-roi-card > i,
body.mobile-mode .item-craft-card > i { font-size: 20px; }
body.mobile-mode .item-modal-desc { font-size: 12.5px; }
body.mobile-mode .item-modal-actions {
  padding: 10px 14px calc(14px + var(--m-safe-bottom));
}
body.mobile-mode .item-action-primary {
  min-height: 50px;
  font-size: 14px;
}
body.mobile-mode .item-action-secondary,
body.mobile-mode .item-action-danger {
  min-height: 42px;
  font-size: 11.5px;
}
@media (max-width: 380px) {
  body.mobile-mode .item-stats-grid { grid-template-columns: 1fr; }
  body.mobile-mode .item-action-row { flex-direction: column; }
}

/* === BAZAAR PUBLISH MODAL — mobile === */
body.mobile-mode .bazaar-modal-overlay {
  padding: 10px;
  align-items: flex-end;
}
body.mobile-mode .bazaar-modal {
  max-width: 100%;
  width: 100%;
  border-radius: 18px 18px 0 0;
  max-height: 92vh;
}
body.mobile-mode .bazaar-modal-header {
  padding: 18px 18px 14px;
}
body.mobile-mode .bazaar-modal-icon {
  width: 42px;
  height: 42px;
  font-size: 19px;
}
body.mobile-mode .bazaar-modal-title { font-size: 16px; }
body.mobile-mode .bazaar-modal-sub { font-size: 11.5px; }
body.mobile-mode .bazaar-item-summary { padding: 12px 18px; }
body.mobile-mode .bazaar-item-image { width: 56px; height: 56px; }
body.mobile-mode .bazaar-item-name { font-size: 14px; }
body.mobile-mode .bazaar-modal-body {
  padding: 16px 18px;
  gap: 12px;
}
body.mobile-mode .bazaar-qty-row {
  grid-template-columns: 44px 1fr 44px;
}
body.mobile-mode .bazaar-qty-input { font-size: 16px; }
body.mobile-mode .bazaar-price-input { font-size: 16px; padding: 11px 12px; }
body.mobile-mode .bazaar-summary-card { padding: 12px 14px; }
body.mobile-mode .bazaar-summary-net .bazaar-summary-val { font-size: 16px; }
body.mobile-mode .bazaar-modal-actions {
  padding: 12px 16px calc(14px + var(--m-safe-bottom));
  flex-direction: row;
}
body.mobile-mode .bazaar-modal-actions .btn { min-height: 46px; font-size: 12.5px; }

/* === HERO STATS CARD mobile === */
body.mobile-mode .hero-stats-card {
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: var(--m-radius);
}
body.mobile-mode .hero-stats-title { font-size: 10px; margin-bottom: 10px; }
body.mobile-mode .hero-stats-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
body.mobile-mode .hs-cell { padding: 8px 4px 6px; }
body.mobile-mode .hs-cell > i { font-size: 16px; }
body.mobile-mode .hs-val { font-size: 14px; }
body.mobile-mode .hs-label { font-size: 8.5px; }

@media (max-width: 380px) {
  body.mobile-mode .hero-stats-grid { grid-template-columns: repeat(3, 1fr); }
  body.mobile-mode .hs-val { font-size: 13px; }
}

/* === ITEM COMPARE CARD mobile === */
body.mobile-mode .item-compare-card {
  padding: 10px 12px;
}
body.mobile-mode .item-compare-row {
  grid-template-columns: 16px 50px 1fr 14px 1fr 54px;
  gap: 6px;
  padding: 5px 7px;
  font-size: 11px;
}
body.mobile-mode .item-compare-row > i:first-child { font-size: 13px; }
body.mobile-mode .item-compare-row .ic-label { font-size: 10px; }
body.mobile-mode .item-compare-row .ic-delta { font-size: 11px; padding: 2px 5px; }

/* === HERO BANNER mobile === */
body.mobile-mode .hero-banner {
  padding: 22px 16px 18px;
  border-radius: var(--m-radius);
  margin-bottom: 12px;
}
body.mobile-mode .hero-banner-content {
  flex-direction: column;
  text-align: center;
  gap: 16px;
}
body.mobile-mode .hero-banner-portrait .portrait-ring {
  width: 110px;
  height: 110px;
  border-width: 2.5px;
}
body.mobile-mode .hero-vip-crown {
  width: 30px;
  height: 30px;
  font-size: 14px;
  border-width: 2.5px;
}
body.mobile-mode .hero-level-badge {
  font-size: 11px;
  padding: 3px 12px;
}
body.mobile-mode .hero-banner-name {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
body.mobile-mode .hero-banner-meta {
  justify-content: center;
}
body.mobile-mode .hb-pill { font-size: 10px; padding: 4px 10px; }
body.mobile-mode .hero-banner-xp { margin-top: 16px; padding-top: 14px; }
body.mobile-mode .hb-xp-label { font-size: 10px; }
body.mobile-mode .hb-xp-value { font-size: 12px; }
body.mobile-mode .hb-xp-bar { height: 12px; }
body.mobile-mode .hb-xp-pct { font-size: 10px; }

/* === STATS HUB mobile === */
body.mobile-mode .stats-hub {
  border-radius: var(--m-radius);
}
body.mobile-mode .stats-section {
  padding: 14px 14px;
}
body.mobile-mode .stats-section-header {
  font-size: 11px;
  margin-bottom: 12px;
}
body.mobile-mode .stats-section-header > i { font-size: 14px; }
body.mobile-mode .stats-section-badge { font-size: 10px; padding: 2px 8px; }

/* Vitals mobile */
body.mobile-mode .vital-line {
  grid-template-columns: 28px 1fr 90px;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  padding: 8px 4px;
}
body.mobile-mode .vital-line-name { display: none; }   /* solo icon + bar + val */
body.mobile-mode .vital-line-icon { width: 28px; height: 28px; font-size: 13px; grid-row: 1; grid-column: 1; }
body.mobile-mode .vital-line-bar { height: 11px; grid-row: 1; grid-column: 2; }
body.mobile-mode .vital-line-val { font-size: 12px; grid-row: 1; grid-column: 3; }

/* Timer de regen mobile: full width en su propia fila debajo, eta a la izq + bonus a la der */
body.mobile-mode .vital-line-timer {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 0;
  padding: 0 2px 0 38px;  /* alineado con el inicio del bar */
  gap: 8px;
  font-size: 11px;
  flex-wrap: nowrap;
  min-width: 0;
}
body.mobile-mode .vital-line-timer .vlt-eta-wrap {
  flex-shrink: 0;
}
body.mobile-mode .vital-line-timer .vlt-eta {
  min-width: auto;
  font-size: 11px;
}
body.mobile-mode .vital-line-timer .vlt-eta-wrap > i { font-size: 11px; }
body.mobile-mode .vital-line-timer .vlt-bonus {
  font-size: 9px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
  flex-shrink: 1;
}
body.mobile-mode .vital-line-timer .vlt-full {
  font-size: 11px;
}
@media (max-width: 380px) {
  body.mobile-mode .vital-line-timer { padding-left: 32px; gap: 6px; }
  body.mobile-mode .vital-line-timer .vlt-bonus { font-size: 8.5px; padding: 1px 5px; }
  body.mobile-mode .vital-line-timer .vlt-eta { font-size: 10.5px; }
}

/* Combat / History grid mobile */
body.mobile-mode .combat-stats-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
body.mobile-mode .cs-cell { padding: 10px 4px 8px; }
body.mobile-mode .cs-cell > i { font-size: 18px; }
body.mobile-mode .cs-val { font-size: 18px; }
body.mobile-mode .cs-label { font-size: 9px; letter-spacing: 0.1em; }

@media (max-width: 380px) {
  body.mobile-mode .cs-val { font-size: 16px; }
}

/* Atributos mobile */
body.mobile-mode .attr-row-pro {
  padding: 9px 12px;
  gap: 10px;
  grid-template-columns: 32px 1fr auto 38px;
}
body.mobile-mode .attr-row-pro:not(.is-actionable) {
  grid-template-columns: 32px 1fr auto;
}
body.mobile-mode .attr-row-pro .attr-icon {
  width: 32px; height: 32px;
  font-size: 16px;
}
body.mobile-mode .attr-row-pro .attr-name { font-size: 13px; }
body.mobile-mode .attr-row-pro .attr-val-big { font-size: 18px; }
body.mobile-mode .attr-plus {
  width: 36px; height: 36px;
  font-size: 13px;
}

/* ============================================================
   FREE GEMS — mobile
   ============================================================ */
body.mobile-mode .fg-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
body.mobile-mode .fgs-cell {
  padding: 10px 6px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .fgs-cell > i {
  font-size: 18px;
  margin-bottom: 4px;
}
body.mobile-mode .fgs-num { font-size: 15px; margin-bottom: 2px; }
body.mobile-mode .fgs-divider { font-size: 11px; }
body.mobile-mode .fgs-lbl { font-size: 8.5px; letter-spacing: 0.08em; line-height: 1.15; }

body.mobile-mode .fg-tasks { gap: 10px; }

/* Task card: stack icon + body vertically on small screens */
body.mobile-mode .fg-task-card {
  gap: 12px;
  padding: 12px;
  border-radius: var(--m-radius-md);
}
body.mobile-mode .fg-task-icon {
  width: 44px; height: 44px;
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .fg-task-icon i { font-size: 22px; }

body.mobile-mode .fg-task-head {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
body.mobile-mode .fg-task-title {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  flex: 1 1 100%;
}
body.mobile-mode .fg-task-desc {
  font-size: 11.5px;
  line-height: 1.4;
  margin-bottom: 8px;
}
body.mobile-mode .fg-task-reward { margin-bottom: 8px; }
body.mobile-mode .fg-reward-pill {
  font-size: 11.5px;
  padding: 5px 10px;
}
body.mobile-mode .fg-reward-pill i { font-size: 12px; }
body.mobile-mode .fg-task-action .btn {
  padding: 10px;
  font-size: 12px;
  min-height: 40px;
}

/* Status badges on the card head */
body.mobile-mode .fg-status-badge {
  font-size: 8.5px;
  padding: 3px 7px;
  letter-spacing: 0.06em;
}
body.mobile-mode .fg-status-badge i { font-size: 10px; }

/* Submit row (manual review): stack on mobile */
body.mobile-mode .fg-submit-row {
  flex-direction: column;
  gap: 6px;
}
body.mobile-mode .fg-submit-input {
  font-size: 13px;
  padding: 10px 12px;
  min-height: 42px;
  width: 100%;
}
body.mobile-mode .fg-submit-row .btn {
  width: 100%;
  padding: 10px;
  font-size: 12.5px;
  min-height: 40px;
}

/* Pending card */
body.mobile-mode .fg-pending-card {
  padding: 10px 12px;
  gap: 10px;
}
body.mobile-mode .fg-pending-card > i { font-size: 20px; }
body.mobile-mode .fg-pending-title { font-size: 12px; }
body.mobile-mode .fg-pending-sub { font-size: 11px; }
body.mobile-mode .fg-pending-sub code { font-size: 9.5px; }

/* Reject message */
body.mobile-mode .fg-reject-msg {
  font-size: 11px;
  padding: 8px 10px;
}

/* Auto-check progress block */
body.mobile-mode .fg-progress-meta {
  font-size: 10.5px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 4px;
}
body.mobile-mode .fg-progress-bar { height: 6px; }

/* Reward modal — fits small screens */
body.mobile-mode .fg-reward-modal {
  max-width: calc(100vw - 28px);
  padding: 28px 18px 18px;
}
body.mobile-mode .fgrm-icon i { font-size: 64px; }
body.mobile-mode .fgrm-title {
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
body.mobile-mode .fgrm-amt { font-size: 32px; }
body.mobile-mode .fgrm-lbl { font-size: 10.5px; letter-spacing: 0.12em; }

/* Phones < 380px — stack summary into 1 row but smaller */
@media (max-width: 380px) {
  body.mobile-mode .fg-summary { gap: 4px; }
  body.mobile-mode .fgs-cell { padding: 8px 4px; }
  body.mobile-mode .fgs-num { font-size: 13px; }
  body.mobile-mode .fgs-cell > i { font-size: 15px; margin-bottom: 2px; }
  body.mobile-mode .fgs-lbl { font-size: 8px; }
  body.mobile-mode .fg-task-icon { width: 38px; height: 38px; }
  body.mobile-mode .fg-task-icon i { font-size: 18px; }
}

/* Toast */
body.mobile-mode .toast {
  left: 12px;
  right: 12px;
  max-width: calc(100vw - 24px);
  bottom: calc(var(--m-bottom-h) + var(--m-safe-bottom) + 14px);
  border-radius: var(--m-radius-sm);
}
body.mobile-mode .tooltip { max-width: 84vw; }
body.mobile-mode .badge {
  font-size: 11px;
  padding: 2px 8px;
}
body.mobile-mode .flex.wrap { flex-wrap: wrap; }

/* Altar exchange (oro→gemas) en mobile */
body.mobile-mode .altar-exchange-card { padding: 14px 12px; }
body.mobile-mode .aex-header { flex-wrap: wrap; }
body.mobile-mode .aex-icon { width: 38px; height: 38px; font-size: 18px; }
body.mobile-mode .aex-title { font-size: 14px; }
body.mobile-mode .aex-sub { font-size: 11px; }
body.mobile-mode .aex-balance { font-size: 12px; padding: 5px 10px; }
body.mobile-mode .aex-quick-btn { font-size: 11.5px; padding: 6px 3px; }
body.mobile-mode .aex-input { font-size: 15px; padding: 9px 56px 9px 12px; }
body.mobile-mode .aex-preview { padding: 10px; }
body.mobile-mode .aex-preview-num { font-size: 14px; }
body.mobile-mode .aex-preview-side > i { font-size: 19px; }
body.mobile-mode .aex-preview-arrow { padding: 0 8px; font-size: 16px; }

/* ====================================================================
   FIX: tamaño visual consistente entre items con imagen vs items con icono
   --------------------------------------------------------------------
   Problema: en cuadrados de items (inventario, bazar, drops, equipo, etc),
   los items con `<div class="item-image">` llenaban 100% de la celda
   mientras los items con `<i>` (icon) sólo ocupaban ~40% via font-size.
   Eso daba la sensación de "cuadrados más grandes" en items con imagen.
   Solución: forzar a las imágenes en estos contenedores a no exceder ~78%
   del cell, alineándose visualmente al tamaño aparente de los iconos.
   También fija el tamaño de los iconos para que no varíen entre celdas.
   ==================================================================== */
body.mobile-mode .inv-cell .item-image,
body.mobile-mode .inv-cell .item-modal-img-real,
body.mobile-mode .equip-slot .item-image,
body.mobile-mode .equip-slot .item-modal-img-real,
body.mobile-mode .market-item-ic .item-image,
body.mobile-mode .market-item-ic .item-modal-img-real,
body.mobile-mode .bazaar-item-image .item-image,
body.mobile-mode .bazaar-item-image .item-modal-img-real,
body.mobile-mode .box-drop-icon .item-image,
body.mobile-mode .box-drop-icon .item-modal-img-real,
body.mobile-mode .sp-item-icon .item-image,
body.mobile-mode .sp-item-icon .item-modal-img-real,
body.mobile-mode .shop-potion-icon .shop-potion-img {
  width: 100%;
  height: 100%;
  background-size: 78% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Iconos FA/Phosphor + Iconify en los mismos contenedores: tamaño consistente */
body.mobile-mode .inv-cell > i:not(.qty i):not(.equipped-mark i):not(.lock-mark i),
body.mobile-mode .inv-cell > iconify-icon {
  font-size: 22px;
}
body.mobile-mode .market-item-ic > i,
body.mobile-mode .market-item-ic > iconify-icon { font-size: 26px; }
body.mobile-mode .bazaar-item-image > i,
body.mobile-mode .bazaar-item-image > iconify-icon { font-size: 28px; }
body.mobile-mode .box-drop-icon > i,
body.mobile-mode .box-drop-icon > iconify-icon { font-size: 24px; }
body.mobile-mode .equip-slot > i:not(.slot-label i):not(.equip-slot-empty-icon),
body.mobile-mode .equip-slot > iconify-icon:not(.equip-slot-empty-icon) { font-size: 22px; }

/* =====================================================================
   2026-05-16: MOBILE — pulido de modals (caverna, loot, mob, zone, chest)
   Objetivo: cada modal se centra con respiración, hero/header proporcional,
   body scrolleable, footer con CTAs siempre visible.
   ===================================================================== */

/* Wrapper común: ligeramente más padding lateral para que se vea "tarjeta",
   no fullscreen. */
body.mobile-mode .modal-overlay {
  padding: 14px 12px;
  align-items: center;
}

/* ===== ZONE MODAL (popup de viajar / detalles de zona) ===== */
body.mobile-mode .zone-modal {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 16px;
}
body.mobile-mode .zone-modal-hero { height: 140px; }
body.mobile-mode .zm-hero-content {
  bottom: 10px;
  left: 14px;
  right: 14px;
  gap: 10px;
}
body.mobile-mode .zone-modal-close {
  width: 32px; height: 32px;
  top: 10px; right: 10px;
  font-size: 14px;
}
body.mobile-mode .zone-modal-body {
  padding: 14px;
}
body.mobile-mode .zone-modal-actions {
  padding: 10px 14px 14px;
  gap: 8px;
}
body.mobile-mode .zone-modal-actions .btn {
  min-height: 44px;
  font-size: 13px;
}

/* ===== LOOT MODAL ("Ver loot" de mobs/jefes) ===== */
body.mobile-mode .loot-modal {
  max-width: 100%;
  max-height: 88vh;
  padding: 14px 14px 12px;
  border-radius: 16px;
}
body.mobile-mode .loot-modal-header {
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
body.mobile-mode .loot-modal-title { font-size: 16px; }
body.mobile-mode .loot-modal-sub { font-size: 11px; }
body.mobile-mode .loot-modal-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 2px;
}
body.mobile-mode .loot-section-title {
  font-size: 11.5px;
  margin: 10px 0 6px;
}
body.mobile-mode .loot-row {
  padding: 7px 9px;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
}
body.mobile-mode .loot-row-icon { font-size: 19px; }
body.mobile-mode .loot-row-name { font-size: 12.5px; }
body.mobile-mode .loot-row-desc { font-size: 10.5px; }
body.mobile-mode .loot-row-chance { font-size: 13px; }
body.mobile-mode .loot-row-chest-btn {
  font-size: 10.5px;
  padding: 3px 7px;
  margin-top: 3px;
}

/* ===== MDM MODAL (detalle de monstruo / boss) ===== */
body.mobile-mode .mdm-modal {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 16px;
}
body.mobile-mode .mdm-art { aspect-ratio: 16/10; }
body.mobile-mode .mdm-close {
  width: 32px; height: 32px;
  top: 10px; right: 10px;
  font-size: 14px;
}
body.mobile-mode .mdm-body { padding: 14px; }
body.mobile-mode .mdm-name { font-size: 19px; }
body.mobile-mode .mdm-meta-row { gap: 6px; flex-wrap: wrap; }

/* ===== DUNGEON ENTRY MODAL V2 (caverna) ===== */
body.mobile-mode .dgnm-modal-v2 {
  max-width: 100% !important;
  max-height: 92vh;
  border-radius: 16px;
}
body.mobile-mode .dgnm-hero { height: 130px; }
body.mobile-mode .dgnm-modal-v2 .ev-modal-close {
  width: 32px; height: 32px;
  top: 10px; right: 10px;
}
body.mobile-mode .dgnm-hero-content { padding: 12px 14px; }
body.mobile-mode .dgnm-modal-v2 .dgnm-title { font-size: 19px; }
body.mobile-mode .dgnm-modal-v2 .dgnm-tag {
  font-size: 9px;
  padding: 3px 9px;
  letter-spacing: 0.16em;
}
body.mobile-mode .dgnm-stat { padding: 10px 6px; }
body.mobile-mode .dgnm-stat i { font-size: 18px; }
body.mobile-mode .dgnm-stat-val { font-size: 13px; }
body.mobile-mode .dgnm-stat-lbl { font-size: 8.5px; }
body.mobile-mode .dgnm-body-v2 { padding: 12px 14px 8px; }
body.mobile-mode .dgnm-section { margin-bottom: 14px; }
body.mobile-mode .dgnm-section-title { font-size: 11px; }
body.mobile-mode .dgnm-rules li {
  font-size: 11.5px;
  padding: 6px 9px;
  gap: 7px;
}
body.mobile-mode .dgnm-floors {
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
body.mobile-mode .dgnm-floor {
  min-width: 70px;
  padding: 7px 8px;
}
body.mobile-mode .dgnm-floor-name { font-size: 10.5px; max-width: 80px; }
body.mobile-mode .dgnm-floor-lvl { font-size: 9.5px; }
body.mobile-mode .dgnm-boss-reward { padding: 8px 10px; gap: 8px; }
body.mobile-mode .dgnm-boss-reward i { font-size: 20px; }
body.mobile-mode .dgnm-reward-val { font-size: 13px; }
body.mobile-mode .dgnm-footer { padding: 10px 14px 14px; }

/* ===== CHEST CONTENTS MODAL (Ver cofre) ===== */
body.mobile-mode .chest-modal {
  max-width: 100%;
  max-height: 90vh;
  padding: 14px;
  border-radius: 16px;
}
body.mobile-mode .chest-modal-header { gap: 10px; padding-bottom: 10px; margin-bottom: 10px; }
body.mobile-mode .chest-modal-icon { width: 50px; height: 50px; font-size: 30px; }
body.mobile-mode .chest-modal-title { font-size: 16px; }
body.mobile-mode .chest-modal-sub { gap: 6px; }
body.mobile-mode .chest-rolls-badge { font-size: 9.5px; padding: 3px 8px; }
body.mobile-mode .chest-note { font-size: 11px; padding: 8px 10px; }
body.mobile-mode .chest-group-title { font-size: 10px; margin-bottom: 5px; }
body.mobile-mode .chest-row {
  padding: 6px 9px;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
}
body.mobile-mode .chest-row-icon { font-size: 19px; }
body.mobile-mode .chest-row-name { font-size: 12px; }
body.mobile-mode .chest-row-meta { font-size: 9.5px; }
body.mobile-mode .chest-row-pct { font-size: 12px; }

/* ===== Otros modals comunes — cerrar = más grande para tap ===== */
body.mobile-mode .ev-modal-close {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

/* En pantallas muy chicas (< 380px), apretamos más */
@media (max-width: 380px) {
  body.mobile-mode .modal-overlay { padding: 10px 8px; }
  body.mobile-mode .zone-modal-hero { height: 120px; }
  body.mobile-mode .dgnm-hero { height: 110px; }
  body.mobile-mode .dgnm-modal-v2 .dgnm-title,
  body.mobile-mode .zm-hero-title { font-size: 17px; }
  body.mobile-mode .loot-modal,
  body.mobile-mode .chest-modal,
  body.mobile-mode .dgnm-modal-v2,
  body.mobile-mode .mdm-modal,
  body.mobile-mode .zone-modal {
    max-height: 94vh;
  }
}

/* iOS: el bottom sheet (item-modal/bazaar) sufre cuando aparece el teclado.
   Para los modals normales nos aseguramos que el body sea scrolleable y los
   CTAs no queden tapados. */
body.mobile-mode .modal-body,
body.mobile-mode .loot-modal-body,
body.mobile-mode .dgnm-body-v2,
body.mobile-mode .chest-modal-body,
body.mobile-mode .zone-modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================================
   Botones de Telegram en pantalla de personaje (SOLO MOBILE)
   2026-05-18: canal, grupo y soporte como botones rápidos.
   ============================================================ */
.char-tg-row { display: none; }
body.mobile-mode .char-tg-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 10px 12px 14px;
}
body.mobile-mode .char-tg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(15,8,30,0.85), rgba(8,5,20,0.95));
  border: 1px solid rgba(38,154,232,0.45);
  border-radius: 12px;
  color: #6cd4ff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
body.mobile-mode .char-tg-btn i {
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(38,154,232,0.5));
}
body.mobile-mode .char-tg-btn:active {
  transform: scale(0.96);
}
body.mobile-mode .char-tg-channel   { border-color: rgba(95,166,255,0.45); color: #7fb8ff; }
body.mobile-mode .char-tg-channel i { color: #7fb8ff; filter: drop-shadow(0 0 8px rgba(95,166,255,0.6)); }
body.mobile-mode .char-tg-chat      { border-color: rgba(95,214,132,0.45); color: #7be8a4; }
body.mobile-mode .char-tg-chat i    { color: #7be8a4; filter: drop-shadow(0 0 8px rgba(95,214,132,0.6)); }
body.mobile-mode .char-tg-support   { border-color: rgba(255,210,74,0.45); color: #ffd97a; }
body.mobile-mode .char-tg-support i { color: #ffd97a; filter: drop-shadow(0 0 8px rgba(255,210,74,0.6)); }
body.mobile-mode .char-tg-lbl {
  font-family: var(--font-title, sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}