/* =====================================================================
   MOB MODAL V3 — Cinematic Codex (2026-05-30)
   Layout cinemático 2 columnas. v2 sigue siendo backup.
   Prefix: .mdm3-*

   Estructura:
   ┌──────────────┬──────────────────────────┐
   │  HERO IMG    │ X close                  │
   │  (framed)    │ ╔═ JEFE pill             │
   │  [NIVEL 32]  │ CENTINELA                │
   │              │ DE LAS RAZAS             │
   │              │ ❤ HP ████████ 41K/41K    │
   │  LOOT POSIBLE│ ─── ESTADÍSTICAS ───     │
   │  [□][□][□]   │ ⚔ Daño         1.181     │
   │              │ 🛡 Defensa       861     │
   │              │ 👣 Esquiva        8%     │
   │              │ 🪙 Oro          50-80    │
   │              │ ⭐ Experiencia  620 XP   │
   │              │ 🏆 Victorias    0/15     │
   │              │ ╔══════════════════════╗ │
   │              │ ║   ⚔ ATACAR   ⚡12   ║ │
   │              │ ╚══════════════════════╝ │
   └──────────────┴──────────────────────────┘
   ===================================================================== */

.mdm3-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,3,2,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 16px;
  overflow-y: auto;
}

.mdm3-modal {
  --mdm3-bg:        #0a0805;
  --mdm3-bg-2:      #18120a;
  --mdm3-border:    rgba(212,180,131,0.30);
  --mdm3-border-strong: rgba(244,216,150,0.55);
  --mdm3-gold:      #d4b483;
  --mdm3-gold-hi:   #f4d896;
  --mdm3-gold-grad: linear-gradient(180deg, #ffe79c 0%, #f4c876 38%, #c9923a 72%, #8e5e1d 100%);
  --mdm3-text:      #ece2cd;
  --mdm3-text-soft: #b8a884;
  --mdm3-text-dim:  #7a6850;
  --mdm3-rarity:    #b884ff;  /* common = arcane */
  /* stat tints */
  --mdm3-red:       #ff4757;
  --mdm3-emerald:   #5fd684;
  --mdm3-cyan:      #5fcfff;
  --mdm3-blood:     #ff5a8e;
  --mdm3-purple:    #b884ff;

  width: min(96vw, 720px);
  max-height: 94vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 22% 38%, color-mix(in srgb, var(--mdm3-gold) 12%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 75% 8%, rgba(255,138,76,0.06) 0%, transparent 50%),
    linear-gradient(180deg, var(--mdm3-bg-2) 0%, var(--mdm3-bg) 100%);
  border: 1.5px solid var(--mdm3-border);
  border-radius: 14px;
  box-shadow:
    0 50px 120px -20px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--mdm3-text);
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mdm3-modal.is-boss { --mdm3-rarity: #ffc857; }

/* Inner ornate frame */
.mdm3-modal::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 30%, transparent);
  border-radius: 9px; pointer-events: none;
  z-index: 0;
}

/* Diamond markers en bordes (decorativos) */
.mdm3-modal > .mdm3-deco-diamond {
  position: absolute; z-index: 4;
  width: 10px; height: 10px;
  background: var(--mdm3-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--mdm3-gold);
}
.mdm3-deco-diamond.is-tl { top: 3px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.mdm3-deco-diamond.is-bl { bottom: 3px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.mdm3-deco-diamond.is-ml { left: 3px; top: 50%; transform: translateY(-50%) rotate(45deg); }
.mdm3-deco-diamond.is-mr { right: 3px; top: 50%; transform: translateY(-50%) rotate(45deg); }

/* Close button — hexagonal-ish */
.mdm3-close {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 38px; height: 38px;
  background: linear-gradient(180deg, rgba(60,40,18,0.85), rgba(28,18,8,0.95));
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 50%, transparent);
  color: var(--mdm3-gold-hi); display: grid; place-items: center;
  font-size: 18px; cursor: pointer; transition: all .15s;
  clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
}
.mdm3-close:hover { background: linear-gradient(180deg, rgba(110,70,30,0.95), rgba(60,38,16,0.95)); }

/* ============== MAIN 2-COL GRID ============== */
.mdm3-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  padding: 22px 22px 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mdm3-border) transparent;
}
.mdm3-grid::-webkit-scrollbar { width: 6px; }
.mdm3-grid::-webkit-scrollbar-thumb { background: var(--mdm3-border); border-radius: 3px; }

/* ============== LEFT COLUMN: image + loot ============== */
.mdm3-left { display: flex; flex-direction: column; gap: 16px; }

