/* ============================================================
   L2 CARD GAME — MOBILE RESPONSIVE LAYER
   Aplica SOLO en resoluciones de celular (max-width: 480px).
   NO modifica ningún layout de escritorio.
   ============================================================ */

@media screen and (max-width: 480px) {

  /* ══════════════════════════════════════════════════════════
     TOKENS MÓVIL — tamaños reducidos para pantalla chica
     ══════════════════════════════════════════════════════════ */
  :root {
    --mob-card-w: 110px;
    --mob-card-h: 165px;
    --mob-card-hand-w: 82px;
    --mob-card-hand-h: 123px;
  }

  /* ══════════════════════════════════════════════════════════
     BASE / BODY
     ══════════════════════════════════════════════════════════ */
  html, body { font-size: 14px; }

  /* ══════════════════════════════════════════════════════════
     HEADER — v116: hamburguesa + logo + profile compacto +
     hq-btns en fila propia + volumen con tap-target grande
     Distribución: row1 [hamb][logo][profile][vol][inicio]
                   row2 [shop][info][daily][dc]
     ══════════════════════════════════════════════════════════ */
  #header {
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .header-logo {
    font-size: 15px;
    letter-spacing: 1.5px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 2;
  }
  .header-hamburger { order: 1; }
  .header-profile   { order: 3; }
  .header-right     { order: 4; }
  .header-quick-btns{ order: 5; width: 100%; justify-content: space-around; }

  .header-user {
    font-size: 11px;
    gap: 8px;
  }
  .btn-reset { font-size: 11px; padding: 6px 10px; min-height: 38px; }
  .btn-inicio { font-size: 10px !important; padding: 6px 8px !important; min-height: 38px; }

  /* Profile panel — compact on mobile (avatar + level, sin texto) */
  .header-profile {
    padding: 4px !important;
    gap: 6px !important;
    flex-shrink: 0;
    min-width: 0;
  }
  .header-profile .hp-info { display: none; }
  .header-profile .hp-arrow { display: none; }
  .header-profile .hp-avatar-wrap { width: 38px !important; height: 38px !important; }
  .header-profile .hp-avatar { width: 38px !important; height: 38px !important; }
  .header-profile .hp-level-badge {
    font-size: 9px !important;
    padding: 1px 5px !important;
  }

  /* Header quick-buttons — fila propia debajo, repartidos */
  .header-quick-btns {
    gap: 6px !important;
    flex-wrap: nowrap;
    padding-top: 4px;
    border-top: 1px solid rgba(212,175,55,0.08);
    margin-top: 2px;
  }
  .hq-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
    flex: 1 1 auto;
    max-width: 80px;
  }
  .hq-icon { font-size: 18px !important; }
  .hq-label { display: none; } /* solo iconos en mobile */

  /* Volume control: BOTÓN MUTE grande y seguro al tap (fix bug mobile) */
  .vol-ctrl {
    padding: 2px 6px 2px 2px !important;
    gap: 4px !important;
    flex-shrink: 0;
  }
  .vol-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 20px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px;
    background: rgba(212,175,55,0.08);
    -webkit-tap-highlight-color: rgba(212,175,55,0.3);
    touch-action: manipulation;
  }
  .vol-btn:active { background: rgba(212,175,55,0.25); transform: scale(0.95); }
  .vol-slider {
    width: 56px !important;
    height: 20px !important; /* track grueso para pulgar */
    padding: 8px 0 !important;
    background: transparent !important;
  }
  /* Thumb más grande para touch */
  .vol-slider::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
  }
  .vol-slider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
  }

  /* Header-right queda a la derecha de la primera fila */
  .header-right {
    gap: 6px !important;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  /* Hamburger visible en mobile + tap target pleno */
  .header-hamburger {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════════════
     NAV TABS
     ══════════════════════════════════════════════════════════ */
  #nav {
    padding: 4px 6px;
    gap: 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #nav::-webkit-scrollbar { display: none; }
  .nav-tab {
    font-size: 10px;
    letter-spacing: 1px;
    padding: 9px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════════════
     STATS BAR
     ══════════════════════════════════════════════════════════ */
  #stats-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  #stats-bar::-webkit-scrollbar { display: none; }
  .sb-item {
    padding: 7px 12px;
    font-size: 11px;
    gap: 5px;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════════════
     MAIN CONTENT
     ══════════════════════════════════════════════════════════ */
  #main { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .tab-content { padding: 16px 12px; }

  /* ══════════════════════════════════════════════════════════
     BUTTONS — más grandes para touch
     ══════════════════════════════════════════════════════════ */
  .btn {
    font-size: 12px;
    letter-spacing: 2px;
    padding: 12px 18px;
    min-height: 44px;
  }
  .btn.sm { font-size: 11px; padding: 9px 14px; min-height: 38px; }

  /* ══════════════════════════════════════════════════════════
     COLECCIÓN — card grid
     ══════════════════════════════════════════════════════════ */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--mob-card-w), 1fr));
    gap: 10px;
  }
  .tcg-card {
    width: var(--mob-card-w) !important;
    height: var(--mob-card-h) !important;
  }
  .tcg-card:hover { transform: none; } /* no hover on touch */

  .tcg-name       { font-size: 8px !important; letter-spacing: 0.5px !important; }
  .tcg-level      { font-size: 8px !important; }
  .tcg-hp, .tcg-atk, .tcg-def { font-size: 8px !important; }
  .tcg-ability-text { font-size: 7px !important; }
  .tcg-mob-icon   { font-size: 36px !important; }

  /* ══════════════════════════════════════════════════════════
     DECK BUILDER
     ══════════════════════════════════════════════════════════ */
  .deck-layout {
    grid-template-columns: 1fr !important;
  }
  .picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--mob-card-w), 1fr)) !important;
    gap: 8px !important;
  }
  .picker-card .tcg-card {
    width: var(--mob-card-w) !important;
    height: var(--mob-card-h) !important;
  }
  .deck-slots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .deck-slot-card .tcg-card {
    width: 60px !important;
    height: 90px !important;
  }

  /* ══════════════════════════════════════════════════════════
     SHOP / PACKS
     ══════════════════════════════════════════════════════════ */
  .packs-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .pack-box { padding: 18px 12px 14px; }
  .pack-icon { font-size: 36px !important; margin-bottom: 8px; }
  .pack-title { font-size: 11px !important; }
  .pack-desc  { font-size: 10px !important; }
  .pack-odds  { font-size: 10px !important; }

  /* Pack opening overlay */
  #pack-overlay { padding: 14px 8px; gap: 10px; }
  .pack-overlay-title { font-size: 18px !important; }
  .pack-cards-row { gap: 8px; }
  .pack-card-wrap {
    width: var(--mob-card-w) !important;
    height: var(--mob-card-h) !important;
  }

  /* ══════════════════════════════════════════════════════════
     COMBAT SCREEN — v116: cartas SIEMPRE visibles en mobile
     Mantenemos el layout horizontal de desktop pero proporcional:
       [carta jugador] [orb PVP] [carta enemigo]
     Avatares y combat-profile se ocultan (el perfil está en el
     header y el profile modal). HUD top compacto, hand + botones
     como bottom sheet. TODO escala con clamp() entre 360–480px.
     ══════════════════════════════════════════════════════════ */
  #combat-screen { font-size: 12px; }

  /* Ocultar elementos decorativos que roban espacio horizontal */
  .arena-log-panel        { display: none !important; }
  .arena-npc              { display: none !important; }
  .arena-avatar           { display: none !important; }
  .npc-rival-img,
  .npc-player-img         { display: none !important; }
  .combat-profile         { display: none !important; }

  /* Botón "Ver Log" no debe tapar la mano de cartas */
  .log-toggle-btn {
    bottom: auto !important;
    top: 50px !important;
    right: 6px !important;
    font-size: 10px !important;
    padding: 6px 10px !important;
  }

  /* ══ HUD SUPERIOR — compacto en 1 fila ══ */
  .arena-hud-top {
    padding: 6px 8px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .arena-hud-left {
    gap: 6px !important;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0; /* permite truncar */
  }
  .arena-hud-right { flex-shrink: 0; }
  .arena-btn-surrender {
    font-size: 10px !important;
    letter-spacing: 1px !important;
    padding: 6px 8px !important;
    min-height: 36px;
    flex-shrink: 0;
  }
  .arena-audio-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 14px !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .arena-zone-name {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .arena-turn-badge {
    font-size: 10px !important;
    letter-spacing: 1px !important;
    padding: 3px 8px !important;
    flex-shrink: 0;
  }
  .arena-enemy-info {
    font-size: 10px !important;
    gap: 5px !important;
  }

  /* ══ MAZO ENEMIGO ARRIBA (cartas face-down horizontales chicas) ══ */
  .enemy-hand-row {
    padding: 4px 8px !important;
    gap: 3px !important;
  }
  .enemy-hand-display {
    gap: 4px !important;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .enemy-card-back {
    width: 34px !important;
    height: 50px !important;
  }
  .enemy-card-back .ecb-symbol { font-size: 13px !important; }
  .ecb-dead-x { font-size: 18px !important; }

  /* ══ ARENA CENTRAL — LAYOUT HORIZONTAL (NO stackear columna!) ══ */
  .arena-main {
    flex-direction: row !important;      /* << clave: NO column */
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Slots de carta (jugador + enemigo) */
  .arena-field-slot {
    gap: 4px !important;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Cartas en campo — tamaño proporcional al viewport */
  .zone-card-slot {
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .zone-card-slot .tcg-card {
    width:  clamp(105px, 30vw, 145px) !important;
    height: clamp(158px, 45vw, 218px) !important;
  }
  .zone-card-slot .field-empty {
    width:  clamp(95px, 27vw, 130px) !important;
    min-height: clamp(145px, 42vw, 200px) !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
  .zone-card-slot .field-empty::before { font-size: 16px !important; }

  /* HP bar externa — ancho igual a la carta */
  .field-hp-external {
    max-width: clamp(105px, 30vw, 145px) !important;
  }
  .ext-hp-wrap { padding: 3px 5px !important; }
  .ext-hp-name { font-size: 9px !important; letter-spacing: 0.5px !important; }
  .ext-hp-lv   { font-size: 9px !important; }
  .ext-hp-nums { font-size: 9px !important; }
  .ext-hp-bar-bg { height: 5px !important; }

  /* PVP orb central — miniaturizado */
  .arena-pvp-center {
    padding: 0 2px !important;
    gap: 4px !important;
    flex: 0 0 auto;
  }
  .arena-pvp-center .arena-vs-orb,
  .arena-vs-orb {
    width: 32px !important;
    height: 32px !important;
    font-size: 9px !important;
  }
  .arena-vs-orb .vs-text { font-size: 9px !important; letter-spacing: 1px !important; }
  .arena-pvp-divider { display: none !important; }

  /* ══ PANEL DE ACCIÓN INFERIOR — compacto, NO se corta ══ */
  .arena-action-panel { flex-shrink: 0; }
  .arena-bottom-row {
    padding: 6px 8px !important;
    gap: 6px !important;
    align-items: center !important;
  }

  /* Cartas de la mano — scroll horizontal, tamaño proporcional */
  .arena-hand-section {
    padding: 2px 4px !important;
    flex: 1;
    min-width: 0;
  }
  .arena-hand-label {
    font-size: 9px !important;
    letter-spacing: 1px !important;
    margin-bottom: 3px !important;
  }
  .arena-hand-cards {
    gap: 5px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .arena-hand-cards::-webkit-scrollbar { display: none; }
  .hand-card-wrap .tcg-card,
  .arena-hand-cards .tcg-card {
    width:  clamp(72px, 22vw, 95px) !important;
    height: clamp(108px, 33vw, 142px) !important;
  }

  /* Botones de acción — 44px touch, columna vertical compacta */
  .arena-action-btns {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
    flex-shrink: 0;
    align-items: stretch !important;
  }
  .arena-attack-btn,
  .arena-auto-btn,
  .arena-speed-btn,
  .arena-action-btn {
    min-height: 44px !important;
    height: auto !important;
    width: 86px !important;
    min-width: 86px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
  }
  .arena-attack-btn {
    min-height: 52px !important;
  }
  .attack-btn-icon   { font-size: 14px !important; margin-bottom: 0 !important; }
  .attack-btn-text   { font-size: 10px !important; letter-spacing: 1px !important; }
  .attack-btn-cost   { font-size: 8px !important; }
  .arena-btn-icon,
  .auto-icon,
  #speed-icon        { font-size: 14px !important; }
  .arena-btn-label,
  .auto-label,
  #speed-label       { font-size: 9px !important; letter-spacing: 1px !important; }
  .char-attack-btn .arena-btn-label { font-size: 9px !important; }

  /* Banners y end-overlay */
  .game-end-icon  { font-size: 56px !important; }
  .game-end-title { font-size: 22px !important; }
  .game-end-sub   { font-size: 12px !important; }
  .game-end-reward { font-size: 11px !important; }
  .turn-banner-text { font-size: 20px !important; letter-spacing: 4px !important; }
  .turn-banner-sub  { font-size: 11px !important; }

  /* ══════════════════════════════════════════════════════════
     PvE SCREENS (fullscreen)
     ══════════════════════════════════════════════════════════ */
  .pve-screen-header { padding: 10px 14px; gap: 8px; }
  .pve-screen-title  { font-size: 14px !important; letter-spacing: 2px !important; }
  .pve-screen-info   { font-size: 10px !important; }
  .pve-back-btn      { font-size: 12px !important; padding: 8px 12px !important; min-height: 40px; }
  .pve-screen-body   { padding: 12px !important; }

  /* PvE menu cards */
  .pve-mode-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .pve-mode-card { padding: 18px 14px !important; }
  .pve-mode-icon  { font-size: 32px !important; }
  .pve-mode-name  { font-size: 14px !important; }
  .pve-mode-desc  { font-size: 11px !important; }

  /* ══════════════════════════════════════════════════════════
     MODO HISTORIA — TI campaign overlay
     ══════════════════════════════════════════════════════════ */
  #ti-campaign-overlay { padding: 12px 10px; }
  .ti-header { padding: 12px 10px; }
  .ti-title  { font-size: 18px !important; }
  .ti-path   { gap: 12px; }
  .ti-node-inner { gap: 10px; padding: 10px 10px; }
  .ti-npc-name   { font-size: 13px !important; }
  .ti-npc-role   { font-size: 10px !important; }
  .ti-npc-desc   { font-size: 10px !important; }

  /* Zones grid */
  .zones-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .zone-card { padding: 14px 12px !important; }

  /* ══════════════════════════════════════════════════════════
     MODO AVENTURA — mapa de zonas
     ══════════════════════════════════════════════════════════ */
  .av-map-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }
  .av-zone-map {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
    gap: 8px;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    max-height: 80px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .av-zone-map::-webkit-scrollbar { display: none; }
  .av-zone-node {
    flex-direction: column;
    padding: 8px 10px;
    min-width: 80px;
    gap: 4px;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
  }
  .av-zone-icon  { font-size: 18px; }
  .av-zone-name  { font-size: 9px !important; }
  .av-zone-range { font-size: 8px !important; }
  .av-zone-connector { display: none; }

  .av-zone-panel { padding: 12px 10px; }
  .av-zone-detail-icon { font-size: 24px !important; }
  .av-zone-detail-name { font-size: 14px !important; letter-spacing: 2px !important; }
  .av-zone-detail-range { font-size: 10px !important; }
  .av-zone-char-row { font-size: 10px !important; gap: 8px; }
  .av-zone-detail .av-enemy-preview { min-height: 160px; padding: 10px; }
  .av-card-wrap .tcg-card {
    width: var(--mob-card-w) !important;
    height: var(--mob-card-h) !important;
  }
  .av-zone-actions { gap: 8px; }
  .av-play-btn, .av-fight-btn { min-height: 44px; font-size: 12px !important; }

  /* Aventura combat screen — v117: HORIZONTAL 3-col igual a desktop
     pero proporcional. Personaje-izq | VS-centro | Carta-der.
     La animación de ataque ya es horizontal (translateX) y se ve bien así. */
  #aventura-combat-screen .av-combat-arena {
    /* Override desktop media-query that colapsa a 1 columna <=600px */
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto !important;
    gap: clamp(4px, 1.5vw, 8px) !important;
    padding: 6px clamp(4px, 2vw, 10px) !important;
    align-items: center !important;
    overflow-y: auto;
  }
  .av-combat-player,
  .av-combat-enemy {
    gap: 5px !important;
    min-width: 0;
  }
  /* Retrato del personaje: más chico para caber en 390px */
  .av-combat-portrait {
    width:  clamp(92px, 30vw, 135px) !important;
    height: clamp(120px, 38vw, 175px) !important;
  }
  .av-combat-name { font-size: 11px !important; letter-spacing: 1px !important; }

  /* HP bars */
  .av-combat-hp-txt,
  .av-ext-hp-nums { font-size: 10px !important; }
  .av-ext-hp-wrap { max-width: clamp(110px, 34vw, 160px) !important; }
  .av-ext-hp-bar-bg { height: 9px !important; }

  /* VS badge central bien chico para dar espacio a los laterales */
  .av-combat-center { gap: 6px !important; min-width: 0; }
  .av-combat-vs-badge {
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
    border-width: 2px !important;
  }
  /* Log escondido en mobile (había un max-height fijo, lo sacamos porque
     no hay espacio vertical útil entre los 3 elementos horizontales). */
  .av-combat-log {
    display: none !important;
  }

  /* Carta enemiga — proporcional al ancho disponible */
  .av-enemy-card-wrap { width: 100%; }
  .av-enemy-card-wrap .tcg-card {
    width:  clamp(110px, 33vw, 155px) !important;
    height: clamp(165px, 50vw, 232px) !important;
  }

  /* Acciones — solo Atacar + Automático ahora (Pasar se removió) */
  .av-combat-actions {
    padding: 8px 8px !important;
    gap: 8px !important;
    flex-wrap: nowrap;
  }
  .av-action-attack,
  .av-action-auto,
  .av-attack-btn {
    min-height: 48px !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .av-action-icon { font-size: 14px !important; }
  .av-action-label { font-size: 10px !important; letter-spacing: 1px !important; }
  .av-flee-btn {
    font-size: 10px !important;
    padding: 6px 10px !important;
    min-height: 36px;
  }
  .av-combat-title { font-size: 12px !important; letter-spacing: 1px !important; }
  .av-turn-pill { font-size: 9px !important; padding: 2px 8px !important; }
  .av-combat-spacer { flex: 0 0 30px !important; }

  /* Buff indicator + skill bar (skills bajo el personaje = "poder de habilidad") */
  .av-player-stats { font-size: 10px !important; gap: 6px !important; }
  .av-pstat        { font-size: 10px !important; }
  .av-skill-bar    { gap: 4px !important; justify-content: center; flex-wrap: wrap; }

  /* Reward popup */
  .av-reward-inner { padding: 22px 20px; }
  .av-reward-title { font-size: 22px !important; }
  .av-reward-xp    { font-size: 16px !important; }
  .av-reward-drop  { font-size: 13px !important; }

  /* ══════════════════════════════════════════════════════════
     MODO RAID BOSS
     ══════════════════════════════════════════════════════════ */
  .raid-path { gap: 12px; }
  .raid-group { border-radius: 8px; }
  .raid-group-header { padding: 12px 12px !important; }
  .raid-group-label  { font-size: 12px !important; }
  .raid-group-prog   { font-size: 11px !important; }
  .raid-boss-list    { gap: 8px !important; padding: 8px !important; }
  .raid-boss-row     { padding: 10px 10px !important; gap: 8px !important; flex-wrap: wrap; }
  .rb-boss-name      { font-size: 12px !important; }
  .rb-boss-level     { font-size: 11px !important; }
  .rb-fight-btn      { min-height: 40px; font-size: 11px !important; }

  /* ══════════════════════════════════════════════════════════
     CHARACTER PROFILE MODAL
     ══════════════════════════════════════════════════════════ */
  .cpm-panel {
    padding: 20px 14px !important;
    max-height: 95vh !important;
    margin: 10px;
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }
  .cpm-top { flex-direction: column; align-items: center; gap: 12px; }
  .cpm-portrait-wrap { width: 80px; height: 100px; }
  .cpm-char-name { font-size: 18px !important; }
  .cpm-char-race { font-size: 11px !important; }
  .cpm-section-title { font-size: 10px !important; }

  /* Equipment grid — 4 cols on mobile is fine */
  .cpm-equip-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
  }
  .cpm-equip-slot { min-height: 60px !important; padding: 6px 3px !important; }
  .cpm-slot-icon  { font-size: 18px !important; }
  .cpm-slot-name  { font-size: 8px !important; }
  .cpm-slot-stats { font-size: 7px !important; }
  .cpm-slot-label { font-size: 7px !important; }

  /* Inventory grid — 4 cols on mobile */
  .cpm-inv-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  .cpm-inv-slot { min-height: 50px !important; }
  .cpm-inv-icon { font-size: 16px !important; }
  .cpm-inv-name { font-size: 7px !important; }
  .cpm-inv-stats { font-size: 6px !important; }

  /* Stats grid — 1 col on small screens */
  .cpm-stats { grid-template-columns: 1fr !important; gap: 5px !important; }
  .cpm-stat-label { font-size: 9px !important; }
  .cpm-stat-val   { font-size: 10px !important; }

  /* Powers */
  .cpm-powers { gap: 6px; }
  .cpm-power  { padding: 8px 10px !important; gap: 8px; }
  .cpm-power-name { font-size: 11px !important; }
  .cpm-power-desc { font-size: 10px !important; }

  /* ══════════════════════════════════════════════════════════
     GACHA
     ══════════════════════════════════════════════════════════ */
  .gacha-layout {
    grid-template-columns: 1fr !important;
  }
  .gacha-slot {
    padding: 12px 10px !important;
  }
  .gacha-slot .tcg-card {
    width: var(--mob-card-w) !important;
    height: var(--mob-card-h) !important;
  }

  /* ══════════════════════════════════════════════════════════
     DC STORE
     ══════════════════════════════════════════════════════════ */
  .dc-plans-grid {
    grid-template-columns: 1fr !important;
  }
  .dc-plan { padding: 16px 14px !important; }
  .dc-plan-amount { font-size: 22px !important; }
  .dc-plan-price  { font-size: 13px !important; }

  /* ══════════════════════════════════════════════════════════
     CHARACTER CREATION
     ══════════════════════════════════════════════════════════ */
  .cc-races {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cc-race-card { padding: 14px 10px !important; }
  .cc-race-icon { font-size: 28px !important; }
  .cc-race-name { font-size: 12px !important; }
  .cc-variants-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cc-variant-card { padding: 12px 8px !important; }
  .cc-summary { padding: 16px !important; }

  /* ══════════════════════════════════════════════════════════
     MISC — toasts, overlays
     ══════════════════════════════════════════════════════════ */
  #toast {
    font-size: 12px !important;
    padding: 10px 16px !important;
    max-width: 90vw !important;
    bottom: 70px !important; /* above nav on mobile */
  }

  /* Level-up banner */
  #levelup-banner {
    font-size: 14px !important;
    padding: 14px 20px !important;
  }

  /* Game-end overlay buttons */
  #game-end-overlay .btn {
    min-height: 48px;
    font-size: 12px !important;
    padding: 12px 20px !important;
  }

  /* Scrollbar hide on all scrollable elements */
  .pve-screen-body::-webkit-scrollbar,
  .cpm-panel::-webkit-scrollbar,
  #main::-webkit-scrollbar { width: 2px; }

  /* ══════════════════════════════════════════════════════════
     INFO MODAL — mobile: ocupa casi toda la pantalla
     ══════════════════════════════════════════════════════════ */
  .info-modal-overlay { padding: 8px !important; }
  .info-modal-panel {
    max-height: 95vh !important;
    border-radius: 12px !important;
  }
  .info-modal-header { padding: 12px 14px !important; }
  .info-modal-title { font-size: 14px !important; letter-spacing: 2px !important; }
  .info-modal-close {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  .info-modal-body {
    padding: 14px 14px 18px !important;
    gap: 16px !important;
  }
  .info-section-title { font-size: 11px !important; letter-spacing: 2px !important; }
  .info-rarity-card { padding: 10px 12px !important; }
  .info-rar-name { font-size: 12px !important; letter-spacing: 1.5px !important; }
  .info-rar-lines { font-size: 11px !important; }
  .info-rules-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .info-rule-card { padding: 10px 12px !important; }
  .info-rule-title { font-size: 11px !important; letter-spacing: 1.5px !important; }
  .info-rule-text { font-size: 11px !important; line-height: 1.5 !important; }

  /* ══════════════════════════════════════════════════════════
     DRAWER — mobile: ancho y cerca del borde superior
     ══════════════════════════════════════════════════════════ */
  .menu-drawer { width: min(82vw, 300px) !important; }
  .md-header { padding: 14px 16px 12px !important; }
  .md-title { font-size: 17px !important; letter-spacing: 3px !important; }
  .md-close {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  .md-links { padding: 12px 10px !important; gap: 5px !important; }
  .md-link {
    padding: 12px 14px !important;
    min-height: 54px !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
  }
  .md-link .md-ico { font-size: 22px !important; }

} /* end @media max-width: 480px */

/* ══════════════════════════════════════════════════════════
   TABLET — 481px to 768px (mejoras menores)
   ══════════════════════════════════════════════════════════ */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 14px;
  }
  .tcg-card { width: 145px !important; height: 218px !important; }
  .nav-tab  { font-size: 11px; padding: 9px 14px; letter-spacing: 2px; }
  .pve-mode-grid { grid-template-columns: 1fr 1fr !important; }
  .arena-log-panel { display: none !important; }
  .zone-card-slot .tcg-card { width: 130px !important; height: 195px !important; }
}