/* Big image frame */
.mdm3-imgframe {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  padding: 6px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--mdm3-gold) 65%, transparent) 0%,
      color-mix(in srgb, var(--mdm3-gold) 18%, transparent) 50%,
      color-mix(in srgb, var(--mdm3-gold) 55%, transparent) 100%);
  box-shadow:
    0 0 32px -8px color-mix(in srgb, var(--mdm3-rarity) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.mdm3-imgframe-cell {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 6px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--mdm3-rarity) 22%, transparent) 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(212,180,131,0.10) 0%, rgba(0,0,0,0.5) 75%),
    linear-gradient(180deg, #1a120a 0%, #0a0604 100%);
  display: grid; place-items: center;
}
.mdm3-imgframe-img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mdm3-imgframe-fallback {
  font-size: 110px;
  color: var(--mdm3-rarity);
  text-shadow: 0 0 36px color-mix(in srgb, var(--mdm3-rarity) 70%, transparent);
}

/* Corner diamonds on image frame */
.mdm3-imgframe::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, var(--mdm3-gold-hi) 0%, var(--mdm3-gold-hi) 1.5px, transparent 2px) 6px 6px / 6px 6px no-repeat,
    radial-gradient(circle, var(--mdm3-gold-hi) 0%, var(--mdm3-gold-hi) 1.5px, transparent 2px) calc(100% - 6px) 6px / 6px 6px no-repeat,
    radial-gradient(circle, var(--mdm3-gold-hi) 0%, var(--mdm3-gold-hi) 1.5px, transparent 2px) 6px calc(100% - 6px) / 6px 6px no-repeat,
    radial-gradient(circle, var(--mdm3-gold-hi) 0%, var(--mdm3-gold-hi) 1.5px, transparent 2px) calc(100% - 6px) calc(100% - 6px) / 6px 6px no-repeat;
}

/* Big level chip below image (overlapping bottom) */
.mdm3-levelchip {
  position: absolute;
  left: 50%; bottom: -16px;
  transform: translateX(-50%);
  min-width: 90px;
  padding: 6px 18px 8px;
  background: linear-gradient(180deg, #2a1d12 0%, #160d06 100%);
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 55%, transparent);
  border-radius: 10px;
  text-align: center;
  box-shadow:
    0 6px 16px -6px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  z-index: 3;
}
.mdm3-levelchip-label {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-family: 'Cinzel', serif; font-size: 9px;
  font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mdm3-gold-hi);
}
.mdm3-levelchip-label i { font-size: 9px; }
.mdm3-levelchip-num {
  font-family: 'Cinzel', serif; font-size: 22px;
  font-weight: 700; color: var(--mdm3-text);
  line-height: 1; margin-top: 2px;
}

/* 2026-06-02 T2: Loot button simplificado (sin preview de items)
   Botón único CTA con chest icon + label + count chip a la derecha */
.mdm3-loot-btn {
  width: 100%;
  margin-top: 16px;
  padding: 11px 12px;
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, rgba(212,180,131,0.10), rgba(20,12,4,0.55));
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 35%, transparent);
  border-radius: 10px;
  color: var(--mdm3-gold);
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.mdm3-loot-btn:hover {
  background: linear-gradient(180deg, rgba(212,180,131,0.18), rgba(30,18,6,0.65));
  border-color: color-mix(in srgb, var(--mdm3-gold) 65%, transparent);
  box-shadow: 0 6px 18px -8px rgba(212,180,131,0.55);
  transform: translateY(-1px);
  color: var(--mdm3-gold-hi);
}
.mdm3-loot-btn-ic {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--mdm3-gold) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 50%, transparent);
  border-radius: 6px;
  color: var(--mdm3-gold-hi);
  font-size: 15px;
  flex-shrink: 0;
}
.mdm3-loot-btn-label { flex: 1; text-align: left; }
.mdm3-loot-btn-count {
  display: inline-grid; place-items: center;
  min-width: 28px; padding: 4px 9px;
  background: color-mix(in srgb, var(--mdm3-gold) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 55%, transparent);
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 800;
  color: var(--mdm3-gold-hi);
  letter-spacing: 0;
  text-shadow: 0 0 6px color-mix(in srgb, var(--mdm3-gold-hi) 30%, transparent);
}

/* ============== RIGHT COLUMN ============== */
.mdm3-right {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; /* permitir shrink */
}

/* JEFE / COMMON pill */
.mdm3-rarity {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 18px;
  background: linear-gradient(180deg, #1f160c 0%, #100a05 100%);
  border: 1px solid color-mix(in srgb, var(--mdm3-rarity) 55%, transparent);
  border-radius: 8px;
  font-family: 'Cinzel', serif; font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mdm3-rarity);
}
.mdm3-rarity i { font-size: 12px; }

/* Mob name */
.mdm3-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 38px; letter-spacing: 0.04em;
  color: var(--mdm3-text);
  background: linear-gradient(180deg, #fff7e6 0%, #d4b483 60%, #a07b3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 20px color-mix(in srgb, var(--mdm3-rarity) 30%, transparent);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
.mdm3-name-sub {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 4px;
  font-family: 'Cinzel', serif; font-size: 16px;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mdm3-text-soft);
}
.mdm3-name-sub::before,
.mdm3-name-sub::after {
  content: ''; width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mdm3-gold), transparent);
}

/* HP card */
.mdm3-hp {
  margin-top: 4px;
  padding: 11px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,90,142,0.04), rgba(0,0,0,0.30));
  border: 1px solid rgba(255,90,142,0.30);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
}
.mdm3-hp-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: rgba(255,90,142,0.12);
  border: 1px solid rgba(255,90,142,0.40);
  border-radius: 6px;
  color: var(--mdm3-blood);
  font-size: 14px;
}
.mdm3-hp-bar-wrap {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.mdm3-hp-label {
  font-family: 'Cinzel', serif; font-size: 10px;
  font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mdm3-blood);
}
.mdm3-hp-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(0,0,0,0.5);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.mdm3-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff7da9 0%, #ff2e6a 50%, #b91f4d 100%);
  border-radius: 999px;
  box-shadow:
    0 0 14px rgba(255,71,87,0.55),
    inset 0 0 8px rgba(255,255,255,0.18);
}
.mdm3-hp-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 700;
  color: var(--mdm3-text);
  white-space: nowrap;
}

/* Stats label "ESTADISTICAS" with diamond decorations */
.mdm3-stats-label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: 'Cinzel', serif; font-size: 12px;
  font-weight: 800; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--mdm3-gold);
  margin: 6px 0 2px;
  text-shadow: 0 0 10px rgba(212,180,131,0.30);
}
.mdm3-stats-label::before,
.mdm3-stats-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mdm3-gold), transparent);
}
.mdm3-stats-label i {
  color: var(--mdm3-gold-hi);
  font-size: 8px;
  transform: rotate(45deg);
}

/* Stats list */
.mdm3-stats { display: grid; gap: 5px; }
.mdm3-stat {
  --stat-tint: var(--mdm3-gold);
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--stat-tint) 14%, transparent) 0%,
    rgba(0,0,0,0.30) 70%);
  border: 1px solid color-mix(in srgb, var(--stat-tint) 30%, transparent);
  border-radius: 8px;
}
.mdm3-stat-ic {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--stat-tint) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--stat-tint) 45%, transparent);
  border-radius: 6px;
  color: var(--stat-tint);
  font-size: 14px;
}
.mdm3-stat-lbl {
  font-family: 'Cinzel', serif; font-size: 12px;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mdm3-text);
}
.mdm3-stat-val {
  font-family: 'Cinzel', serif; font-size: 16px;
  font-weight: 700;
  color: var(--stat-tint);
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--stat-tint) 25%, transparent);
}
/* Stat color variants */
.mdm3-stat.is-dmg    { --stat-tint: #ff5a6a; }
.mdm3-stat.is-def    { --stat-tint: #ffc857; }
.mdm3-stat.is-dodge  { --stat-tint: #5fd684; }
.mdm3-stat.is-gold   { --stat-tint: #ffd54a; }
.mdm3-stat.is-xp     { --stat-tint: #5fcfff; }
.mdm3-stat.is-wins   { --stat-tint: #c084ff; }
.mdm3-stat.is-wins.is-maxed { --stat-tint: #ff7b7b; opacity: 0.7; }
/* 2026-06-01 T2 F8: counter stats (lvl 10+) */
.mdm3-stat.is-accuracy { --stat-tint: #ffa845; }   /* naranja — precisión = puntería */
.mdm3-stat.is-critresist { --stat-tint: #ff7b3d; } /* naranja-rojo — counter del crit (mismo lenguaje que llama) */
.mdm3-stat.is-spellres { --stat-tint: #b884ff; }   /* violeta — resistencia mágica (RES) */
.mdm3-stat.is-debuffres { --stat-tint: #84ffe3; }  /* cyan — resistencia a CC */

/* 2026-06-02 T2: reward card (Oro + XP) — card único, Oro arriba / XP abajo, divisor horizontal */
.mdm3-rewards {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20,12,4,0.55), rgba(6,3,1,0.78));
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 22%, transparent);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,235,200,0.04);
}
.mdm3-reward-half {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  --reward-tint: #ffd54a;
}
.mdm3-reward-half.is-gold { --reward-tint: #ffd54a; }
.mdm3-reward-half.is-xp   { --reward-tint: #5fcfff; }
.mdm3-reward-half + .mdm3-reward-half {
  border-top: 1px solid color-mix(in srgb, var(--mdm3-gold) 22%, transparent);
}
.mdm3-reward-half > i {
  font-size: 18px;
  color: var(--reward-tint);
  text-shadow: 0 0 10px color-mix(in srgb, var(--reward-tint) 45%, transparent);
  flex-shrink: 0;
}
.mdm3-reward-text { min-width: 0; flex: 1; }
.mdm3-reward-val {
  font-family: 'Cinzel', serif;
  font-size: 15px; font-weight: 700;
  color: var(--reward-tint);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.mdm3-reward-lbl {
  font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,235,200,0.50);
  font-weight: 700;
  margin-top: 3px;
}
/* Badge "mágico" para mobs con dmg_type=magical */
.mdm3-stat-tag.is-magic {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  font-size: 12px;
  color: #b884ff;
  text-shadow: 0 0 6px rgba(184,132,255,0.6);
  vertical-align: -1px;
}

/* ============== ATACAR BUTTON XL ============== */
.mdm3-atkrow {
  position: relative; z-index: 2;
  padding: 14px 22px 22px;
  display: flex; align-items: center; gap: 10px;
}

.mdm3-attack {
  position: relative;
  flex: 1;
  height: 64px;
  padding: 0 22px;
  border: 1.5px solid color-mix(in srgb, var(--mdm3-gold) 65%, transparent);
  border-radius: 12px;
  background: var(--mdm3-gold-grad);
  color: #1a120a;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px;
  letter-spacing: 0.28em; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  box-shadow:
    0 16px 38px -10px rgba(212,180,131,0.6),
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -3px 8px rgba(80,40,0,0.30);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
/* Inner double-frame */
.mdm3-attack::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(0,0,0,0.32);
  border-radius: 7px; pointer-events: none;
}
/* Outer sparkle/glow */
.mdm3-attack::after {
  content: ''; position: absolute; inset: -2px;
  border: 1px solid rgba(255,239,180,0.18);
  border-radius: 13px; pointer-events: none;
}
.mdm3-attack-ic-left {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: #1a120a;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.35));
}
.mdm3-attack-ic-left i { line-height: 1; }
.mdm3-attack-label { font-size: 17px; }
.mdm3-attack:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.mdm3-attack:disabled,
.mdm3-attack.is-locked {
  background: rgba(60,40,28,0.5);
  color: var(--mdm3-text-dim);
  box-shadow: none;
  cursor: not-allowed;
}
.mdm3-attack.is-locked::before,
.mdm3-attack:disabled::before { border-color: rgba(255,255,255,0.05); }
.mdm3-attack.is-overlevel {
  background: linear-gradient(180deg, #ffd29c 0%, #ff8a4c 50%, #c75a1f 100%);
  color: #1a0a05;
}
.mdm3-attack.is-grind {
  background: linear-gradient(180deg, #c8f0c2 0%, #6fc26a 50%, #3f8a3a 100%);
  color: #0a1a05;
}

.mdm3-attack-stam {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a1d12 0%, #160d06 100%);
  color: #fff5cc;
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--mdm3-gold) 55%, transparent);
  flex-shrink: 0;
  height: 64px;
  min-width: 64px;
  justify-content: center;
  box-shadow:
    0 8px 18px -8px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.mdm3-attack-stam i { color: #ffd54a; font-size: 16px; }

/* ============== DESCRIPCION (above stats) ============== */
.mdm3-desc {
  margin: 0;
  padding: 8px 12px;
  font-style: italic;
  font-size: 12.5px;
  color: var(--mdm3-text-soft);
  line-height: 1.45;
  text-align: center;
  background: rgba(0,0,0,0.20);
  border-left: 2px solid color-mix(in srgb, var(--mdm3-gold) 40%, transparent);
  border-radius: 4px;
}

/* ============== MOBILE (≤640px): single column ============== */
/* ============================================================
   2026-06-03: Mobile shrink agresivo — el modal se veía gigante.
   - Stats en 2 columnas (era 1) → reduce mucha altura.
   - Imagen más chica (180px) — antes ocupaba demasiado vertical.
   - Subtítulo + rarity pill ocultos (menor jerarquía).
   - Paddings/gaps comprimidos.
   ============================================================ */
@media (max-width: 640px) {
  .mdm3-overlay { padding: 6px; }
  .mdm3-modal { width: 100%; max-height: 92vh; border-radius: 11px; }
  .mdm3-modal::before { inset: 6px; border-radius: 7px; }
  .mdm3-close { width: 28px; height: 28px; font-size: 13px; top: 8px; right: 8px; }
  .mdm3-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 10px 8px;
  }
  .mdm3-left { flex-direction: column; align-items: stretch; gap: 6px; }
  /* Imagen más chica para no comer altura */
  .mdm3-imgframe { width: 100%; aspect-ratio: 4/3; align-self: center; max-width: 180px; padding: 4px; margin: 0 auto; }
  .mdm3-imgframe-fallback { font-size: 64px; }
  .mdm3-levelchip { min-width: 70px; padding: 3px 12px 5px; bottom: -10px; font-size: 11px; }
  .mdm3-loot-btn { margin-top: 8px; padding: 8px 10px; font-size: 10px; gap: 8px; }
  .mdm3-loot-btn-ic { width: 24px; height: 24px; font-size: 12px; }
  .mdm3-loot-btn-count { min-width: 24px; padding: 2px 7px; font-size: 10px; }
  .mdm3-right { gap: 8px; }
  /* Rarity pill: ocultar — el level chip de la imagen ya da contexto */
  .mdm3-rarity { display: none; }
  .mdm3-name { font-size: 22px; text-align: center; }
  /* Subtítulo: ocultar — texto extra que infla altura */
  .mdm3-name-sub { display: none; }
  /* HP card compact */
  .mdm3-hp { padding: 7px 10px; gap: 8px; margin-top: 2px; }
  .mdm3-hp-icon { width: 22px; height: 22px; font-size: 11px; }
  .mdm3-hp-label { font-size: 8.5px; letter-spacing: 0.18em; }
  .mdm3-hp-bar { height: 6px; }
  .mdm3-hp-text { font-size: 11px; }
  /* Stats label */
  .mdm3-stats-label { font-size: 10px; letter-spacing: 0.20em; margin: 2px 0 0; gap: 8px; }
  /* === Stats en 2 COLUMNAS en mobile === */
  .mdm3-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .mdm3-stat {
    grid-template-columns: 20px 1fr auto;
    gap: 7px;
    padding: 6px 8px;
    min-width: 0;
  }
  .mdm3-stat-ic { width: 20px; height: 20px; font-size: 11px; }
  .mdm3-stat-lbl {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .mdm3-stat-val { font-size: 12.5px; }
  /* Rewards: 2 cols también (lado a lado en vez de uno encima del otro) */
  .mdm3-rewards { flex-direction: row; margin-top: 4px; }
  .mdm3-reward-half { flex: 1; padding: 7px 9px; gap: 7px; min-width: 0; }
  .mdm3-reward-half > i { font-size: 14px; }
  .mdm3-reward-val { font-size: 12.5px; }
  .mdm3-reward-lbl { font-size: 8px; letter-spacing: 0.12em; }
  .mdm3-reward-half + .mdm3-reward-half { border-top: none; border-left: 1px solid color-mix(in srgb, var(--mdm3-gold) 22%, transparent); }
  /* ATTACK button compact */
  .mdm3-atkrow { padding: 8px 12px 12px; gap: 7px; }
  .mdm3-attack { height: 46px; padding: 0 14px; font-size: 12.5px; letter-spacing: 0.18em; gap: 8px; border-radius: 9px; }
  .mdm3-attack-label { font-size: 12.5px; }
  .mdm3-attack-stam { height: 46px; min-width: 46px; font-size: 11.5px; }
}

/* Pantallas muy chicas (< 360px) — extra compactos */
@media (max-width: 360px) {
  .mdm3-grid { padding: 10px 8px 6px; }
  .mdm3-imgframe { max-width: 150px; }
  .mdm3-imgframe-fallback { font-size: 52px; }
  .mdm3-name { font-size: 19px; }
  .mdm3-stat { padding: 5px 7px; gap: 6px; grid-template-columns: 18px 1fr auto; }
  .mdm3-stat-ic { width: 18px; height: 18px; font-size: 10px; }
  .mdm3-stat-lbl { font-size: 9px; }
  .mdm3-stat-val { font-size: 11.5px; }
  .mdm3-attack { height: 42px; font-size: 11.5px; letter-spacing: 0.14em; }
  .mdm3-attack-label { font-size: 11.5px; }
  .mdm3-attack-stam { height: 42px; min-width: 42px; font-size: 11px; }
}