/* =====================================================================
   PETS V2 — Sistema de Mascotas (Obsidian Codex)
   ===================================================================== */

.pets-stage {
  --p-bg-1:   #15101e;
  --p-bg-2:   #1a1428;
  --p-bg-3:   #211934;
  --p-border: rgba(245, 208, 103, 0.18);
  --p-gold:   #f5d067;
  --p-purple: #a78bfa;
  --p-text:   #e9e1d0;
  --p-mute:   #8a8294;
  --p-online: #5fd684;
  --p-blood:  #ff6b6b;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--p-text);
  padding: 0 0 20px;
}

.pets-loading, .pets-empty {
  padding: 40px;
  text-align: center;
  color: var(--p-mute);
}

/* ─── HERO ────────────────────────────────────────────────────────────── */
.pets-hero {
  position: relative;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(245,208,103,0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid var(--p-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.pets-hero-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(245,208,103,0.18));
  border: 1px solid var(--p-border);
  border-radius: 14px;
  color: var(--p-gold);
  font-size: 28px;
}
.pets-hero-info { flex: 1; min-width: 0; }
.pets-hero-title {
  font-size: 22px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(180deg, #f5d067 0%, #c79a3a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pets-hero-sub { color: var(--p-mute); font-size: 13px; margin-top: 2px; }
.pets-hero-stats { display: flex; gap: 10px; flex-shrink: 0; }
.pets-stat {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--p-border);
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}

/* ─── TABS ────────────────────────────────────────────────────────────── */
.pets-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: 12px;
  padding: 6px;
  height: 52px;
  flex-shrink: 0;
  overflow-x: auto;
}
.pets-tab {
  background: transparent;
  border: none;
  color: var(--p-mute);
  padding: 0 14px;
  height: 38px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.pets-tab:hover { color: var(--p-text); background: rgba(255,255,255,0.04); }
.pets-tab.is-active {
  background: linear-gradient(180deg, rgba(245,208,103,0.18), rgba(245,208,103,0.06));
  color: var(--p-gold);
}
.pets-tab-count { opacity: 0.6; font-size: 11px; }

/* ─── EMPTY STATE ─────────────────────────────────────────────────────── */
.pets-empty-card {
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
}
.pets-empty-icon {
  font-size: 64px;
  color: var(--p-purple);
  opacity: 0.45;
  margin-bottom: 14px;
}
.pets-empty-title { font-size: 17px; font-weight: 700; color: var(--p-text); margin-bottom: 6px; }
.pets-empty-sub { color: var(--p-mute); font-size: 13px; margin-bottom: 18px; }
.pets-cta-btn {
  background: linear-gradient(180deg, #f5d067 0%, #c79a3a 100%);
  color: #1a1428;
  border: none;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.pets-cta-btn:hover { filter: brightness(1.1); }

/* ─── ACTIVE PET CARD ─────────────────────────────────────────────────── */
.pets-active-card {
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--rar) 18%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid color-mix(in srgb, var(--rar) 45%, var(--p-border));
  border-radius: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: 130px 1fr 220px;
  gap: 18px;
  align-items: center;
}
.pets-active-portrait {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pets-portrait-ring {
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 3px solid;
  background: radial-gradient(circle, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  display: grid; place-items: center;
  font-size: 58px;
}
.pets-rar-pill {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 3px 9px; border-radius: 6px;
  color: #1a1428;
  text-transform: uppercase;
}
.pets-rar-pill-mini {
  font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
  padding: 2px 6px; border-radius: 5px;
  color: #1a1428; text-transform: uppercase;
  display: inline-block;
}
.pets-active-info { min-width: 0; }
.pets-active-name {
  font-size: 18px; font-weight: 800; color: var(--p-text);
  display: flex; align-items: center; gap: 8px;
}
.pets-active-lvl {
  font-size: 12px; color: var(--p-gold); font-weight: 700;
  background: rgba(245,208,103,0.12);
  border: 1px solid rgba(245,208,103,0.3);
  padding: 2px 7px; border-radius: 5px;
}
.pets-active-flavor {
  color: var(--p-mute); font-size: 12px; font-style: italic; margin: 4px 0 10px;
}
.pets-active-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pets-stat-cell {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--p-border);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
}
.pets-stat-gold { background: rgba(245,208,103,0.10); border-color: rgba(245,208,103,0.4); }

.pets-active-right { display: flex; flex-direction: column; gap: 8px; }
.pets-feed-status {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}
.pets-feed-status.is-fed { border-color: rgba(95,214,132,0.5); background: rgba(95,214,132,0.10); }
.pets-feed-status.is-fed i { color: var(--p-online); font-size: 22px; }
.pets-feed-status.is-hungry { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.10); }
.pets-feed-status.is-hungry i { color: var(--p-blood); font-size: 22px; }
.pets-feed-lbl { font-weight: 700; }
.pets-feed-time { font-size: 11px; opacity: 0.7; margin-top: 1px; }
.pets-bonus-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, rgba(167,139,250,0.25), rgba(167,139,250,0.10));
  border: 1px solid rgba(167,139,250,0.5);
  color: var(--p-purple);
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 8px;
  align-self: flex-start;
}
.pets-pending-gold {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.pets-pending-gold.has-gold { border-color: rgba(245,208,103,0.55); background: rgba(245,208,103,0.10); animation: pets-gold-glow 2s ease infinite; }
.pets-pending-amt { font-weight: 800; color: var(--p-gold); font-size: 15px; }
.pets-pending-lbl { opacity: 0.6; font-size: 11px; }
@keyframes pets-gold-glow {
  0%,100% { box-shadow: 0 0 0 rgba(245,208,103,0); }
  50% { box-shadow: 0 0 12px rgba(245,208,103,0.35); }
}
.pets-action-row { display: flex; gap: 6px; flex-wrap: wrap; }

.pets-mini-btn {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--p-border);
  color: var(--p-text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.pets-mini-btn:hover:not(:disabled):not(.is-disabled) { background: rgba(255,255,255,0.06); border-color: rgba(245,208,103,0.45); }
.pets-mini-btn:disabled, .pets-mini-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pets-mini-btn small { opacity: 0.6; font-weight: 500; }
.pets-mini-gold {
  background: linear-gradient(180deg, #f5d067, #c79a3a);
  color: #1a1428;
  border-color: transparent;
  font-weight: 700;
}
.pets-mini-active {
  background: linear-gradient(180deg, rgba(245,208,103,0.20), rgba(245,208,103,0.05));
  border-color: rgba(245,208,103,0.5);
  color: var(--p-gold);
}
.pets-mini-feed { background: rgba(95,214,132,0.12); border-color: rgba(95,214,132,0.45); }
.pets-mini-feed-rare { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.45); }

.pets-no-active {
  background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.35);
  color: var(--p-blood);
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
}

/* ═════════════════════════════════════════════════════════════════════════
   MI MASCOTA — PK (Pet Kit) · Diseño fiel al mockup ChatGPT
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── CARD principal ─── */
.pk-card {
  position: relative;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--rar) 14%, transparent) 0%, transparent 45%),
    linear-gradient(180deg, #1a1428 0%, #15101e 100%);
  border: 1px solid rgba(245, 208, 103, 0.18);
  border-radius: 16px;
  overflow: hidden;
  padding: 20px;
}
.pk-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 320px);
  gap: 16px;
  margin-bottom: 16px;
}

/* ═══ COL 1 (v5 — banner + name plate + status + sprite) ═══ */
.pk-col-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 380px;
}

/* TOP BAR: rarity izq / level chip der */
.pk-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pk-rar-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.pk-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border: 1.5px solid;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  font-weight: 700;
}
.pk-level-chip i { font-size: 12px; opacity: 0.9; }
.pk-level-lbl { font-size: 9.5px; letter-spacing: 1.5px; opacity: 0.7; font-weight: 700; }
.pk-level-num { font-size: 15px; font-weight: 900; line-height: 1; }

/* NAME PLATE: divider accent line + name + flavor centered */
.pk-name-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 4px 10px;
  gap: 4px;
}
.pk-name-accent {
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  opacity: 0.65;
}
.pk-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  color: #f5d067;
  line-height: 1.1;
  letter-spacing: 0.3px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 18px rgba(245,208,103,0.18);
}
.pk-flavor {
  color: #b8b0c2;
  font-size: 12.5px;
  font-style: italic;
  opacity: 0.85;
  letter-spacing: 0.5px;
  font-family: Georgia, 'Times New Roman', serif;
}
.pk-flavor::before { content: '« '; opacity: 0.5; }
.pk-flavor::after { content: ' »'; opacity: 0.5; }

/* DEPRECATED */
.pk-tag-pill { display: none; }
.pk-id-block { display: contents; }
.pk-nv-badge { display: none; }
/* ═══ MINI-CARD de estado (al lado de PROGRESO en col-2) ═══ */
.pk-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: stretch;
}
.pk-progress-row .pk-progress-block { min-width: 0; }

.pk-fed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid;
  border-radius: 12px;
  text-align: center;
  background: rgba(0,0,0,0.30);
  transition: border-color .2s, background .2s;
}
.pk-fed-card.is-fed {
  border-color: rgba(95,214,132,0.45);
  background: linear-gradient(180deg, rgba(95,214,132,0.10), rgba(95,214,132,0.04));
}
.pk-fed-card.is-hungry {
  border-color: rgba(255,107,107,0.45);
  background: linear-gradient(180deg, rgba(255,107,107,0.10), rgba(255,107,107,0.04));
}
.pk-fed-card-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.pk-fed-card.is-fed  .pk-fed-card-icon { background: rgba(95,214,132,0.18);  color: #5fd684; box-shadow: 0 0 14px rgba(95,214,132,0.30); }
.pk-fed-card.is-hungry .pk-fed-card-icon { background: rgba(255,107,107,0.18); color: #ff6b6b; box-shadow: 0 0 14px rgba(255,107,107,0.30); }
.pk-fed-card-lbl {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.1;
}
.pk-fed-card.is-fed  .pk-fed-card-lbl { color: #5fd684; }
.pk-fed-card.is-hungry .pk-fed-card-lbl { color: #ff6b6b; }
.pk-fed-card-time {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.75;
  color: #e9e1d0;
  font-variant-numeric: tabular-nums;
}

/* DEPRECATED: pill horizontal vieja */
.pk-fed-status { display: none; }
.pk-fed-text   { display: contents; }

@media (max-width: 1100px) {
  .pk-progress-row { grid-template-columns: minmax(0, 1fr); }
  .pk-fed-card { flex-direction: row; padding: 10px 14px; gap: 12px; text-align: left; }
  .pk-fed-card-lbl { font-size: 13px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PK CARD V4 (2026-06-02) — Background atmosférico + 3-col mockup-fiel
   ═════════════════════════════════════════════════════════════════════════ */
.pk-card-v4 {
  position: relative;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--rar) 14%, transparent) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--rar) 10%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, #1a1428 0%, #15101e 100%);
}
/* Imagen de fondo de la card — fauna sobre fondo cósmico oscuro */
/* 2026-06-02: opacidad subida + sin blend-mode lighten (que la volvía blanca lavada) */
.pk-card-v4::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/pets/card_bg_creatures.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
/* Vignette suave para asegurar legibilidad del contenido sin matar la imagen */
.pk-card-v4::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(15,10,25,0.35) 90%),
    linear-gradient(180deg, rgba(15,10,25,0.15) 0%, transparent 25%, transparent 75%, rgba(15,10,25,0.3) 100%);
  pointer-events: none;
  z-index: 1;
}
.pk-card-v4 > .pk-grid,
.pk-card-v4 > .pk-actions { position: relative; z-index: 2; }

/* ═════════════════════════════════════════════════════════════════════════
   HERO header — wolf silhouette bg image (sutil, decorativo)
   ═════════════════════════════════════════════════════════════════════════ */
.pets-hero {
  position: relative;
  overflow: hidden;
}
.pets-hero::after {
  content: '';
  position: absolute;
  top: -10%;
  right: 0;
  width: 55%;
  height: 130%;
  background-image: url('/assets/pets/hero_bg_wolf.webp');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.28;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
  z-index: 0;
}
.pets-hero > * { position: relative; z-index: 1; }

/* PORTRAIT V2 — sin círculo ni halo, sprite limpio con glow sutil de fondo */
.pk-portrait {
  position: relative;
  flex: 1;
  min-height: 240px;
  display: grid;
  place-items: center;
}
.pk-portrait-clean {
  width: 100%;
}
/* Glow elíptico sutil debajo del sprite (reemplaza el ring) */
.pk-portrait-glow {
  position: absolute;
  inset: 10% 5% 5% 5%;
  filter: blur(20px);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}
.pk-sprite-img {
  position: relative;
  width: 100%;
  max-width: 280px;
  max-height: 280px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.pk-portrait-clean > i {
  position: relative;
  font-size: 140px;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55));
}
/* NV badge: rectangular y pegado a la esquina inferior derecha del sprite */
.pk-nv-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid;
  background: linear-gradient(180deg, #1a1428, #0e0a18);
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7);
}
.pk-nv-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px; opacity: 0.85; }
.pk-nv-num { font-size: 17px; font-weight: 900; line-height: 1; }

/* ═══ COL 2 ═══ */
.pk-col-2 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pk-block {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(245, 208, 103, 0.10);
  border-radius: 12px;
  padding: 16px 18px;
}
.pk-block-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 1.5px;
  color: #e9e1d0;
  margin-bottom: 12px;
}
.pk-block-head i { font-size: 16px; }
.pk-block-title { flex: 1; }
.pk-block-soon { font-size: 10.5px; font-weight: 500; opacity: 0.55; letter-spacing: 0.5px; text-transform: none; }
.pk-xp-num { font-size: 12.5px; font-weight: 700; opacity: 0.9; letter-spacing: 0.3px; }
.pk-xp-num.pk-xp-max { color: #f5d067; }
.pk-rename-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,208,103,0.25);
  color: #e9e1d0;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 12px;
  transition: background .15s, border-color .15s;
}
.pk-rename-btn:hover { background: rgba(245,208,103,0.10); border-color: rgba(245,208,103,0.5); }
.pk-xp-bar {
  position: relative;
  height: 14px;
  background: rgba(0,0,0,0.55);
  border-radius: 7px;
  overflow: visible;
  margin: 4px 0 8px;
}
.pk-xp-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.4s;
  position: relative;
}
.pk-xp-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent 60%);
  border-radius: 7px;
}
.pk-xp-indicator {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #1a1428 0%, #0e0a18 70%);
  border: 2px solid #f5d067;
  display: grid; place-items: center;
  font-size: 14px;
  color: #f5d067;
  box-shadow: 0 0 10px rgba(245,208,103,0.55);
  transition: left 0.4s;
  pointer-events: none;
  z-index: 3;
}
.pk-xp-hint {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  color: #e9e1d0;
}
.pk-xp-hint > span:not(.pk-xp-target):not(.pk-xp-dot) { display: inline-flex; align-items: center; gap: 5px; }
.pk-xp-dot { opacity: 0.35; }
.pk-xp-target { margin-left: auto; opacity: 0.7; font-size: 11.5px; }

.pk-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pk-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.pk-stat-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px;
  border: 1px solid;
  flex-shrink: 0;
}
.pk-stat-info { min-width: 0; }
.pk-stat-v { font-size: 20px; font-weight: 900; line-height: 1; color: #e9e1d0; }
.pk-stat-l { font-size: 10.5px; opacity: 0.65; letter-spacing: 0.8px; margin-top: 3px; font-weight: 700; }

/* ═══ COL 3 ═══ */
.pk-col-3 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pk-pending-block {
  background:
    radial-gradient(circle at 80% 0%, rgba(245,208,103,0.16), transparent 60%),
    rgba(0,0,0,0.30);
  border: 1px solid rgba(245,208,103,0.20);
  border-radius: 12px;
  padding: 14px 16px;
}
.pk-pending-body {
  display: flex; align-items: center; gap: 16px;
}
.pk-pending-coins {
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(245,208,103,0.40));
}
.pk-pending-amt {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 52px;
  color: #f5d067;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(245,208,103,0.40);
}

.pk-skills-block { display: flex; flex-direction: column; }
.pk-skills-stack {
  display: flex; flex-direction: column; gap: 8px;
}
.pk-skill-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.pk-skill-row.is-locked { opacity: 0.55; }
.pk-skill-ring {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(167,139,250,0.08);
  border: 2px solid rgba(167,139,250,0.30);
  display: grid; place-items: center;
  font-size: 20px;
  color: #8a8294;
  flex-shrink: 0;
}
.pk-skill-info { flex: 1; min-width: 0; }
.pk-skill-name { font-size: 13px; font-weight: 700; color: #e9e1d0; }
.pk-skill-sub { font-size: 11px; opacity: 0.6; margin-top: 2px; }

/* ═══ 3 BOTONES GRANDES ═══ */
.pk-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.pk-actions-2col { grid-template-columns: 1fr 1fr; }
.pk-action-art-gi {
  width: 56px; height: 56px;
  background: rgba(0,0,0,0.35);
  border-radius: 14px;
  font-size: 38px;
  display: grid; place-items: center;
}
.pk-action-art-gi .gi { font-size: 40px; }
.pk-action-feed .pk-action-art-gi { color: #5cf28a; box-shadow: inset 0 0 0 1px rgba(95,242,138,0.25); }
.pk-action-feed-rare .pk-action-art-gi { color: #a78bfa; box-shadow: inset 0 0 0 1px rgba(167,139,250,0.25); }
.pk-action-text { flex: 1; min-width: 0; }
.pk-action-sub { font-size: 11.5px; opacity: 0.75; font-weight: 600; margin-top: 3px; letter-spacing: 0.3px; }
.pk-action {
  position: relative;
  display: flex; align-items: center;
  padding: 16px 56px 16px 20px;
  border-radius: 12px;
  border: 1px solid;
  cursor: pointer;
  overflow: hidden;
  font-weight: 800;
  letter-spacing: 1.2px;
  transition: filter .15s, transform .1s, box-shadow .2s;
  min-height: 78px;
  text-align: left;
}
.pk-action:hover:not(:disabled):not(.is-disabled) {
  filter: brightness(1.10);
  transform: translateY(-1px);
}
.pk-action:active:not(:disabled):not(.is-disabled) { transform: scale(0.98); }
.pk-action:disabled, .pk-action.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pk-action-art {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
  margin-right: 16px;
  display: grid; place-items: center;
}
.pk-action-art > i:first-child { font-size: 42px; }
.pk-action-art-deco {
  position: absolute;
  bottom: -2px; right: -4px;
  font-size: 20px;
  opacity: 0.95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.pk-action-lbl { font-size: 16px; flex: 1; }
.pk-action-lbl small { opacity: 0.7; font-weight: 600; font-size: 12.5px; letter-spacing: 0.3px; margin-left: 4px; }
.pk-action-arrow {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  opacity: 0.70;
}

.pk-action-claim {
  background:
    radial-gradient(circle at left center, rgba(245,208,103,0.30), transparent 55%),
    linear-gradient(135deg, rgba(120,80,30,0.50), rgba(70,50,20,0.55));
  border-color: rgba(245,208,103,0.60);
  color: #f5d067;
}
.pk-action-claim .pk-action-art > i:first-child { color: #c79a3a; }
.pk-action-claim .pk-action-art-deco { color: #f5d067; }
.pk-action-claim .pk-action-lbl { color: #f5d067; }

.pk-action-feed {
  background:
    radial-gradient(circle at left center, rgba(95,242,138,0.30), transparent 55%),
    linear-gradient(135deg, rgba(40,90,55,0.50), rgba(25,55,35,0.55));
  border-color: rgba(95,242,138,0.55);
  color: #5cf28a;
}
.pk-action-feed .pk-action-art > i:first-child { color: #5cf28a; }
.pk-action-feed .pk-action-art-deco { color: #5cf28a; }
.pk-action-feed .pk-action-lbl { color: #c9f5d0; }

.pk-action-feed-rare {
  background:
    radial-gradient(circle at left center, rgba(167,139,250,0.30), transparent 55%),
    linear-gradient(135deg, rgba(70,40,110,0.55), rgba(40,25,70,0.55));
  border-color: rgba(167,139,250,0.55);
  color: #a78bfa;
}
.pk-action-feed-rare .pk-action-art > i:first-child { color: #a78bfa; }
.pk-action-feed-rare .pk-action-art-deco { color: #c9b8ff; }
.pk-action-feed-rare .pk-action-lbl { color: #d9caff; }

/* ═══ ESTABLO (v2 — separado de Mi Mascota + wolf bg + sprites centrados) ═══ */
.pk-stable-section {
  position: relative;
  margin-top: 22px;              /* 2026-06-02: separar de la card de Mi Mascota */
  background:
    radial-gradient(ellipse at 0% 0%, rgba(122,240,255,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #1d1830 0%, #14101f 100%);
  border: 1px solid rgba(245, 208, 103, 0.18);
  border-radius: 14px;
  padding: 16px 20px;
  overflow: hidden;
}
/* Wolf bg image en el lado derecho */
.pk-stable-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background-image: url('/assets/pets/hero_bg_wolf.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.32;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  z-index: 0;
}
/* Vignette suave para legibilidad */
.pk-stable-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,16,31,0.4) 0%, transparent 35%, transparent 65%, rgba(20,16,31,0.5) 100%);
  pointer-events: none;
  z-index: 1;
}
.pk-stable-section > * { position: relative; z-index: 2; }

.pk-stable-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.pk-stable-head-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 2px;
  color: #7af0ff;
}
.pk-stable-head-title i { font-size: 18px; }
.pk-claim-all-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(245,208,103,0.18), rgba(245,208,103,0.05));
  border: 1px solid rgba(245,208,103,0.55);
  color: #f5d067;
  padding: 8px 16px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: filter .15s;
}
.pk-claim-all-btn:hover { filter: brightness(1.15); }
.pk-stable-list { display: flex; flex-direction: column; gap: 8px; }
.pk-stable-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);                     /* +contraste sobre el wolf bg */
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  transition: background .15s, border-color .15s;
}
.pk-stable-row:hover {
  background: rgba(0,0,0,0.45);
  border-color: rgba(245,208,103,0.20);
}
/* Avatar: círculo más grande + sprite contenido (no se sale del marco) */
.pk-stable-avatar {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid;
  display: grid; place-items: center;
  font-size: 30px;
  flex-shrink: 0;
  overflow: hidden;                                 /* clip seguro */
}
.pk-stable-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;                              /* sprite completo, sin recortes */
  object-position: center bottom;                   /* anclar al fondo (los pets están parados) */
  border-radius: 50%;
}
.pk-stable-info { flex: 1; min-width: 0; }
.pk-stable-name { font-size: 16px; font-weight: 700; color: #e9e1d0; }
.pk-stable-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
}
.pk-stable-rar {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.pk-stable-lvl { font-size: 12px; font-weight: 700; opacity: 0.85; }
.pk-stable-xp { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pk-stable-xp-bar {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.50);
  border-radius: 3px;
  overflow: hidden;
}
.pk-stable-xp-bar > div { height: 100%; transition: width 0.3s; border-radius: 3px; }
.pk-stable-xp-text { font-size: 11px; opacity: 0.65; white-space: nowrap; }
.pk-stable-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pk-stable-activate {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, rgba(245,208,103,0.22), rgba(245,208,103,0.05));
  border: 1px solid rgba(245,208,103,0.55);
  color: #f5d067;
  padding: 8px 16px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: filter .15s;
}
.pk-stable-activate:hover { filter: brightness(1.15); }
.pk-stable-icon-btn {
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(245,208,103,0.20);
  color: #e9e1d0;
  border-radius: 8px;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 14px;
  transition: background .15s, border-color .15s;
}
.pk-stable-icon-btn:hover {
  background: rgba(245,208,103,0.10);
  border-color: rgba(245,208,103,0.5);
}

@media (max-width: 1100px) {
  .pk-grid { grid-template-columns: 1fr; }
  .pk-portrait { height: 220px; }
  .pk-portrait-ring { width: 170px; height: 170px; font-size: 88px; }
  .pk-actions { grid-template-columns: 1fr; }
  .pk-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pk-stable-row { flex-wrap: wrap; }
}

/* ─── MI MASCOTA V2 — Rediseño cinematográfico (3 columnas) [legacy] ──── */
.pets-mp-v2-card {
  position: relative;
  background:
    radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--rar) 16%, transparent) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--rar) 12%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--p-bg-3) 0%, var(--p-bg-2) 100%);
  border: 1px solid color-mix(in srgb, var(--rar) 35%, var(--p-border));
  border-radius: 18px;
  overflow: hidden;
}
.pets-mp-v2-body {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(260px, 320px);
  gap: 18px;
  padding: 20px;
}

/* ─── COL 1: Portrait + identidad ──────────────────────────────────────── */
.pets-mp-v2-portrait-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
}
.pets-mp-v2-rar-tag {
  position: absolute;
  top: 6px; left: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 4;
}
.pets-mp-v2-portrait-area {
  position: relative;
  width: 100%;
  height: 280px;
  display: grid; place-items: center;
}
.pets-mp-v2-portrait-bg {
  position: absolute;
  inset: 30px 0 0;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--rar) 26%, transparent) 0%, transparent 60%),
    conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--rar) 10%, transparent) 90deg, transparent 180deg, color-mix(in srgb, var(--rar) 10%, transparent) 270deg, transparent 360deg);
  opacity: 0.7;
  filter: blur(2px);
  animation: pets-mp-v2-spin 24s linear infinite;
  border-radius: 50%;
}
@keyframes pets-mp-v2-spin { to { transform: rotate(360deg); } }
.pets-mp-v2-sprite {
  position: relative;
  z-index: 2;
  width: 200px; height: 200px;
  display: grid; place-items: center;
  font-size: 110px;
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--rar) 35%, transparent));
}
.pets-mp-v2-sprite.has-img { width: 240px; height: 240px; }
.pets-mp-v2-sprite-img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.pets-mp-v2-nv-badge {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, rgba(20,16,32,0.95), rgba(30,24,48,0.95));
  border: 2px solid;
  border-radius: 50%;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.pets-mp-v2-nv-lbl { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; opacity: 0.65; margin-bottom: -2px; }
.pets-mp-v2-nv-num { font-size: 22px; font-weight: 900; line-height: 1; color: var(--p-text); }

.pets-mp-v2-name {
  font-size: 22px; font-weight: 800;
  color: var(--p-text);
  margin-top: 4px;
}
.pets-mp-v2-species, .pets-mp-v2-flavor {
  font-size: 13px; font-style: italic;
  color: var(--p-mute);
}
.pets-mp-v2-tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--p-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--p-text);
  margin-top: 6px;
}
.pets-mp-v2-feed {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid;
}
.pets-mp-v2-feed.is-fed { background: rgba(95,214,132,0.10); border-color: rgba(95,214,132,0.5); }
.pets-mp-v2-feed.is-fed i { color: var(--p-online); font-size: 18px; }
.pets-mp-v2-feed.is-hungry { background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.5); }
.pets-mp-v2-feed.is-hungry i { color: var(--p-blood); font-size: 18px; }
.pets-mp-v2-feed-info { text-align: left; }
.pets-mp-v2-feed-lbl { font-weight: 700; font-size: 12.5px; }
.pets-mp-v2-feed-time { font-size: 11px; opacity: 0.7; margin-top: 1px; }

/* ─── COL 2: Centro (XP + Combate) ─────────────────────────────────────── */
.pets-mp-v2-center-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pets-mp-v2-block {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--p-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.pets-mp-v2-block-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--p-text);
  margin-bottom: 12px;
}
.pets-mp-v2-block-head i { font-size: 16px; }
.pets-mp-v2-block-title { flex: 1; opacity: 0.9; }
.pets-mp-v2-xp-num { font-size: 12px; font-weight: 700; opacity: 0.85; letter-spacing: 0.3px; }
.pets-mp-v2-rename {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--p-border);
  color: var(--p-text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  transition: background .15s;
}
.pets-mp-v2-rename:hover { background: rgba(245,208,103,0.10); border-color: rgba(245,208,103,0.45); }
.pets-mp-v2-rename i { font-size: 13px; }
.pets-mp-v2-xp-bar {
  position: relative;
  height: 12px;
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  overflow: visible;
  margin: 4px 0 6px;
}
.pets-mp-v2-xp-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s;
  position: relative;
}
.pets-mp-v2-xp-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  border-radius: 6px;
}
.pets-mp-v2-xp-indicator {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  background: radial-gradient(circle, rgba(167,139,250,0.45), transparent 70%);
  display: grid; place-items: center;
  font-size: 16px;
  filter: drop-shadow(0 0 6px currentColor);
  transition: left 0.4s;
}
.pets-mp-v2-xp-hint {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  margin-top: 8px;
  color: var(--p-text);
}
.pets-mp-v2-xp-hint > span:not(.pets-mp-v2-xp-target) { display: inline-flex; align-items: center; gap: 4px; }
.pets-mp-v2-xp-target { margin-left: auto; opacity: 0.65; font-style: italic; font-size: 11px; }

.pets-mp-v2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pets-mp-v2-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--p-border);
  border-radius: 10px;
}
.pets-mp-v2-stat-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pets-mp-v2-stat-v { font-size: 18px; font-weight: 900; line-height: 1; color: var(--p-text); }
.pets-mp-v2-stat-l { font-size: 10.5px; opacity: 0.65; letter-spacing: 0.5px; margin-top: 2px; font-weight: 700; }
.pets-mp-v2-stat-gold { background: rgba(245,208,103,0.08); border-color: rgba(245,208,103,0.35); }

/* ─── COL 3: Pending Gold + Habilidades ────────────────────────────────── */
.pets-mp-v2-right-col { display: flex; flex-direction: column; gap: 14px; }
.pets-mp-v2-pending {
  background:
    radial-gradient(circle at 80% -10%, rgba(245,208,103,0.20), transparent 60%),
    rgba(0,0,0,0.30);
  border: 1px solid rgba(245,208,103,0.35);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  position: relative;
}
.pets-mp-v2-pending-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.pets-mp-v2-pending-icon {
  font-size: 56px;
  color: #f5d067;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(245,208,103,0.40));
}
.pets-mp-v2-pending-amt {
  font-size: 38px; font-weight: 900; line-height: 1;
  color: #f5d067;
  margin: 6px 0;
  font-family: Georgia, serif;
  font-style: italic;
}
.pets-mp-v2-pending-hint {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px;
  opacity: 0.65;
  margin-top: 6px;
  letter-spacing: 0.3px;
}

.pets-mp-v2-soon {
  font-size: 10px;
  opacity: 0.55;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  margin-left: auto;
}
.pets-mp-v2-skills-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pets-mp-v2-skill-row {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pets-mp-v2-skill-row.is-locked { opacity: 0.55; }
.pets-mp-v2-skill-ring {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(167,139,250,0.10);
  border: 2px solid rgba(167,139,250,0.30);
  display: grid; place-items: center;
  font-size: 18px;
  color: var(--p-mute);
  flex-shrink: 0;
}
.pets-mp-v2-skill-info { flex: 1; min-width: 0; }
.pets-mp-v2-skill-name { font-size: 13px; font-weight: 700; color: var(--p-text); }
.pets-mp-v2-skill-sub { font-size: 11px; opacity: 0.6; margin-top: 2px; }

/* ─── BIG ACTION BUTTONS ───────────────────────────────────────────────── */
.pets-mp-v2-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px 20px;
}
.pets-mp-v2-action {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid;
  cursor: pointer;
  overflow: hidden;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  transition: filter .15s, transform .1s, box-shadow .2s;
  text-align: left;
}
.pets-mp-v2-action:hover:not(:disabled) { filter: brightness(1.10); transform: translateY(-1px); }
.pets-mp-v2-action:active:not(:disabled) { transform: scale(0.98); }
.pets-mp-v2-action:disabled { opacity: 0.4; cursor: not-allowed; }
.pets-mp-v2-action > i:first-child { font-size: 36px; flex-shrink: 0; }
.pets-mp-v2-action-mat-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.35);
  border-radius: 12px;
  font-size: 34px;
}
.pets-mp-v2-action-mat-icon .gi { font-size: 38px; }
.pets-mp-v2-action.is-feed .pets-mp-v2-action-mat-icon { color: #5cf28a; }
.pets-mp-v2-action.is-feed-rare .pets-mp-v2-action-mat-icon { color: #a78bfa; }
.pets-mp-v2-action-text { flex: 1; min-width: 0; }
.pets-mp-v2-action-lbl { font-weight: 900; letter-spacing: 1.5px; font-size: 14px; }
.pets-mp-v2-action-sub { font-size: 12px; opacity: 0.75; font-weight: 600; margin-top: 3px; letter-spacing: 0.3px; }
.pets-mp-v2-action-arrow {
  font-size: 20px;
  opacity: 0.55;
  flex-shrink: 0;
}
.pets-mp-v2-action.is-feed {
  background:
    radial-gradient(circle at right, rgba(95,242,138,0.20) 0%, transparent 50%),
    linear-gradient(135deg, rgba(40,80,50,0.4), rgba(20,40,25,0.4));
  border-color: rgba(95,242,138,0.45);
  color: #e9e1d0;
}
.pets-mp-v2-action.is-feed i { color: #5cf28a; }
.pets-mp-v2-action.is-feed-rare {
  background:
    radial-gradient(circle at right, rgba(167,139,250,0.20) 0%, transparent 50%),
    linear-gradient(135deg, rgba(60,40,90,0.4), rgba(35,25,55,0.4));
  border-color: rgba(167,139,250,0.45);
  color: #e9e1d0;
}
.pets-mp-v2-action.is-feed-rare i { color: #a78bfa; }

/* ─── STABLE (lista compacta tipo mockup) ──────────────────────────────── */
.pets-stable-section {
  background:
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid var(--p-border);
  border-radius: 14px;
  padding: 14px 18px;
}
.pets-stable-list {
  display: flex; flex-direction: column; gap: 8px;
}
.pets-stable-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid color-mix(in srgb, var(--rar) 25%, var(--p-border));
  border-radius: 12px;
  transition: background .15s;
}
.pets-stable-row:hover { background: rgba(0,0,0,0.35); }
.pets-stable-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(0,0,0,0.45);
  display: grid; place-items: center;
  font-size: 26px;
  flex-shrink: 0;
}
.pets-stable-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pets-stable-row-info { flex: 1; min-width: 0; }
.pets-stable-row-name { font-weight: 700; font-size: 15px; color: var(--p-text); }
.pets-stable-row-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 5px;
  font-size: 11.5px;
}
.pets-stable-rar-pill {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.pets-stable-row-lvl { font-weight: 700; opacity: 0.85; }
.pets-stable-row-xp {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1;
}
.pets-stable-row-xp-text { font-size: 11px; opacity: 0.7; }
.pets-stable-row-xp-bar {
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
}
.pets-stable-row-xp-bar > div { height: 100%; transition: width 0.3s; border-radius: 3px; }
.pets-stable-row-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.pets-stable-activate-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, rgba(245,208,103,0.20), rgba(245,208,103,0.05));
  border: 1px solid rgba(245,208,103,0.55);
  color: var(--p-gold);
  padding: 8px 14px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: filter .15s;
}
.pets-stable-activate-btn:hover { filter: brightness(1.15); }
.pets-stable-icon-btn {
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--p-border);
  color: var(--p-mute);
  border-radius: 8px;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.pets-stable-icon-btn:hover { background: rgba(245,208,103,0.10); border-color: rgba(245,208,103,0.45); color: var(--p-text); }

@media (max-width: 980px) {
  .pets-mp-v2-body { grid-template-columns: 1fr; }
  .pets-mp-v2-portrait-area { height: 220px; }
  .pets-mp-v2-sprite { width: 160px; height: 160px; font-size: 90px; }
  .pets-mp-v2-stats { grid-template-columns: repeat(2, 1fr); }
  .pets-mp-v2-actions { grid-template-columns: 1fr; padding: 0 14px 14px; }
  .pets-mp-v2-pending-amt { font-size: 32px; }
  .pets-stable-row { flex-wrap: wrap; }
  .pets-stable-row-meta { width: 100%; }
}

/* ─── MI MASCOTA ACTIVA — Card Rediseñada (legacy) ────────────────────── */
.pets-mp-card {
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--rar) 22%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 85% 100%, color-mix(in srgb, var(--rar) 14%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid color-mix(in srgb, var(--rar) 50%, var(--p-border));
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.pets-mp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--rar) 50%, transparent 100%);
  opacity: 0.7;
}
.pets-mp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--rar) 25%, var(--p-border));
  background: linear-gradient(90deg, rgba(0,0,0,0.30), transparent);
}
.pets-mp-header-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--rar);
  display: flex; align-items: center; gap: 8px;
}
.pets-mp-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  padding: 20px;
}

/* ─── COL IZQ: portrait + identidad ─── */
.pets-mp-left {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px;
}
.pets-mp-portrait-wrap {
  position: relative;
  width: 180px; height: 180px;
  margin-bottom: 4px;
}
.pets-mp-portrait-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, var(--rar) 0%, transparent 60%);
  opacity: 0.18;
  filter: blur(15px);
  animation: pets-mp-pulse 3.5s ease-in-out infinite;
}
@keyframes pets-mp-pulse { 0%,100% { opacity: 0.14; } 50% { opacity: 0.28; } }
.pets-mp-portrait-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid;
  background: radial-gradient(circle, rgba(0,0,0,0.4), rgba(0,0,0,0.75));
  display: grid; place-items: center;
  font-size: 92px;
  z-index: 2;
}
.pets-mp-level-badge {
  position: absolute;
  bottom: -10px; left: 50%; transform: translateX(-50%);
  background: var(--p-bg-2);
  border: 2px solid;
  border-radius: 10px;
  padding: 4px 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}
.pets-mp-level-lbl { font-size: 9px; letter-spacing: 1.5px; opacity: 0.8; font-weight: 700; }
.pets-mp-level-num { font-size: 22px; font-weight: 900; line-height: 1; }
.pets-mp-name {
  font-size: 20px; font-weight: 800;
  margin-top: 12px;
  color: var(--p-text);
}
.pets-mp-species { font-size: 12px; color: var(--p-mute); margin-top: -2px; }
.pets-mp-flavor {
  font-size: 12px; font-style: italic; color: var(--p-mute);
  margin: 4px 0 8px;
  max-width: 240px;
}
.pets-mp-feed-status {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--p-border);
  border-radius: 10px;
  font-size: 13px;
}
.pets-mp-feed-status.is-fed { border-color: rgba(95,214,132,0.5); background: rgba(95,214,132,0.10); }
.pets-mp-feed-status.is-fed i { color: var(--p-online); font-size: 22px; }
.pets-mp-feed-status.is-hungry { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.10); }
.pets-mp-feed-status.is-hungry i { color: var(--p-blood); font-size: 22px; }
.pets-mp-feed-lbl { font-weight: 700; }
.pets-mp-feed-time { font-size: 11px; opacity: 0.7; margin-top: 1px; }
.pets-mp-bonus {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(167,139,250,0.25), rgba(167,139,250,0.08));
  border: 1px solid rgba(167,139,250,0.5);
  border-radius: 10px;
  color: #c9b8ff;
  font-size: 13px;
}
.pets-mp-bonus i { font-size: 20px; }

/* ─── COL DER: secciones ─── */
.pets-mp-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pets-mp-section {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.pets-mp-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--p-gold);
  margin-bottom: 10px;
}
.pets-mp-section-head > span:first-of-type { flex: 1; }
.pets-mp-section-hint { font-size: 10px; opacity: 0.6; color: var(--p-mute); font-weight: 500; letter-spacing: 0.5px; }
.pets-mp-xp-text { font-size: 11px; color: var(--p-text); font-weight: 700; letter-spacing: 0.5px; }
.pets-mp-max-pill {
  background: linear-gradient(180deg, #f5d067, #c79a3a);
  color: #1a1428;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
}
.pets-mp-xp-bar {
  height: 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--p-border);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
}
.pets-mp-xp-fill {
  height: 100%;
  transition: width 0.4s ease;
  position: relative;
}
.pets-mp-xp-fill::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%);
}
.pets-mp-xp-hint {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 11px; color: var(--p-text);
}
.pets-mp-or { opacity: 0.5; }
.pets-mp-xp-lvl-hint { margin-left: auto; opacity: 0.7; font-size: 10.5px; }

.pets-mp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pets-mp-stat {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--p-border);
  border-radius: 8px;
}
.pets-mp-stat i { font-size: 22px; flex-shrink: 0; }
.pets-mp-stat-v { font-size: 16px; font-weight: 800; line-height: 1; }
.pets-mp-stat-l { font-size: 10px; opacity: 0.65; letter-spacing: 0.5px; margin-top: 2px; }
.pets-mp-stat-gold { background: rgba(245,208,103,0.10); border-color: rgba(245,208,103,0.4); }

.pets-mp-skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pets-mp-skill-slot {
  background: rgba(0,0,0,0.40);
  border: 1px dashed var(--p-border);
  border-radius: 9px;
  padding: 12px 8px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pets-mp-skill-slot.is-locked { opacity: 0.45; }
.pets-mp-skill-slot i { font-size: 22px; color: var(--p-mute); }
.pets-mp-skill-lbl { font-size: 11px; font-weight: 700; }
.pets-mp-skill-sub { font-size: 10px; opacity: 0.6; }

/* ─── FOOTER ─── */
.pets-mp-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid color-mix(in srgb, var(--rar) 25%, var(--p-border));
  background: rgba(0,0,0,0.30);
  flex-wrap: wrap;
}
.pets-mp-pending {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--p-border);
  border-radius: 10px;
}
.pets-mp-pending.has-gold {
  border-color: rgba(245,208,103,0.55);
  background: linear-gradient(90deg, rgba(245,208,103,0.18), rgba(245,208,103,0.05));
  animation: pets-gold-glow 2s ease infinite;
}
.pets-mp-pending i { font-size: 26px; }
.pets-mp-pending-lbl { font-size: 10px; letter-spacing: 1.5px; opacity: 0.7; font-weight: 700; }
.pets-mp-pending-amt { font-size: 22px; font-weight: 900; color: var(--p-gold); line-height: 1; }
.pets-mp-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pets-mp-actions .pets-mini-btn { padding: 9px 14px; font-size: 13px; }

@media (max-width: 820px) {
  .pets-mp-body { grid-template-columns: 1fr; padding: 14px; gap: 16px; }
  .pets-mp-portrait-wrap { width: 140px; height: 140px; }
  .pets-mp-portrait-ring { font-size: 70px; }
  .pets-mp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pets-mp-skills-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .pets-mp-skill-slot { padding: 10px 4px; }
  .pets-mp-footer { padding: 12px; flex-direction: column; align-items: stretch; }
  .pets-mp-pending { justify-content: center; }
  .pets-mp-actions { justify-content: center; }
  .pets-mp-header { padding: 10px 14px; }
}

/* ─── STABLE GRID ─────────────────────────────────────────────────────── */
.pets-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  font-size: 13px; font-weight: 700;
  color: var(--p-gold);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pets-section-head > span { flex: 1; }
.pets-stable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.pets-stable-empty {
  background: rgba(0,0,0,0.25);
  border: 1px dashed var(--p-border);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  color: var(--p-mute);
  font-size: 13px;
  grid-column: 1 / -1;
}
.pets-stable-card {
  background: linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid color-mix(in srgb, var(--rar) 35%, var(--p-border));
  border-radius: 12px;
  padding: 12px;
  display: flex; align-items: center; gap: 12px;
}
.pets-stable-portrait {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid;
  background: rgba(0,0,0,0.4);
  display: grid; place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}
.pets-stable-info { flex: 1; min-width: 0; }
.pets-stable-name { font-weight: 700; font-size: 14px; }
.pets-stable-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  margin-top: 3px;
}
.pets-stable-pending {
  font-size: 11px; color: var(--p-gold); font-weight: 700;
  margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}
.pets-stable-actions {
  display: flex; flex-direction: column; gap: 5px;
  flex-shrink: 0;
}
.pets-stable-actions .pets-mini-btn { padding: 5px 9px; font-size: 11px; }

/* ─── SHOP — Hero + Chest cards rediseñados ──────────────────────────── */
.pets-shop-hero {
  position: relative;
  background:
    radial-gradient(circle at 80% 0%, rgba(245,208,103,0.20) 0%, transparent 50%),
    radial-gradient(circle at 20% 100%, rgba(167,139,250,0.15) 0%, transparent 50%),
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid rgba(245,208,103,0.30);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}
.pets-shop-hero-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(245,208,103,0.25), rgba(245,208,103,0.05));
  border: 1px solid rgba(245,208,103,0.45);
  border-radius: 14px;
  font-size: 34px;
  color: var(--p-gold);
  flex-shrink: 0;
  animation: pets-shop-icon-pulse 3s ease-in-out infinite;
}
@keyframes pets-shop-icon-pulse {
  0%,100% { box-shadow: 0 0 0 rgba(245,208,103,0); }
  50% { box-shadow: 0 0 25px rgba(245,208,103,0.35); }
}
.pets-shop-hero-info { flex: 1; min-width: 0; }
.pets-shop-hero-title {
  font-size: 20px; font-weight: 800; letter-spacing: 2.5px;
  background: linear-gradient(180deg, #f5d067, #c79a3a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pets-shop-hero-sub { color: var(--p-mute); font-size: 12.5px; margin-top: 3px; }
.pets-shop-hero-stats {
  display: flex; gap: 12px;
}
.pets-shop-hero-stat {
  text-align: center;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 70px;
}
.pets-shop-hero-stat-v {
  font-size: 22px; font-weight: 900; line-height: 1;
  color: var(--p-text);
}
.pets-shop-hero-stat-l {
  font-size: 10px; letter-spacing: 1.2px; opacity: 0.65;
  margin-top: 3px; font-weight: 700;
}
.pets-shop-global-bar {
  position: relative;
  height: 18px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--p-border);
  border-radius: 9px;
  overflow: hidden;
}
.pets-shop-global-fill {
  height: 100%;
  background: linear-gradient(90deg, #5cf28a, #f5d067 50%, #ff6b6b);
  transition: width 0.4s;
}
.pets-shop-global-lbl {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
}
.pets-shop-intro {
  background: rgba(245,208,103,0.10);
  border: 1px solid rgba(245,208,103,0.35);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--p-text);
  display: flex; align-items: center; gap: 10px;
}
.pets-chest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.pets-chest-card {
  position: relative;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--rar) 30%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid color-mix(in srgb, var(--rar) 50%, var(--p-border));
  border-radius: 14px;
  padding: 22px 18px 18px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 8px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.pets-chest-card:not(.is-soldout):hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--rar) 28%, transparent);
}
.pets-chest-glow {
  position: absolute;
  inset: -20px -20px auto -20px;
  height: 200px;
  background: radial-gradient(circle at center top, color-mix(in srgb, var(--rar) 28%, transparent), transparent 60%);
  pointer-events: none;
  opacity: 0.85;
}
.pets-chest-card.is-soldout {
  opacity: 0.45;
  filter: grayscale(0.5);
}
.pets-chest-rar-badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  color: #1a1428;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  z-index: 3;
}
.pets-chest-urgency {
  position: absolute;
  top: 12px; right: 12px;
  background: linear-gradient(180deg, #ff6b6b, #d44545);
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  z-index: 3;
  animation: pets-urgency-pulse 1.5s ease-in-out infinite;
}
@keyframes pets-urgency-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.pets-chest-sold-out-banner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  background: rgba(255,107,107,0.92);
  color: #fff;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 6px;
  padding: 8px 24px;
  border: 3px solid #fff;
  border-radius: 8px;
  z-index: 5;
  pointer-events: none;
}
.pets-chest-icon {
  position: relative;
  font-size: 84px;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--rar) 50%, transparent));
  z-index: 2;
  transition: transform .2s;
}
.pets-chest-card:not(.is-soldout):hover .pets-chest-icon {
  transform: scale(1.08) rotate(-3deg);
}
.pets-chest-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}
.pets-chest-desc {
  color: var(--p-mute);
  font-size: 12px;
  font-style: italic;
  min-height: 30px;
  position: relative;
  z-index: 2;
}
.pets-chest-species {
  width: 100%;
  margin-top: 6px;
  padding: 8px 0 4px;
  border-top: 1px dashed var(--p-border);
  position: relative;
  z-index: 2;
}
.pets-chest-species-lbl {
  font-size: 10px;
  letter-spacing: 1.2px;
  opacity: 0.7;
  font-weight: 700;
  margin-bottom: 6px;
}
.pets-chest-species-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pets-chest-species-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid;
  background: rgba(0,0,0,0.4);
  display: grid; place-items: center;
  font-size: 18px;
  transition: transform .15s;
}
.pets-chest-species-icon:hover {
  transform: scale(1.18);
}
.pets-chest-stock {
  width: 100%;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}
.pets-stock-bar {
  height: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--p-border);
  border-radius: 5px;
  overflow: hidden;
}
.pets-stock-fill {
  height: 100%;
  transition: width 0.3s;
  position: relative;
}
.pets-stock-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.20), transparent);
}
.pets-chest-stock.is-low .pets-stock-fill { background: linear-gradient(90deg, #ff6b6b, #ffaa6b) !important; }
.pets-stock-lbl {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 5px;
  font-weight: 600;
}
.pets-stock-lbl strong { color: var(--p-text); font-size: 14px; font-weight: 800; }
.pets-chest-stock.is-low .pets-stock-lbl strong { color: #ff8a8a; }
.pets-chest-price {
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  position: relative;
  z-index: 2;
}
.pets-chest-buy-btn {
  width: 100%;
  background: linear-gradient(180deg, #f5d067, #c79a3a);
  color: #1a1428;
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  transition: filter .15s, transform .1s;
}
.pets-chest-buy-btn:hover:not(:disabled) { filter: brightness(1.12); }
.pets-chest-buy-btn:active:not(:disabled) { transform: scale(0.97); }
.pets-chest-buy-btn:disabled { opacity: 0.45; cursor: not-allowed; background: #4a4458; color: #888; }

/* ─── MARKET — Hero + Toolbar + Cards rediseñadas ─────────────────────── */
.pets-market-hero {
  position: relative;
  background:
    radial-gradient(circle at 90% 0%, rgba(167,139,250,0.20) 0%, transparent 55%),
    radial-gradient(circle at 10% 100%, rgba(122,240,255,0.13) 0%, transparent 55%),
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid rgba(167,139,250,0.30);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 18px;
}
.pets-market-hero-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(167,139,250,0.30), rgba(122,240,255,0.10));
  border: 1px solid rgba(167,139,250,0.45);
  border-radius: 14px;
  font-size: 32px;
  color: #a78bfa;
  flex-shrink: 0;
}
.pets-market-hero-info { flex: 1; min-width: 0; }
.pets-market-hero-title {
  font-size: 20px; font-weight: 800; letter-spacing: 2.5px;
  background: linear-gradient(180deg, #d4bfff, #a78bfa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pets-market-hero-sub { color: var(--p-mute); font-size: 12.5px; margin-top: 3px; }
.pets-market-hero-stats {
  display: flex; gap: 12px;
}
.pets-market-hero-stat {
  text-align: center;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 80px;
}
.pets-market-hero-stat .pmh-v {
  font-size: 20px; font-weight: 900; line-height: 1;
  color: var(--p-text);
}
.pets-market-hero-stat .pmh-l {
  font-size: 10px; letter-spacing: 1.2px; opacity: 0.65;
  margin-top: 3px; font-weight: 700;
}

.pets-market-toolbar {
  display: flex; gap: 12px; align-items: center;
  background: var(--p-bg-2);
  border: 1px solid var(--p-border);
  border-radius: 12px;
  padding: 10px 12px;
  flex-wrap: wrap;
}
.pets-market-chips {
  display: flex; gap: 6px;
  flex: 1; flex-wrap: wrap;
  min-width: 0;
}
.pets-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--p-border);
  color: var(--p-mute);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pets-chip:hover { background: rgba(255,255,255,0.05); color: var(--p-text); }
.pets-chip.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chip-color) 22%, transparent), color-mix(in srgb, var(--chip-color) 8%, transparent));
  border-color: var(--chip-color);
  color: var(--p-text);
  font-weight: 700;
}
.pets-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.pets-chip-count {
  background: rgba(0,0,0,0.40);
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.pets-market-toolbar-right {
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
}
.pets-market-select {
  background: var(--p-bg-1);
  border: 1px solid var(--p-border);
  color: var(--p-text);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.pets-market-my-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, rgba(245,208,103,0.22), rgba(245,208,103,0.06));
  border: 1px solid rgba(245,208,103,0.50);
  color: var(--p-gold);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}
.pets-market-my-btn:hover { filter: brightness(1.15); }
.pets-market-my-count {
  background: var(--p-gold);
  color: #1a1428;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
}

.pets-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.pets-market-card {
  position: relative;
  background:
    radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--rar) 25%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--p-bg-3), var(--p-bg-2));
  border: 1px solid color-mix(in srgb, var(--rar) 45%, var(--p-border));
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.pets-market-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--rar) 22%, transparent);
}
.pets-market-card.is-cheapest {
  border-color: #5cf28a;
  box-shadow: 0 0 0 1px #5cf28a55, 0 4px 18px rgba(92,242,138,0.20);
}
.pets-market-cheapest-tag {
  position: absolute;
  top: 8px; right: 8px;
  background: linear-gradient(180deg, #5cf28a, #3da866);
  color: #062d12;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  z-index: 5;
  display: inline-flex; align-items: center; gap: 3px;
}
.pets-market-portrait {
  position: relative;
  height: 130px;
  border-bottom: 1px solid color-mix(in srgb, var(--rar) 35%, var(--p-border));
  display: grid; place-items: center;
  font-size: 64px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--rar) 14%, transparent), transparent 70%),
    rgba(0,0,0,0.35);
  overflow: hidden;
}
.pets-market-rar-banner {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #1a1428;
  text-transform: uppercase;
}
.pets-market-lvl-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,0.65);
  border: 1px solid;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--p-text);
}
.pets-market-card-body { padding: 12px 14px 10px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pets-market-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--p-text);
}
.pets-market-species { font-size: 11px; color: var(--p-mute); margin-top: -2px; }
.pets-market-flavor {
  color: var(--p-mute);
  font-size: 11.5px;
  font-style: italic;
  min-height: 30px;
  line-height: 1.3;
  margin: 4px 0;
}
.pets-market-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 10px;
  font-size: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  margin-bottom: 6px;
}
.pets-market-stats span {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600;
}
.pets-market-seller {
  font-size: 11.5px;
  opacity: 0.75;
  display: flex; align-items: center; gap: 5px;
}
.pets-market-seller i { opacity: 0.7; }
.pets-market-seller small { opacity: 0.6; }
.pets-market-buy-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(0,0,0,0.30);
  border-top: 1px solid color-mix(in srgb, var(--rar) 25%, var(--p-border));
}
.pets-market-price {
  display: inline-flex; align-items: center; gap: 5px;
  color: #7af0ff;
  font-weight: 900;
  font-size: 18px;
}
.pets-market-price.is-poor { color: #ff8a8a; }
.pets-market-buy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #f5d067, #c79a3a);
  border: none;
  color: #1a1428;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.pets-market-buy-btn:hover:not(:disabled) { filter: brightness(1.12); }
.pets-market-buy-btn:active:not(:disabled) { transform: scale(0.95); }
.pets-market-buy-btn.is-disabled,
.pets-market-buy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #4a4458;
  color: #888;
}

.pets-fee-breakdown {
  margin-top: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(245,208,103,0.18);
  border-radius: 9px;
  padding: 10px 12px;
}
.pets-fee-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
}
.pets-fee-row.pets-fee-fee { color: #ff6b6b; }
.pets-fee-row.pets-fee-net {
  border-top: 1px solid rgba(245,208,103,0.20);
  margin-top: 4px;
  padding-top: 7px;
  font-weight: 700;
  color: #5cf28a;
}

.pets-mylisting-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--rar) 35%, var(--p-border));
  background: rgba(0,0,0,0.20);
  margin-bottom: 6px;
}

/* ─── MODAL OVERLAY ───────────────────────────────────────────────────── */
.pets-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 4, 16, 0.78);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: grid; place-items: center;
  padding: 16px;
  animation: pets-fade-in .2s ease;
}
@keyframes pets-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pets-modal {
  position: relative;
  background:
    radial-gradient(circle at 50% -10%, rgba(245,208,103,0.18), transparent 60%),
    linear-gradient(180deg, var(--p-bg-3, #211934), var(--p-bg-2, #1a1428));
  border: 1px solid rgba(245,208,103,0.45);
  border-radius: 14px;
  max-width: 440px;
  width: 100%;
  padding: 22px;
  color: #e9e1d0;
}
.pets-modal-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(245,208,103,0.25);
  border-radius: 50%;
  color: #e9e1d0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 20;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  padding: 0;
}
.pets-modal-x:hover {
  background: rgba(255,107,107,0.20);
  border-color: rgba(255,107,107,0.55);
  color: #ff6b6b;
}
.pets-modal-x:active { transform: scale(0.93); }
.pets-modal-title {
  font-size: 16px; font-weight: 800;
  background: linear-gradient(180deg, #f5d067, #c79a3a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.pets-modal-title i { -webkit-text-fill-color: initial; color: #f5d067; }
.pets-modal-body { font-size: 14px; }
.pets-modal-body input {
  width: 100%;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(245,208,103,0.30);
  border-radius: 9px;
  color: #e9e1d0;
  padding: 9px 12px;
  font-size: 14px;
  outline: none;
}
.pets-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px;
}

/* ─── REVEAL ANIMATION (CHEST OPEN) ──────────────────────────────────── */
.pets-reveal-overlay { background: rgba(0,0,0,0.88); }
.pets-reveal-modal {
  position: relative;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--rar) 25%, transparent), transparent 70%),
    linear-gradient(180deg, var(--p-bg-3, #211934), var(--p-bg-2, #1a1428));
  border: 2px solid var(--rar);
  border-radius: 16px;
  max-width: 460px;
  width: 100%;
  padding: 28px 24px 24px;
  text-align: center;
  overflow: hidden;
  animation: pets-reveal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pets-reveal-banner {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 16px;
  background: linear-gradient(180deg, rgba(245,208,103,0.25), rgba(245,208,103,0.05));
  border: 1px solid rgba(245,208,103,0.55);
  border-radius: 8px;
  color: #f5d067;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.pets-reveal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.pets-reveal-actions .pets-mini-btn { padding: 8px 14px; font-size: 13px; }
.pets-reveal-actions .pets-mini-btn small { opacity: 0.7; font-weight: 500; margin-left: 3px; }
.pets-reveal-actions .pets-cta-btn { padding: 11px 22px; }
@keyframes pets-reveal-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.pets-reveal-shine {
  position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--rar) 30deg, transparent 60deg);
  opacity: 0.18;
  animation: pets-shine 4s linear infinite;
}
@keyframes pets-shine { to { transform: rotate(360deg); } }
.pets-reveal-icon {
  font-size: 110px;
  margin-bottom: 8px;
  position: relative;
  filter: drop-shadow(0 0 20px var(--rar));
}
.pets-reveal-rar {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: #1a1428; text-transform: uppercase;
  margin-bottom: 10px;
  position: relative;
}
.pets-reveal-name {
  font-size: 24px; font-weight: 800;
  margin-bottom: 4px;
  position: relative;
}
.pets-reveal-flavor {
  color: #8a8294;
  font-style: italic;
  font-size: 13px;
  margin-bottom: 16px;
  position: relative;
}
.pets-reveal-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
  position: relative;
}
.pets-reveal-stats > div {
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(245,208,103,0.30);
  border-radius: 8px;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 700;
}

/* ─── MOBILE ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .pets-hero { padding: 14px 16px; gap: 12px; }
  .pets-hero-icon { width: 44px; height: 44px; font-size: 22px; }
  .pets-hero-title { font-size: 17px; letter-spacing: 1px; }
  .pets-hero-stats { display: none; }

  .pets-active-card { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .pets-active-stats { grid-template-columns: repeat(2, 1fr); }
  .pets-active-right { order: 3; }
  .pets-portrait-ring { width: 88px; height: 88px; font-size: 46px; }

  .pets-chest-grid { grid-template-columns: 1fr; }
  .pets-market-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pets-stable-card { padding: 10px; }
  .pets-stable-actions { flex-direction: row; }

  /* Shop + Market hero mobile */
  .pets-shop-hero, .pets-market-hero { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .pets-shop-hero-icon, .pets-market-hero-icon { width: 48px; height: 48px; font-size: 24px; }
  .pets-shop-hero-title, .pets-market-hero-title { font-size: 16px; letter-spacing: 1.5px; }
  .pets-shop-hero-stats, .pets-market-hero-stats { width: 100%; justify-content: space-between; }
  .pets-shop-hero-stat, .pets-market-hero-stat { padding: 6px 10px; min-width: 0; flex: 1; }
  .pets-shop-hero-stat-v, .pets-market-hero-stat .pmh-v { font-size: 17px; }

  /* Market toolbar mobile */
  .pets-market-toolbar { padding: 8px; }
  .pets-market-chips { gap: 4px; }
  .pets-chip { padding: 5px 9px; font-size: 11.5px; }
  .pets-market-toolbar-right { width: 100%; justify-content: space-between; }
  .pets-market-select { flex: 1; }

  /* Chest cards mobile */
  .pets-chest-icon { font-size: 64px; }
  .pets-chest-rar-badge, .pets-chest-urgency { font-size: 9px; padding: 2px 7px; }
  .pets-chest-sold-out-banner { font-size: 22px; letter-spacing: 3px; padding: 6px 16px; }
  .pets-chest-species-icon { width: 30px; height: 30px; font-size: 15px; }

  /* Market cards mobile */
  .pets-market-portrait { height: 100px; font-size: 52px; }
  .pets-market-card-body { padding: 10px 12px 8px; }
  .pets-market-name { font-size: 14px; }
  .pets-market-stats { grid-template-columns: repeat(2, 1fr); gap: 4px 8px; font-size: 11px; }
  .pets-market-buy-row { padding: 8px 12px; }
  .pets-market-price { font-size: 15px; }
  .pets-market-buy-btn { padding: 7px 10px; font-size: 11.5px; }
  .pets-market-cheapest-tag { font-size: 9px; padding: 2px 6px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   TABS V3 — Estilo "carpeta organizadora" (underline + glow + dot)
   ═════════════════════════════════════════════════════════════════════════ */
.pets-tabs-v3 {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(245,208,103,0.10);
  position: relative;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox: hide visually, keep scroll capability */
  -ms-overflow-style: none; /* IE/Edge */
}
.pets-tabs-v3::-webkit-scrollbar { display: none; } /* WebKit */
.pets-tab-v3 {
  position: relative;
  background: transparent;
  border: none;
  color: #8a8294;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .18s ease;
}
.pets-tab-v3 i { font-size: 18px; opacity: 0.85; }
.pets-tab-v3 .pets-tab-count { opacity: 0.55; font-weight: 600; letter-spacing: 0.5px; }
.pets-tab-v3:hover:not(.is-active) { color: #c9c2d4; }
.pets-tab-v3.is-active { color: #c9b8ff; }
.pets-tab-v3.is-active i { color: #a78bfa; opacity: 1; }
/* Underline glow + dot indicator */
.pets-tab-v3.is-active::after {
  content: '';
  position: absolute;
  left: 14%; right: 14%;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #a78bfa 30%, #a78bfa 70%, transparent 100%);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(167,139,250,0.65), 0 0 6px rgba(167,139,250,0.85);
}
.pets-tab-v3.is-active::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 8px #a78bfa;
}

/* ═════════════════════════════════════════════════════════════════════════
   PK BINDER — Layout "carpeta organizadora" para Mi Mascota
   ═════════════════════════════════════════════════════════════════════════ */
.pk-binder {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pk-binder-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}
.pk-binder-mid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}
.pk-panel {
  position: relative;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--rar) 10%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #1d1830 0%, #14101f 100%);
  border: 1px solid rgba(245,208,103,0.14);
  border-radius: 14px;
  padding: 18px 20px;
  overflow: hidden;
}
.pk-panel-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.pk-panel-head i { font-size: 16px; }
.pk-panel-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #e9e1d0;
  text-transform: uppercase;
}
.pk-panel-soon {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.55;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* ─── HERO PANEL (Conejo de Campo · Saltarin · sprite right) ─── */
.pk-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  align-items: stretch;
  min-height: 220px;
}
.pk-hero-panel .pk-rar-tag {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 3;
}
.pk-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 38px 4px 6px;
}
.pk-hero-name {
  font-size: 30px;
  font-weight: 800;
  color: #f5d067;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.pk-hero-flavor {
  color: #b8b0c2;
  font-size: 14px;
  font-style: italic;
  opacity: 0.85;
}
.pk-status-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.pk-status-pill i { font-size: 14px; }
.pk-status-pill.is-fed {
  background: rgba(95,214,132,0.12);
  border: 1px solid rgba(95,214,132,0.40);
  color: #5fd684;
}
.pk-status-pill.is-hungry {
  background: rgba(255,107,107,0.12);
  border: 1px solid rgba(255,107,107,0.40);
  color: #ff6b6b;
}
.pk-hero-sprite-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
}
.pk-hero-sprite-bg {
  position: absolute;
  inset: -10% -10% -10% -10%;
  pointer-events: none;
  filter: blur(6px);
}
.pk-hero-sprite-img {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.pk-hero-sprite-icon {
  position: relative;
  font-size: 120px;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55));
}
.pk-hero-nv {
  position: absolute;
  bottom: 4px; right: 4px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 11px;
  background: radial-gradient(circle at center, #1a1428, #0e0a18);
  border: 2px solid;
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.pk-hero-nv span { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; opacity: 0.85; }
.pk-hero-nv b { font-size: 16px; font-weight: 900; line-height: 1; }

/* ─── PROGRESS PANEL ─── */
.pk-progress-panel .pk-xp-num-row {
  margin-bottom: 8px;
}
.pk-progress-panel .pk-xp-bar {
  margin: 4px 0 12px;
  height: 12px;
}
.pk-feed-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: #e9e1d0;
}
.pk-feed-hint > span:not(.pk-dot):not(.pk-feed-target) {
  display: inline-flex; align-items: center; gap: 6px;
}
.pk-feed-hint .pk-dot { opacity: 0.35; }
.pk-feed-hint .pk-feed-target {
  margin-left: auto;
  opacity: 0.65;
  font-size: 11.5px;
  letter-spacing: 0.3px;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .pk-binder-top, .pk-binder-mid { grid-template-columns: 1fr; }
  .pk-hero-panel { grid-template-columns: minmax(0, 1fr) 150px; min-height: auto; }
  .pk-hero-name { font-size: 24px; }
  .pk-hero-sprite-img { max-height: 180px; }
  .pk-hero-sprite-icon { font-size: 88px; }
  .pk-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pk-hero-panel {
    grid-template-columns: 1fr;
    grid-template-areas: 'sprite' 'text';
  }
  .pk-hero-text { grid-area: text; padding-top: 8px; }
  .pk-hero-sprite-wrap { grid-area: sprite; min-height: 180px; }
  .pk-hero-panel .pk-rar-tag { top: 12px; }
  .pets-tab-v3 { padding: 12px 14px; font-size: 11px; letter-spacing: 1px; }
  .pets-tab-v3 i { font-size: 16px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PKV3 — Layout 2-col mockup-fiel (portrait grande + stats inline + bottom row)
   ═════════════════════════════════════════════════════════════════════════ */
.pkv3-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--rar) 12%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, #1a1428 0%, #15101e 100%);
  border: 1px solid rgba(245, 208, 103, 0.18);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}
/* 2026-06-02: Imagen de fondo atmosférica (criaturas fantasy) — card overall */
.pkv3-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/pets/card_bg_creatures.webp?v=3');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
/* Vignette para legibilidad del contenido sobre el bg */
.pkv3-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(15,10,25,0.35) 90%),
    linear-gradient(180deg, rgba(15,10,25,0.20) 0%, transparent 25%, transparent 75%, rgba(15,10,25,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.pkv3-card > * { position: relative; z-index: 2; }

/* ─── PORTRAIT COL ─── */
.pkv3-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--rar) 18%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #1d1830 0%, #14101f 100%);
  border-right: 1px solid rgba(245, 208, 103, 0.10);
  padding: 18px;
  min-height: 540px;
  overflow: hidden;
}
/* 2026-06-02: fondomascota como bg del portrait (detrás del sprite) */
.pkv3-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/pets/fondomascota.webp?v=1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.70;
  pointer-events: none;
  z-index: 0;
}
/* Vignette suave para que el sprite y el NV/rareza no se pierdan sobre la imagen */
.pkv3-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 0%, rgba(15,10,25,0.40) 90%),
    linear-gradient(180deg, rgba(15,10,25,0.30) 0%, transparent 25%, transparent 70%, rgba(15,10,25,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}
.pkv3-portrait > * { position: relative; z-index: 2; }
/* 2026-06-02: Rareza top-left (sola) + Nivel circular top-right */
.pkv3-tl-rarity {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 4;
}
.pkv3-rar {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.pkv3-tr-level {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
}
/* 2026-06-02: Badge de nivel refinado — doble anillo + dorado apagado */
/* NOTA: NO usar position:relative aquí — pisa el position:absolute de .pkv3-tr-level
   (misma specificity, regla posterior gana). El absolute del padre ya da contexto al ::before. */
.pkv3-level-circle {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background:
    radial-gradient(circle at 50% 35%, rgba(243, 215, 117, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(30,22,45,0.92), rgba(14,10,24,0.96));
  box-shadow:
    0 4px 16px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(243, 215, 117, 0.12);
}
.pkv3-level-circle::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.22);
  pointer-events: none;
}
.pkv3-level-lbl {
  position: relative;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #d4af37;
  opacity: 0.85;
  margin-bottom: -3px;
  text-transform: uppercase;
}
.pkv3-level-num {
  position: relative;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #f3d775 0%, #d4af37 55%, #a0801b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #d4af37;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* DEPRECATED: estrella FAV + flechas carousel — ya no se renderizan */
.pkv3-corner-tl, .pkv3-corner-tr, .pkv3-arrow { display: none; }

/* Stage central: sprite + magic floor */
.pkv3-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: end center;
  margin-top: 50px;
  min-height: 280px;
}
.pkv3-floor {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  aspect-ratio: 1;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, color-mix(in srgb, var(--rar) 50%, transparent) 30deg,
      transparent 60deg, color-mix(in srgb, var(--rar) 30%, transparent) 90deg,
      transparent 120deg, color-mix(in srgb, var(--rar) 50%, transparent) 150deg,
      transparent 180deg, color-mix(in srgb, var(--rar) 30%, transparent) 210deg,
      transparent 240deg, color-mix(in srgb, var(--rar) 50%, transparent) 270deg,
      transparent 300deg, color-mix(in srgb, var(--rar) 30%, transparent) 330deg,
      transparent 360deg
    );
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  animation: pkv3-floor-spin 32s linear infinite;
  pointer-events: none;
}
.pkv3-floor::before {
  content: '';
  position: absolute;
  inset: 14%;
  border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
  border-radius: 50%;
  opacity: 0.5;
}
.pkv3-floor::after {
  content: '';
  position: absolute;
  inset: 28%;
  border: 1px dashed color-mix(in srgb, var(--rar) 35%, transparent);
  border-radius: 50%;
  opacity: 0.5;
}
@keyframes pkv3-floor-spin { to { transform: translateX(-50%) rotate(360deg); } }
.pkv3-sprite-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: end center;
  z-index: 2;
}
.pkv3-sprite {
  max-width: 92%;
  max-height: 380px;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.7));
}
.pkv3-sprite-icon {
  font-size: 160px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.6));
}

/* Identity bottom: name + flavor + XP bar */
/* 2026-06-02: Sube el bloque para acercarse al sprite (puede solapar un poco) */
.pkv3-identity {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-top: 0;
  margin-top: -40px;
}
.pkv3-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: 0.3px;
  /* Dorado un poco más claro */
  background: linear-gradient(180deg, #fce8a8 0%, #ecc862 50%, #b88f2b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #ecc862; /* fallback */
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
.pkv3-flavor {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12.5px;
  color: #a89db8;
  opacity: 0.85;
  margin-bottom: 10px;
}
.pkv3-flavor::before { content: '« '; opacity: 0.55; }
.pkv3-flavor::after { content: ' »'; opacity: 0.55; }
/* 2026-06-02: XP bar con icono dorado + texto al lado (estilo screenshot) */
.pkv3-xp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pkv3-xp-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(243,215,117,0.12), transparent 60%),
    linear-gradient(180deg, rgba(30,22,45,0.92), rgba(14,10,24,0.96));
  border: 1px solid rgba(212,175,55,0.45);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(243,215,117,0.12);
}
.pkv3-xp-icon i {
  font-size: 18px;
  color: #d4af37;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.pkv3-xp-bar {
  position: relative;
  flex: 1;
  height: 22px;
  background: rgba(0,0,0,0.55);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.22);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.pkv3-xp-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.4s;
  box-shadow: 0 0 12px rgba(167,139,250,0.35);
}
.pkv3-xp-text {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #e9e1d0;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap;
}

/* ─── CONTENT COL ─── */
.pkv3-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 18px 0;
  min-width: 0;
}
.pkv3-block {
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(245,208,103,0.10);
  border-radius: 12px;
  padding: 14px 16px;
}
.pkv3-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
/* 2026-06-02: dorado refinado (matching inventory item modal) */
.pkv3-block-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  /* Gradient gold del modal de items */
  background: linear-gradient(180deg, #f3d775 0%, #d4af37 50%, #a0801b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d4af37;        /* fallback */
}
.pkv3-rename {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,208,103,0.25);
  color: #e9e1d0;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pkv3-rename:hover { background: rgba(245,208,103,0.10); border-color: rgba(245,208,103,0.5); }

/* Stats inline (6 boxes en una fila) */
.pkv3-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.pkv3-stat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  min-width: 0;
}
.pkv3-stat > i {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.pkv3-stat-info { min-width: 0; }
.pkv3-stat-v {
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  color: #e9e1d0;
}
.pkv3-stat-l {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  opacity: 0.7;
  margin-top: 3px;
  text-transform: uppercase;
}
.pkv3-stat.orange > i { color: #ff8a4c; }
.pkv3-stat.orange { background: rgba(255,138,76,0.08); border-color: rgba(255,138,76,0.20); }
.pkv3-stat.blue > i { color: #5cc4ff; }
.pkv3-stat.blue { background: rgba(92,196,255,0.08); border-color: rgba(92,196,255,0.20); }
.pkv3-stat.red > i { color: #ff6b6b; }
.pkv3-stat.red { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.20); }
.pkv3-stat.green > i { color: #5cf28a; }
.pkv3-stat.green { background: rgba(92,242,138,0.08); border-color: rgba(92,242,138,0.20); }
.pkv3-stat.gold > i { color: #f5d067; }
.pkv3-stat.gold { background: rgba(245,208,103,0.10); border-color: rgba(245,208,103,0.30); }

/* MID ROW: Habilidades + Alimentación */
.pkv3-mid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
}

/* ─── Habilidades — 2026-06-06 v3 con descripción ────────────────────────
   Cards horizontales: [icon 64×64] [name + badge efecto / descripción 2-3 líneas].
   1 columna porque ahora la card es más alta (tiene descripción). */
.pkv3-skills {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.pkv3-skill {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 14px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(28,18,46,0.72) 0%, rgba(14,8,20,0.88) 100%);
  border: 1px solid rgba(245,208,103,0.22);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.16s ease, box-shadow 0.2s ease;
}
.pkv3-skill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 50%, rgba(245,208,103,0.10) 0%, transparent 55%);
  pointer-events: none;
}
.pkv3-skill.is-unlocked {
  border-color: rgba(245,208,103,0.42);
  box-shadow: 0 2px 10px rgba(245,208,103,0.08);
}
.pkv3-skill.is-unlocked:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245,208,103,0.18);
}
.pkv3-skill.is-locked {
  border-color: rgba(255,255,255,0.06);
  background: linear-gradient(135deg, rgba(20,14,30,0.55), rgba(12,8,18,0.7));
}
.pkv3-skill.is-locked::before { opacity: 0; }

.pkv3-skill-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 50%, rgba(245,208,103,0.18) 0%, rgba(0,0,0,0.55) 80%);
  border: 1px solid rgba(245,208,103,0.35);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.pkv3-skill-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.pkv3-skill-ring i {
  font-size: 26px;
  color: #f5d067;
}
.pkv3-skill.is-locked .pkv3-skill-ring {
  background: linear-gradient(180deg, #1a1428, #0e0a1a);
  border-color: rgba(255,255,255,0.08);
  filter: grayscale(0.5);
}
.pkv3-skill.is-locked .pkv3-skill-ring img { opacity: 0.45; }
.pkv3-skill.is-locked .pkv3-skill-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 48%, rgba(0,0,0,0.45) 50%, transparent 52%),
    rgba(0,0,0,0.35);
  pointer-events: none;
}
.pkv3-skill.is-locked .pkv3-skill-ring i { color: #6e6480; }

.pkv3-skill-info {
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pkv3-skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pkv3-skill-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #f5d067;
  letter-spacing: 0.3px;
  line-height: 1.15;
}
/* Badge dorado con el efecto base "+X / nivel" */
.pkv3-skill-effect {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(245,208,103,0.20), rgba(245,208,103,0.10));
  border: 1px solid rgba(245,208,103,0.42);
  color: #f5d067;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.pkv3-skill-effect.is-locked {
  background: linear-gradient(180deg, rgba(150,150,170,0.18), rgba(80,80,100,0.10));
  border-color: rgba(150,150,170,0.32);
  color: #b0a6c0;
  text-shadow: none;
}
.pkv3-skill-desc {
  font-size: 12px;
  color: #cdc4dc;
  line-height: 1.45;
  opacity: 0.90;
}
.pkv3-skill.is-locked .pkv3-skill-name { color: #8a8294; font-weight: 700; }
.pkv3-skill.is-locked .pkv3-skill-desc { color: #807490; opacity: 0.75; }

@media (max-width: 720px) {
  .pkv3-skill { grid-template-columns: 54px 1fr; padding: 10px 12px; gap: 10px; }
  .pkv3-skill-ring { width: 54px; height: 54px; }
  .pkv3-skill-name { font-size: 13.5px; }
  .pkv3-skill-effect { font-size: 11px; padding: 2px 7px; }
  .pkv3-skill-desc { font-size: 11.5px; }
}

/* Alimentación — circular badge izq + texto der (sin botón, matching mockup) */
.pkv3-feed-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 4px;
}
.pkv3-feed-status-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  text-align: center;
  position: relative;
}
/* Anillo circular alrededor del icono */
.pkv3-feed-status-icon::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  width: 76px; height: 76px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid;
  pointer-events: none;
}
.pkv3-feed-status.is-fed .pkv3-feed-status-icon::before {
  border-color: rgba(95,220,165,0.65);
  box-shadow: 0 0 20px rgba(95,220,165,0.28), inset 0 0 20px rgba(95,220,165,0.18);
}
.pkv3-feed-status.is-hungry .pkv3-feed-status-icon::before {
  border-color: rgba(255,107,107,0.55);
  box-shadow: 0 0 18px rgba(255,107,107,0.25), inset 0 0 18px rgba(255,107,107,0.15);
}
.pkv3-feed-status-icon i {
  font-size: 30px;
  margin-top: 4px;
  z-index: 2;
}
.pkv3-feed-status.is-fed .pkv3-feed-status-icon i { color: #5fdca5; filter: drop-shadow(0 0 8px rgba(95,220,165,0.55)); }
.pkv3-feed-status.is-hungry .pkv3-feed-status-icon i { color: #ff6b6b; }
.pkv3-feed-status-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  margin-top: 18px;          /* deja espacio para el anillo */
  z-index: 2;
}
.pkv3-feed-status.is-fed .pkv3-feed-status-lbl { color: #5fdca5; }
.pkv3-feed-status.is-hungry .pkv3-feed-status-lbl { color: #ff6b6b; }
.pkv3-feed-status-time {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
  color: #e9e1d0;
  z-index: 2;
}
.pkv3-feed-status-info { flex: 1; min-width: 0; padding-left: 8px; }
.pkv3-feed-status-msg {
  font-size: 13px;
  font-weight: 600;
  color: #e9e1d0;
  line-height: 1.3;
}
.pkv3-feed-status-perk {
  font-size: 11.5px;
  opacity: 0.65;
  margin-top: 5px;
  line-height: 1.3;
}

/* Acciones (botones alimentar) */
.pkv3-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pkv3-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid;
  cursor: pointer;
  text-align: left;
  font-weight: 700;
  transition: filter .15s, transform .1s;
  min-height: 72px;
  position: relative;
  overflow: hidden;
}
.pkv3-action:hover:not(:disabled) { filter: brightness(1.10); transform: translateY(-1px); }
.pkv3-action:active:not(:disabled) { transform: scale(0.98); }
.pkv3-action:disabled { opacity: 0.4; cursor: not-allowed; }
.pkv3-action-icon {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.pkv3-action-icon .gi { font-size: 36px; }
.pkv3-action-text { flex: 1; min-width: 0; }
.pkv3-action-lbl {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pkv3-action-lbl small {
  opacity: 0.65;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0;
  margin-left: 4px;
  text-transform: none;
}
.pkv3-action-plus { font-size: 18px; font-weight: 900; }
.pkv3-action-sub {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 3px;
  letter-spacing: 0.3px;
}
/* 2026-06-02: verde muted (matching botón equipar del inventory modal) */
.pkv3-action-common {
  background:
    radial-gradient(circle at left center, rgba(95,220,165,0.28), transparent 55%),
    linear-gradient(135deg, rgba(95,220,165,0.18), rgba(74,188,136,0.22));
  border-color: rgba(95,220,165,0.55);
  color: #d4f0e2;
}
/* Hover: subimos sutilmente la saturación SIN volverlo neón */
.pkv3-action-common:hover:not(:disabled) {
  background:
    radial-gradient(circle at left center, rgba(95,220,165,0.38), transparent 60%),
    linear-gradient(135deg, rgba(95,220,165,0.28), rgba(74,188,136,0.32));
  border-color: rgba(95,220,165,0.75);
  color: #e6f5ec;
}
.pkv3-action-common .pkv3-action-icon { color: #5fdca5; box-shadow: inset 0 0 0 1px rgba(95,220,165,0.35); }

/* 2026-06-02: anulamos el brightness(1.10) global solo en estos botones (volvía chillón) */
.pkv3-action-common:hover:not(:disabled),
.pkv3-action-rare:hover:not(:disabled) {
  filter: none !important;
}
.pkv3-action-rare {
  background:
    radial-gradient(circle at left center, rgba(167,139,250,0.30), transparent 55%),
    linear-gradient(135deg, rgba(70,40,110,0.50), rgba(40,25,70,0.55));
  border-color: rgba(167,139,250,0.55);
  color: #d9caff;
}
.pkv3-action-rare .pkv3-action-icon { color: #a78bfa; box-shadow: inset 0 0 0 1px rgba(167,139,250,0.25); }

/* 2026-06-11 v2: botón "×N" más prominente para alimentar N hierbas a la vez.
   Pasa de tag mini a botón notorio con glow. Click abre modal in-game con stepper. */
.pkv3-action-multi {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 13.5px;
  font-weight: 900;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(0,0,0,0.88), rgba(0,0,0,0.70));
  border: 1.5px solid currentColor;
  border-radius: 9px;
  letter-spacing: 0.8px;
  z-index: 4;
  cursor: pointer;
  opacity: 1;
  line-height: 1.1;
  pointer-events: auto;
  box-shadow:
    0 2px 10px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 14px currentColor;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
  animation: pkv3-multi-pulse 2.4s ease-in-out infinite;
}
.pkv3-action-multi::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 0%, currentColor 100%);
  opacity: 0.18;
  pointer-events: none;
}
@keyframes pkv3-multi-pulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 14px currentColor; }
  50%      { box-shadow: 0 2px 12px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.10), 0 0 22px currentColor; }
}
.pkv3-action-multi:hover {
  transform: scale(1.10);
  background: linear-gradient(135deg, rgba(0,0,0,0.95), rgba(0,0,0,0.80));
}
.pkv3-action-multi:active { transform: scale(0.96); }

/* =====================================================================
   2026-06-11: MODAL IN-GAME para alimentar N hierbas (stepper + presets)
   Reemplaza window.prompt nativo por una UI consistente con el resto.
   ===================================================================== */
.pkv3-bulk-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: pkv3-bulk-in .18s ease-out;
}
.pkv3-bulk-modal.is-closing { animation: pkv3-bulk-out .14s ease-in forwards; }
@keyframes pkv3-bulk-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pkv3-bulk-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.pkv3-bulk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 16, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pkv3-bulk-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  background: linear-gradient(180deg, #1a1228 0%, #0e0a1a 100%);
  border: 1px solid var(--accent, #d4af37);
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 60px color-mix(in srgb, var(--accent, #d4af37) 25%, transparent);
  color: #f0e3c4;
  animation: pkv3-bulk-pop .22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pkv3-bulk-pop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pkv3-bulk-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f0e3c4;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.pkv3-bulk-close:hover { background: rgba(255,255,255,0.14); }
.pkv3-bulk-title {
  font-family: 'Cinzel', var(--font-title, serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent, #d4af37);
  margin-bottom: 4px;
  text-align: center;
  text-transform: uppercase;
}
.pkv3-bulk-sub {
  text-align: center;
  font-size: 13.5px;
  opacity: 0.92;
  margin-bottom: 18px;
}
.pkv3-bulk-sub span { opacity: 0.78; margin-left: 4px; }
.pkv3-bulk-sub b { color: var(--accent, #d4af37); }

.pkv3-bulk-stepper {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 8px;
  margin-bottom: 12px;
}
.pkv3-bulk-btn-step {
  min-width: 54px;
  height: 56px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: #f0e3c4;
  font-weight: 900;
  font-size: 16px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.pkv3-bulk-btn-step:hover { background: rgba(255,255,255,0.12); border-color: var(--accent, #d4af37); }
.pkv3-bulk-btn-step:active { transform: scale(0.94); }
.pkv3-bulk-input {
  width: 100%; min-width: 0;
  height: 56px;
  background: rgba(0,0,0,0.45);
  border: 2px solid var(--accent, #d4af37);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  text-align: center;
  border-radius: 11px;
  letter-spacing: 0.04em;
  -moz-appearance: textfield;
}
.pkv3-bulk-input::-webkit-outer-spin-button,
.pkv3-bulk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pkv3-bulk-input:focus {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #d4af37) 35%, transparent);
}

.pkv3-bulk-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.pkv3-bulk-presets button {
  padding: 9px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f0e3c4;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.pkv3-bulk-presets button:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--accent, #d4af37);
}
.pkv3-bulk-presets button:active { transform: scale(0.94); }

.pkv3-bulk-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pkv3-bulk-info b { color: var(--accent, #d4af37); font-size: 16px; }

.pkv3-bulk-actions {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
}
.pkv3-bulk-actions button {
  height: 52px;
  border: 0;
  border-radius: 11px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.pkv3-bulk-actions button:hover { filter: brightness(1.12); }
.pkv3-bulk-actions button:active { transform: scale(0.98); }
.pkv3-bulk-cancel {
  background: rgba(255,255,255,0.06);
  color: #f0e3c4;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.pkv3-bulk-confirm {
  background: var(--accent, #d4af37);
  color: #1a1228 !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #d4af37) 40%, transparent);
}
.pkv3-bulk-confirm i { font-size: 18px; }
.pkv3-bulk-confirm-qty {
  background: rgba(0,0,0,0.20);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
  margin-left: 4px;
}

@media (max-width: 480px) {
  .pkv3-bulk-card { padding: 22px 18px 18px; }
  .pkv3-bulk-presets { grid-template-columns: repeat(3, 1fr); }
  .pkv3-bulk-btn-step { min-width: 46px; height: 50px; font-size: 15px; }
  .pkv3-bulk-input { height: 50px; font-size: 22px; }
  .pkv3-bulk-actions button { height: 48px; font-size: 14px; }
}

/* Responsive: mobile/tablet */
@media (max-width: 1100px) {
  .pkv3-card { grid-template-columns: 1fr; }
  .pkv3-portrait { border-right: none; border-bottom: 1px solid rgba(245,208,103,0.10); min-height: 420px; }
  .pkv3-content { padding: 0 14px 14px; }
  .pkv3-stats { grid-template-columns: repeat(3, 1fr); }
  .pkv3-mid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pkv3-stats { grid-template-columns: repeat(2, 1fr); }
  .pkv3-actions { grid-template-columns: 1fr; }
  .pkv3-name { font-size: 22px; }
  .pkv3-sprite { max-height: 280px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PETS CHEST CARD V2 — Rediseño 2026-06-02
   Real sprites preview + gold/day pill + "Ver mascotas" modal
   ═════════════════════════════════════════════════════════════════════════ */
.pcc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--rar) 28%, transparent);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--rar) 14%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #1a1428 0%, #14101e 100%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.40);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcc-card:hover:not(.is-soldout) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--rar) 35%, transparent);
}
.pcc-card.is-soldout { opacity: 0.55; filter: grayscale(0.35); }
.pcc-glow {
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rar) 18%, transparent) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.6;
}
.pcc-urgency {
  position: absolute;
  top: 10px; right: 10px;
  background: #ff6b6b;
  color: #1a1428;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  padding: 3px 7px;
  border-radius: 4px;
  z-index: 4;
  animation: pcc-blink 1.6s ease-in-out infinite;
}
@keyframes pcc-blink { 0%,100%{opacity:1} 50%{opacity:0.55} }
.pcc-sold-banner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: rgba(255,107,107,0.92);
  color: #1a1428;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 4px;
  padding: 8px 24px;
  border-radius: 6px;
  z-index: 5;
}
.pcc-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 2;
}
.pcc-rar-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.pcc-chest-icon {
  font-size: 30px;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rar) 50%, transparent));
}
.pcc-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 800;
  margin: 4px 0 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.pcc-desc {
  font-size: 11.5px;
  color: #a89db8;
  opacity: 0.85;
  line-height: 1.4;
}

/* Gold per day MEGAPILL */
.pcc-gold-pill {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid;
  background:
    radial-gradient(circle at 10% 50%, rgba(243,215,117,0.10), transparent 55%),
    linear-gradient(180deg, rgba(30,22,45,0.85), rgba(14,10,24,0.95));
  position: relative;
  z-index: 2;
}
.pcc-gold-pill i {
  font-size: 22px;
  color: #f3d775;
  filter: drop-shadow(0 0 8px rgba(243,215,117,0.45));
}
.pcc-gold-amount {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #fce8a8 0%, #ecc862 50%, #b88f2b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #ecc862;
}
.pcc-gold-suffix {
  font-size: 10px;
  font-weight: 700;
  color: #a89db8;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-left: auto;
}

/* Pet sprites preview */
.pcc-preview { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.pcc-preview-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #8a8294;
  text-transform: uppercase;
}
.pcc-preview-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.pcc-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--rar) 25%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(30,22,45,0.95), rgba(14,10,24,0.95));
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.pcc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.pcc-thumb i { font-size: 24px; }
.pcc-view-btn {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .18s ease, transform .12s ease;
}
.pcc-view-btn:hover { background: color-mix(in srgb, var(--rar) 12%, transparent); transform: translateY(-1px); }
.pcc-view-btn i { font-size: 13px; }

/* Stock */
.pcc-stock { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.pcc-stock-bar {
  height: 6px;
  background: rgba(0,0,0,0.55);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.pcc-stock-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.pcc-stock-lbl { font-size: 10.5px; color: #a89db8; text-align: right; }
.pcc-stock-lbl strong { color: #e9e1d0; font-weight: 800; }
.pcc-stock.is-low .pcc-stock-lbl strong { color: #ff8a4c; }
.pcc-stock.is-soldout .pcc-stock-lbl strong { color: #ff6b6b; }

/* Price + buy */
.pcc-price {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  font-size: 18px;
  font-weight: 900;
}
.pcc-buy-btn {
  position: relative; z-index: 2;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--rar) 50%, transparent);
  background:
    radial-gradient(circle at left center, color-mix(in srgb, var(--rar) 30%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--rar) 20%, transparent), color-mix(in srgb, var(--rar) 30%, transparent));
  color: #e9e1d0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.pcc-buy-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--rar) 35%, transparent);
  filter: none !important;
}
.pcc-buy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pcc-buy-btn i { font-size: 14px; }

/* ═════════════════════════════════════════════════════════════════════════
   PETS CHEST CONTENTS MODAL (pcm-*)
   Grid de todas las mascotas del cofre con stats completos
   ═════════════════════════════════════════════════════════════════════════ */
.pcm-modal {
  max-width: 900px !important;
  width: 92vw !important;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 24px !important;
  gap: 16px;
}
.pcm-header { text-align: center; }
.pcm-rar-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  margin-bottom: 8px;
}
.pcm-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  background: linear-gradient(180deg, #fce8a8 0%, #ecc862 50%, #b88f2b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #ecc862;
}
.pcm-sub {
  font-size: 12px;
  color: #a89db8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pcm-sub b { color: #e9e1d0; font-weight: 800; }
.pcm-sub-sep { opacity: 0.4; }
.pcm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding: 4px 2px;
}
.pcm-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 10px;
  border: 1px solid;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30,22,45,0.88) 0%, rgba(14,10,24,0.92) 100%);
  align-items: center;
}
.pcm-card-sprite {
  aspect-ratio: 1;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--rar) 30%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #1d1830 0%, #14101f 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--rar) 22%, transparent);
}
.pcm-card-sprite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
.pcm-card-sprite i { font-size: 38px; }
.pcm-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pcm-card-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
}
.pcm-card-flavor {
  font-size: 10.5px;
  font-style: italic;
  color: #a89db8;
  opacity: 0.85;
  line-height: 1.3;
}
.pcm-card-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 4px;
}
.pcm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 2px;
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
  border: 1px solid transparent;
}
.pcm-stat i { font-size: 13px; }
.pcm-stat b { font-size: 11.5px; font-weight: 800; color: #e9e1d0; line-height: 1; }
.pcm-stat span { font-size: 7.5px; color: #8a8294; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.pcm-stat.orange i { color: #ff8a4c; }
.pcm-stat.blue   i { color: #5cc4ff; }
.pcm-stat.red    i { color: #ff6b6b; }
.pcm-stat.green  i { color: #5cf28a; }
.pcm-stat.gold   i { color: #f3d775; }

/* ═════════════════════════════════════════════════════════════════════════
   2026-06-06 FASE 2 · Click en card → detail modal con stats + pasivas
   ═════════════════════════════════════════════════════════════════════════ */
.pcm-hint {
  text-align: center;
  font-size: 11px;
  color: #a89db8;
  font-style: italic;
  margin: 4px 0 10px;
  opacity: 0.8;
}
.pcm-card.is-clickable {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.pcm-card.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--rar, #fff) 24%, transparent);
}
.pcm-card-skills-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pcm-card-skills-hint i { font-size: 12px; }

/* ─── DETAIL MODAL · una especie ─────────────────────────────────────────── */
.psd-modal {
  max-width: 620px;
  width: min(94vw, 620px);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
.psd-hero {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 22px 22px 18px;
  background:
    radial-gradient(circle at 14% 100%, color-mix(in srgb, var(--rar) 35%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgba(28,18,46,0.92), rgba(14,10,22,0.96));
  border-bottom: 1px solid color-mix(in srgb, var(--rar) 30%, transparent);
}
.psd-hero-sprite {
  aspect-ratio: 1;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--rar) 38%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #1d1830, #14101f);
  border: 1px solid color-mix(in srgb, var(--rar) 35%, transparent);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.psd-hero-sprite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
}
.psd-hero-sprite i { font-size: 60px; }
.psd-hero-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.psd-rar-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.7px;
}
.psd-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
}
.psd-flavor {
  font-size: 11.5px;
  font-style: italic;
  color: #a89db8;
  opacity: 0.85;
}
.psd-desc {
  font-size: 12.5px;
  color: #cdc4dc;
  line-height: 1.4;
  opacity: 0.92;
}

.psd-section {
  padding: 14px 22px;
  overflow-y: auto;
}
.psd-section + .psd-section { border-top: 1px solid rgba(255,255,255,0.07); }
.psd-section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #f3d775;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.psd-section-sub {
  margin-left: 8px;
  font-size: 10px;
  color: #8a8294;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: none;
  opacity: 0.85;
}
.psd-stats-grid { display: flex; flex-direction: column; gap: 6px; }
/* 2026-06-09 v8: grid 3 columnas compacto para modal de detalle */
.psd-stats-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.psd-stat3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: linear-gradient(180deg, rgba(40,22,72,0.55) 0%, rgba(18,9,32,0.85) 100%);
  border: 1px solid rgba(184,132,255,0.22);
  border-radius: 10px;
  border-top: 2px solid currentColor;
  text-align: center;
}
.psd-stat3 > i {
  font-size: 22px;
  filter: drop-shadow(0 0 6px currentColor);
}
.psd-stat3-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #b0a4cc;
  text-transform: uppercase;
}
.psd-stat3-val {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 8px currentColor;
}
.psd-stat3.is-atk   { color: #ff6b6b; }
.psd-stat3.is-def   { color: #5ec8ff; }
.psd-stat3.is-hp    { color: #b884ff; }
.psd-stat3.is-crit  { color: #ffb347; }
.psd-stat3.is-dodge { color: #7ee787; }
.psd-stat3.is-gold  { color: #f3d775; }
.psd-stats-note {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: #8a7eac;
  font-style: italic;
}
@media (max-width: 540px) {
  .psd-stats-grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .psd-stat3 { padding: 10px 6px; }
  .psd-stat3 > i { font-size: 20px; }
  .psd-stat3-val { font-size: 18px; }
}
.psd-stat-row {
  display: grid;
  grid-template-columns: 24px 70px 1fr 16px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
  font-size: 12px;
}
.psd-stat-row > i { font-size: 16px; text-align: center; }
.psd-stat-lbl {
  font-size: 10px;
  font-weight: 800;
  color: #b0a6c0;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.psd-stat-base { color: #cdc4dc; font-size: 12px; }
.psd-stat-arrow { color: #6e6480; text-align: center; }
.psd-stat-max { font-weight: 700; font-size: 12px; }
.psd-stat-base b, .psd-stat-max b { color: #fff; }

.psd-skills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Modal mobile responsive */
@media (max-width: 560px) {
  .psd-hero { grid-template-columns: 100px 1fr; gap: 12px; padding: 16px 14px 14px; }
  .psd-hero-sprite i { font-size: 44px; }
  .psd-name { font-size: 18px; }
  .psd-section { padding: 12px 14px; }
  .psd-stat-row {
    grid-template-columns: 22px 60px 1fr 14px 1fr;
    gap: 6px;
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   PET REVEAL V2 — sprite real grande en lugar de icono
   ═════════════════════════════════════════════════════════════════════════ */
.pr-sprite-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 320px;
  display: grid;
  place-items: center;
  margin: 8px auto;
}
.pr-sprite-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rar) 45%, transparent) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  animation: pr-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes pr-glow-pulse { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
.pr-sprite-img {
  position: relative;
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.7));
  z-index: 2;
  animation: pr-reveal 0.6s ease-out;
}
@keyframes pr-reveal {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Mobile responsive */
@media (max-width: 720px) {
  .pcc-preview-row { grid-template-columns: repeat(5, 1fr); }
  .pcc-gold-amount { font-size: 20px; }
  .pcm-modal { padding: 16px !important; }
  .pcm-grid { grid-template-columns: 1fr; }
  .pcm-card { grid-template-columns: 70px 1fr; }
  .pcm-card-stats { grid-template-columns: repeat(5, 1fr); gap: 3px; }
}

/* ============================================================
   2026-06-04 · Top 20 Mascotas Activas (leaderboard global)
   ============================================================ */
.pets-lb-section {
  background: linear-gradient(180deg, rgba(20,8,12,0.55), rgba(12,4,8,0.75));
  border: 1px solid rgba(255,200,87,0.30);
  border-radius: 14px;
  padding: 16px;
}
.pets-lb-section.is-tab { margin-top: 0; }
.pets-lb-section .pk-stable-head { margin-bottom: 12px; }

/* Header de la tab dedicada */
.pets-lb-tab-head {
  text-align: center;
  padding: 12px 14px 18px;
  border-bottom: 1px solid rgba(255,200,87,0.20);
  margin-bottom: 16px;
}
.pets-lb-tab-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(180deg, #ffeac0, #ffd24a, #b8860b);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.pets-lb-tab-title i {
  font-size: 26px;
  color: #ffd24a;
  -webkit-text-fill-color: #ffd24a;
  filter: drop-shadow(0 0 10px rgba(255,210,74,0.5));
}
.pets-lb-tab-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  color: rgba(243,232,213,0.72);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .pets-lb-tab-title { font-size: 17px; gap: 7px; }
  .pets-lb-tab-title i { font-size: 20px; }
  .pets-lb-tab-sub { font-size: 13px; }
}
.pets-lb-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pets-lb-loading {
  text-align: center;
  padding: 30px;
  font-size: 28px;
  color: rgba(255,200,87,0.7);
}
.pets-lb-empty {
  text-align: center;
  padding: 20px;
  color: rgba(243,232,213,0.6);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

.pets-lb-row {
  display: grid;
  grid-template-columns: 48px 56px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--rar, #9aa0a6);
  border-radius: 10px;
  transition: background .15s ease, transform .12s ease;
}
.pets-lb-row:hover {
  background: rgba(0,0,0,0.50);
  transform: translateX(2px);
}
.pets-lb-row.is-mine {
  background: linear-gradient(90deg, rgba(255,200,87,0.10), rgba(0,0,0,0.42));
  border-color: rgba(255,200,87,0.50);
  border-left-color: var(--rar, #ffc857);
}

.pets-lb-rank {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 800;
  color: rgba(243,232,213,0.72);
  text-align: center;
  letter-spacing: 0.04em;
}
.pets-lb-rank.is-gold   { color: #ffd24a; text-shadow: 0 0 10px rgba(255,210,74,0.5); }
.pets-lb-rank.is-silver { color: #d8dde6; text-shadow: 0 0 8px rgba(216,221,230,0.4); }
.pets-lb-rank.is-bronze { color: #e0925f; text-shadow: 0 0 8px rgba(224,146,95,0.4); }

.pets-lb-sprite {
  width: 48px; height: 48px;
  border-radius: 10px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pets-lb-sprite-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pets-lb-sprite-icon { font-size: 26px; }

.pets-lb-info {
  min-width: 0;
}
.pets-lb-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #f3e8d5;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pets-lb-rar {
  font-size: 9px;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  flex-shrink: 0;
}
.pets-lb-owner {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(243,232,213,0.70);
  flex-wrap: wrap;
}
.pets-lb-owner i { font-size: 12px; color: #ffc857; }
.pets-lb-owner-lvl {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: rgba(255,200,87,0.85);
  padding: 1px 6px;
  background: rgba(255,200,87,0.10);
  border-radius: 999px;
  border: 1px solid rgba(255,200,87,0.25);
}
.pets-lb-mine-badge {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  background: linear-gradient(180deg, #ffd24a, #b8860b);
  color: #1a0a30;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
}

.pets-lb-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding: 4px 8px;
  background: rgba(255,200,87,0.08);
  border: 1px solid rgba(255,200,87,0.30);
  border-radius: 8px;
}
.pets-lb-level-lbl {
  font-family: 'Cinzel', serif;
  font-size: 8.5px;
  letter-spacing: 0.10em;
  color: rgba(255,200,87,0.75);
}
.pets-lb-level b {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #ffd24a;
  line-height: 1;
  margin-top: 1px;
}

.pets-lb-fed {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pets-lb-fed i { font-size: 14px; }
.pets-lb-fed.is-fed {
  background: rgba(95,214,132,0.16);
  border: 1px solid rgba(95,214,132,0.50);
  color: #87ecaa;
}
.pets-lb-fed.is-hungry {
  background: rgba(255,170,80,0.14);
  border: 1px solid rgba(255,170,80,0.45);
  color: #ffba6c;
}

/* Mobile: shrink el row, ocultar el label de NIVEL y el texto de fed */
@media (max-width: 720px) {
  .pets-lb-row {
    grid-template-columns: 32px 44px 1fr auto auto;
    gap: 8px;
    padding: 7px 9px;
  }
  .pets-lb-rank { font-size: 13px; }
  .pets-lb-sprite { width: 44px; height: 44px; }
  .pets-lb-sprite-icon { font-size: 22px; }
  .pets-lb-name { font-size: 13px; gap: 5px; }
  .pets-lb-rar { font-size: 8px; padding: 1px 4px; }
  .pets-lb-owner { font-size: 11px; }
  .pets-lb-owner-lvl { font-size: 10px; padding: 1px 5px; }
  .pets-lb-level { min-width: 38px; padding: 3px 5px; }
  .pets-lb-level b { font-size: 14px; }
  .pets-lb-level-lbl { display: none; }
  .pets-lb-fed { padding: 4px 7px; font-size: 10px; }
  .pets-lb-fed span { display: none; }
  .pets-lb-fed i { font-size: 16px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   2026-06-06 v3 · Tienda de cofres rediseñada
   Cards más limpias, jerarquía visual clara, thumbnails de mascotas
   prominentes con sprite real, gold pill simplificado.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Hero del shop más prolijo ───────────────────────────────────── */
.pets-shop-hero {
  border-radius: 16px;
  padding: 20px 24px;
  border-width: 1px;
}
.pets-shop-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  font-size: 38px;
}

/* ─── Grid de cofres: más ancho, mejor distribución ─── */
.pets-chest-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 6px;
}

/* ─── Card de cofre: rediseño profesional ─── */
.pcc-card {
  padding: 20px 18px 18px;
  gap: 14px;
  border-radius: 16px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--rar) 38%, transparent);
}
.pcc-card:hover:not(.is-soldout) {
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.55),
    0 0 0 1px color-mix(in srgb, var(--rar) 45%, transparent),
    0 0 32px color-mix(in srgb, var(--rar) 18%, transparent);
}
/* Glow más sutil */
.pcc-glow {
  top: -40%;
  height: 100%;
  background: radial-gradient(ellipse at center top, color-mix(in srgb, var(--rar) 24%, transparent) 0%, transparent 55%);
  opacity: 0.75;
}

/* Header: rarity badge a la izquierda, sin chest-icon flotando */
.pcc-header {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pcc-rar-badge {
  font-size: 10.5px;
  padding: 5px 12px;
  border-radius: 6px;
}
/* El chest-icon del header lo movemos a la zona del hero — mejor jerarquía */
.pcc-header .pcc-chest-icon {
  font-size: 38px;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rar) 60%, transparent));
}

/* Hero block: chest icon GRANDE centrado con bg circular */
.pcc-name {
  font-size: 21px;
  text-align: left;
  margin-top: 2px;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--rar) 75%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.pcc-desc {
  font-size: 12px;
  text-align: left;
  line-height: 1.45;
  min-height: 32px;
}

/* Gold pill: más prominente */
.pcc-gold-pill {
  padding: 12px 16px;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--rar) 45%, transparent);
  background:
    radial-gradient(circle at 0% 50%, rgba(243,215,117,0.18), transparent 60%),
    linear-gradient(180deg, rgba(40,28,60,0.75), rgba(18,12,28,0.90));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.pcc-gold-pill i {
  font-size: 26px;
}
.pcc-gold-amount {
  font-size: 28px;
}
.pcc-gold-suffix {
  font-size: 10.5px;
}

/* ─── Preview de mascotas: thumbs más grandes, mejor framing ─── */
.pcc-preview {
  gap: 10px;
  background: rgba(0,0,0,0.22);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}
.pcc-preview-lbl {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #cdc4dc;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcc-preview-lbl::before,
.pcc-preview-lbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.pcc-preview-row {
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
.pcc-thumb {
  border-radius: 10px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--rar) 32%, transparent);
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--rar) 30%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #251a40 0%, #15101e 100%);
  transition: transform 0.16s ease, border-color 0.16s ease;
  cursor: default;
}
.pcc-thumb:hover {
  transform: scale(1.06);
  border-color: color-mix(in srgb, var(--rar) 60%, transparent);
  z-index: 2;
}
.pcc-thumb img {
  object-position: center 25%;
}
.pcc-thumb i { font-size: 22px; opacity: 0.85; }

/* View button: más prolijo */
.pcc-view-btn {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}
.pcc-view-btn i { font-size: 14px; }

/* Stock más visible */
.pcc-stock { gap: 6px; padding-top: 4px; }
.pcc-stock-bar {
  height: 8px;
  border-radius: 5px;
}
.pcc-stock-fill { border-radius: 5px; }
.pcc-stock-lbl { font-size: 11px; }

/* Precio + botón: más balanceado */
.pcc-price {
  padding: 8px 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  justify-content: center;
  font-size: 20px;
}
.pcc-price i { font-size: 22px; color: #7af0ff; filter: drop-shadow(0 0 8px rgba(122,240,255,0.4)); }
.pcc-buy-btn {
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: 1.5px;
  background:
    radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--rar) 38%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--rar) 25%, transparent), color-mix(in srgb, var(--rar) 35%, transparent));
  border-width: 1.5px;
}
.pcc-buy-btn i { font-size: 16px; }

/* ─── Modal "Contenido del Cofre": cards más impactantes ─── */
.pcm-modal { padding: 22px 24px; }
.pcm-header { margin-bottom: 4px; }
.pcm-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
}
.pcm-rar-badge {
  padding: 4px 12px;
  font-size: 11px;
  letter-spacing: 1.6px;
}
.pcm-sub {
  font-size: 12.5px;
  margin-top: 6px;
}
.pcm-hint {
  font-size: 11.5px;
  color: #cdc4dc;
  margin: 10px 0 14px;
  padding: 8px 14px;
  background: rgba(245,208,103,0.08);
  border: 1px solid rgba(245,208,103,0.25);
  border-radius: 8px;
  text-align: center;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pcm-hint::before {
  content: '\1F446';
  font-size: 13px;
}
.pcm-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.pcm-card {
  padding: 12px;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  border-radius: 14px;
  border-width: 1px;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--rar) 16%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(34,22,52,0.85), rgba(14,10,22,0.92));
  align-items: stretch;
}
.pcm-card.is-clickable:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.5),
    0 0 0 1px color-mix(in srgb, var(--rar) 45%, transparent);
}
.pcm-card-sprite {
  border-radius: 12px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--rar) 35%, transparent);
}
.pcm-card-sprite img {
  object-position: center 20%;
}
.pcm-card-body { gap: 6px; }
.pcm-card-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  letter-spacing: 0.3px;
}
.pcm-card-flavor {
  font-size: 10.5px;
  line-height: 1.35;
}
.pcm-card-stats { gap: 5px; margin-top: 5px; }
.pcm-stat {
  padding: 5px 3px;
  border-radius: 7px;
  background: rgba(0,0,0,0.32);
}
.pcm-stat i { font-size: 14px; }
.pcm-stat b { font-size: 12px; }
.pcm-stat span { font-size: 8px; }
.pcm-card-skills-hint {
  margin-top: 6px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--rar) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rar) 36%, transparent);
  border-radius: 8px;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: none;
  font-weight: 700;
}
.pcm-card-skills-hint i { font-size: 13px; }

/* Mobile responsive */
@media (max-width: 720px) {
  .pets-shop-hero { padding: 14px 16px; gap: 12px; }
  .pets-shop-hero-icon { width: 56px; height: 56px; font-size: 28px; }
  .pets-shop-hero-title { font-size: 16px; letter-spacing: 1.4px; }
  .pets-chest-grid { grid-template-columns: 1fr; gap: 12px; }
  .pcc-card { padding: 16px 14px 14px; }
  .pcc-name { font-size: 18px; }
  .pcc-gold-amount { font-size: 22px; }
  .pcc-preview-row { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .pcm-modal { padding: 16px 14px !important; }
  .pcm-grid { grid-template-columns: 1fr; gap: 10px; }
  .pcm-card { grid-template-columns: 80px 1fr; gap: 10px; padding: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   2026-06-06 v3 · TIENDA DE COFRES (pcs-*) — rediseño completo
   Vista vertical de 3 secciones grandes con mascotas inline.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ──────────────────────────────────────────────────────────── */
.pcs-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid rgba(245,208,103,0.32);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(34,22,52,0.85), rgba(18,12,28,0.92));
  overflow: hidden;
  margin-bottom: 18px;
}
.pcs-hero-glow {
  position: absolute;
  inset: -50% -10% auto -10%;
  height: 200%;
  background: radial-gradient(ellipse at 50% 30%, rgba(245,208,103,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.pcs-hero-icon {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(245,208,103,0.30), rgba(245,208,103,0.05));
  border: 1px solid rgba(245,208,103,0.5);
  font-size: 44px;
  color: #f5d067;
  box-shadow: 0 6px 24px rgba(245,208,103,0.18);
  flex-shrink: 0;
}
.pcs-hero-info { position: relative; min-width: 0; }
.pcs-hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(180deg, #f5d067, #c79a3a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.pcs-hero-sub { font-size: 12.5px; color: #cdc4dc; opacity: 0.85; margin-bottom: 10px; }
.pcs-hero-stock {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.pcs-hero-stock-fill {
  height: 100%;
  background: linear-gradient(90deg, #5cf28a 0%, #f5d067 60%, #ff8a4c 100%);
  transition: width 0.5s ease;
}
.pcs-hero-stock-lbl {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  letter-spacing: 0.4px;
}
.pcs-hero-gems {
  position: relative;
  text-align: center;
  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(122,240,255,0.10), rgba(122,240,255,0.04));
  border: 1px solid rgba(122,240,255,0.35);
  border-radius: 14px;
  min-width: 130px;
}
.pcs-hero-gems > i {
  font-size: 32px;
  color: #7af0ff;
  filter: drop-shadow(0 0 12px rgba(122,240,255,0.5));
}
.pcs-hero-gems-val {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 900;
  color: #7af0ff;
  line-height: 1.1;
  margin-top: 4px;
}
.pcs-hero-gems-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #cdc4dc;
  letter-spacing: 1.5px;
  margin-top: 3px;
}

/* ─── SECCIÓN POR RAREZA ────────────────────────────────────────────── */
.pcs-tier {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--rar) 38%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--rar) 18%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, rgba(28,18,46,0.88), rgba(14,10,22,0.94));
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.pcs-tier.is-soldout { opacity: 0.62; filter: saturate(0.7); }

/* Header del cofre */
.pcs-tier-head {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--rar) 22%, transparent);
  background:
    radial-gradient(circle at 90% 50%, color-mix(in srgb, var(--rar) 12%, transparent) 0%, transparent 60%);
}
.pcs-tier-emblem {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 54px;
  color: color-mix(in srgb, var(--rar) 85%, white);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--rar) 28%, transparent) 0%, rgba(0,0,0,0.4) 75%);
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--rar) 45%, transparent));
  flex-shrink: 0;
}
.pcs-tier-meta { min-width: 0; }
.pcs-tier-rar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pcs-tier-rar {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.8px;
  color: #1a1428;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.pcs-tier-urgent {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #fff;
  background: linear-gradient(180deg, #ff6b6b, #d44545);
  padding: 3px 9px;
  border-radius: 5px;
  animation: pcs-urgent-pulse 1.6s ease-in-out infinite;
}
@keyframes pcs-urgent-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.pcs-tier-soldlbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
  padding: 3px 9px;
  border-radius: 5px;
}
.pcs-tier-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 900;
  margin: 0;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--rar) 75%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.pcs-tier-desc {
  font-size: 12.5px;
  color: #cdc4dc;
  line-height: 1.4;
  font-style: italic;
  margin: 6px 0 10px;
  opacity: 0.92;
}
.pcs-tier-facts {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #d4c4a8;
}
.pcs-tier-facts span { display: inline-flex; align-items: center; gap: 6px; }
.pcs-tier-facts i { font-size: 14px; color: color-mix(in srgb, var(--rar) 90%, white); }
.pcs-tier-facts b { color: #fff; font-weight: 800; }

/* Buy column */
.pcs-tier-buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 220px;
}
.pcs-tier-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(122,240,255,0.32);
  border-radius: 10px;
  font-size: 22px;
  font-weight: 900;
  color: #7af0ff;
}
.pcs-tier-price i { font-size: 22px; color: #7af0ff; filter: drop-shadow(0 0 8px rgba(122,240,255,0.4)); }
.pcs-tier-price.is-broke { color: #ff6b6b; border-color: rgba(255,107,107,0.32); }
.pcs-tier-price.is-broke i { color: #ff6b6b; filter: none; }
.pcs-tier-stockbar {
  height: 8px;
  background: rgba(0,0,0,0.45);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.pcs-tier-stockfill { height: 100%; border-radius: 5px; transition: width 0.4s; }
.pcs-tier-stocklbl {
  font-size: 11.5px;
  color: #cdc4dc;
  text-align: center;
}
.pcs-tier-stocklbl b { color: #f5d067; font-weight: 800; }
.pcs-tier-btn {
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff;
  border: 1.5px solid color-mix(in srgb, var(--rar) 55%, transparent);
  background:
    radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--rar) 40%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--rar) 28%, transparent), color-mix(in srgb, var(--rar) 38%, transparent));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.12s, box-shadow 0.18s, filter 0.18s;
}
.pcs-tier-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--rar) 40%, transparent);
}
.pcs-tier-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pcs-tier-btn i { font-size: 18px; }

/* Pets label */
.pcs-tier-petslbl {
  padding: 14px 26px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pcs-tier-petslbl span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: color-mix(in srgb, var(--rar) 90%, white);
}
.pcs-tier-petslbl small {
  font-size: 10.5px;
  color: #a89db8;
  font-style: italic;
  font-weight: 600;
}

/* Pets grid */
.pcs-tier-pets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  padding: 8px 22px 22px;
}

/* Pet tile */
.pcs-pet {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--rar) 28%, transparent);
  background: linear-gradient(180deg, rgba(34,22,52,0.65), rgba(14,10,22,0.85));
  cursor: pointer;
  transition: transform 0.14s, border-color 0.18s, box-shadow 0.18s;
  align-items: start;
}
.pcs-pet:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rar) 55%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 22px color-mix(in srgb, var(--rar) 18%, transparent);
}
.pcs-pet-portrait {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--rar) 30%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #251a40 0%, #15101e 100%);
  border: 1px solid color-mix(in srgb, var(--rar) 38%, transparent);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pcs-pet-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
.pcs-pet-portrait i { font-size: 38px; }
.pcs-pet-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pcs-pet-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16.5px;
  font-weight: 900;
  color: color-mix(in srgb, var(--rar) 85%, white);
  line-height: 1.15;
}
.pcs-pet-flavor {
  font-size: 10.5px;
  font-style: italic;
  color: #a89db8;
  opacity: 0.85;
  line-height: 1.3;
}
.pcs-pet-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 4px;
}
.pcs-pet-stats > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 2px;
  border-radius: 7px;
  background: rgba(0,0,0,0.32);
}
.pcs-pet-stats i { font-size: 12px; }
.pcs-pet-stats b { font-size: 11px; color: #fff; font-weight: 800; line-height: 1; }
.pcs-pet-stats small { font-size: 7.5px; color: #8a8294; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }

/* Skills inline en pet tile */
.pcs-pet-skills {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.pcs-pet-skill {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
}
.pcs-pet-skill-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid rgba(245,208,103,0.32);
  background:
    radial-gradient(circle at 50% 50%, rgba(245,208,103,0.18), rgba(0,0,0,0.5) 80%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pcs-pet-skill-icon img { width: 100%; height: 100%; object-fit: cover; }
.pcs-pet-skill-icon i { font-size: 14px; color: #f5d067; }
.pcs-pet-skill-info { min-width: 0; }
.pcs-pet-skill-name {
  font-size: 11.5px;
  font-weight: 800;
  color: #f5d067;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcs-pet-skill-eff {
  font-size: 10px;
  font-weight: 700;
  color: #d4c4a8;
  line-height: 1.2;
}
.pcs-pet-skill-unlock {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  background: rgba(167,139,250,0.20);
  border: 1px solid rgba(167,139,250,0.40);
  border-radius: 3px;
  color: #c0a8ff;
  margin-left: 4px;
}

/* Mobile responsive */
@media (max-width: 800px) {
  .pcs-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px;
    text-align: center;
  }
  .pcs-hero-icon { margin: 0 auto; width: 64px; height: 64px; font-size: 30px; }
  .pcs-hero-title { font-size: 22px; }
  .pcs-tier-head {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px;
    text-align: center;
  }
  .pcs-tier-emblem { margin: 0 auto; width: 80px; height: 80px; font-size: 44px; }
  .pcs-tier-facts { justify-content: center; gap: 12px; }
  .pcs-tier-buy { min-width: 0; }
  .pcs-tier-petslbl { padding: 12px 18px 6px; flex-direction: column; gap: 4px; align-items: flex-start; }
  .pcs-tier-pets { padding: 6px 14px 18px; grid-template-columns: 1fr; gap: 10px; }
  .pcs-pet { grid-template-columns: 90px 1fr; gap: 10px; padding: 10px; }
  .pcs-pet-portrait { width: 90px; height: 90px; }
  .pcs-pet-name { font-size: 15px; }
}


/* ═══════════════════════════════════════════════════════════════
   2026-06-08 v4 — Chest shop redesign (horizontal row layout)
   Matches Obsidian Codex mockup: hero + 1 row per chest with
   4 cols (chest img · info · pets carousel · buy column).
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.pcs2-hero {
  position: relative;
  display: grid;
  /* Cofre HEAD a la derecha más prominente, info en el medio con ancho controlado */
  grid-template-columns: 84px minmax(0, 1fr) 220px 128px;
  align-items: center;
  gap: 22px;
  padding: 14px 24px;
  margin: 8px 0 18px;
  min-height: 130px;
  /* Imagen fondocard del user + overlay sutil para legibilidad del texto */
  background:
    linear-gradient(135deg, rgba(15,10,35,0.4) 0%, rgba(22,14,52,0.3) 50%, rgba(28,18,62,0.35) 100%),
    url('../img/pets/fondocard.webp') center/cover no-repeat;
  border: 1px solid rgba(212,165,80,0.4);
  border-radius: 14px;
  box-shadow:
    inset 0 0 60px rgba(212,165,80,0.04),
    inset 0 1px 0 rgba(255,210,140,0.12),
    0 10px 28px rgba(0,0,0,0.55);
  overflow: visible;  /* permite que el cofre sobresalga */
}
.pcs2-hero::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 14px;
  /* Tinte violeta sutil + vignette para reforzar el efecto del mockup */
  background:
    radial-gradient(ellipse at 75% 50%, rgba(184,132,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 0% 50%, rgba(15,10,35,0.45) 0%, transparent 50%);
  pointer-events: none;
}
.pcs2-hero-icon-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pcs2-hero-icon {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(212,165,80,0.28), rgba(160,110,40,0.08));
  border: 2px solid rgba(212,165,80,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  color: #d4a558;
  box-shadow: 0 0 22px rgba(212,165,80,0.32), inset 0 0 18px rgba(212,165,80,0.18);
  position: relative;
}
.pcs2-hero-icon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(212,165,80,0.35);
  opacity: 0.7;
}
.pcs2-hero-info { position: relative; min-width: 0; }
.pcs2-hero-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #d4a558;
  text-shadow: 0 0 16px rgba(212,165,80,0.45), 0 2px 0 rgba(0,0,0,0.4);
  margin-bottom: 3px;
  line-height: 1.1;
}
.pcs2-hero-sub { font-size: 12.5px; color: #c5b9d8; opacity: 0.88; margin-bottom: 10px; }
.pcs2-hero-stockbar-wrap {
  position: relative;
  /* Acotamos el ancho de la barra para que no se estire de borde a borde */
  max-width: 600px;
}
.pcs2-hero-stockbar {
  position: relative;
  height: 16px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(184,132,255,0.25);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.pcs2-hero-stockfill {
  height: 100%;
  background: linear-gradient(90deg, #6fdc8c 0%, #f5c542 55%, #ff5757 100%);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(255,200,80,0.35);
}
/* Número de stock overlay centrado DENTRO de la barra */
.pcs2-hero-stocknum {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.6);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}
.pcs2-hero-stockcap {
  text-align: center;
  font-size: 10.5px;
  color: #9d8ec0;
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.pcs2-hero-art-wrap {
  position: relative;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 130px;
  overflow: visible;
}
.pcs2-hero-art {
  position: absolute;
  /* Cofre AGRANDADO + bleed agresivo arriba/abajo para efecto "saliendo del card" */
  top: -70px;
  bottom: -70px;
  right: -20px;        /* también sobresale por la derecha levemente */
  height: calc(100% + 140px);
  width: auto;
  max-width: 360px;
  object-fit: contain;
  /* Sombra ovalada bajo el cofre para anclarlo + glow violeta sutil */
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,0.75))
    drop-shadow(0 0 24px rgba(184,132,255,0.35));
  z-index: 3;
  pointer-events: none;
  transform: translateZ(0);
}
.pcs2-hero-gems {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(184,132,255,0.14), rgba(15,8,30,0.6));
  border: 1.5px solid rgba(184,132,255,0.45);
  border-radius: 12px;
  z-index: 1;
}
.pcs2-hero-gems > i {
  font-size: 24px;
  color: #ff4ea8;
  text-shadow: 0 0 14px rgba(255,78,168,0.65);
  margin-bottom: 2px;
}
.pcs2-hero-gems-val {
  font-family: 'Cinzel', serif;
  font-size: 22px; font-weight: 800;
  color: #f3e9ff;
  letter-spacing: 0.02em;
  line-height: 1;
}
.pcs2-hero-gems-lbl { font-size: 10px; color: #9d8ec0; letter-spacing: 0.04em; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   ── ROWS v5 — 2026-06-08: rediseño completo, mobile-first
   Layout: header (chest|info|buy) + pets grid debajo
   ═══════════════════════════════════════════════════════════════ */
.pcs2-rows { display: flex; flex-direction: column; gap: 18px; }
.pcs2-row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rar) 8%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgba(36,18,68,0.85) 0%, rgba(18,9,34,0.95) 100%);
  border: 1px solid color-mix(in srgb, var(--rar) 38%, rgba(184,132,255,0.2));
  border-radius: 18px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.pcs2-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--rar) 70%, transparent) 50%,
    transparent 100%);
  opacity: 0.7;
}
.pcs2-row:hover {
  border-color: color-mix(in srgb, var(--rar) 65%, transparent);
  box-shadow:
    0 16px 38px rgba(0,0,0,0.55),
    0 0 24px color-mix(in srgb, var(--rar) 18%, transparent);
}
.pcs2-row.is-soldout { opacity: 0.55; filter: saturate(0.7); }

/* ── Row HEAD: chest | info | buy ── */
.pcs2-row-head {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 220px;
  gap: 20px;
  align-items: center;
}

/* ── Chest image ── */
.pcs2-chest {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pcs2-chest-img {
  position: relative;
  width: 100%; max-width: 200px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.8))
          drop-shadow(0 0 28px color-mix(in srgb, var(--rar) 22%, transparent));
  z-index: 1;
}
.pcs2-chest-fb {
  position: absolute;
  font-size: 100px;
  color: color-mix(in srgb, var(--rar) 75%, #f8d670);
  text-shadow: 0 0 28px color-mix(in srgb, var(--rar) 65%, transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

/* ── Info column ── */
.pcs2-info {
  display: flex; flex-direction: column;
  min-width: 0;
  justify-content: center;
  gap: 8px;
}
.pcs2-info-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pcs2-rar {
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.12em;
  color: #cdc4dc;
  background: rgba(184,132,255,0.12);
  border: 1px solid rgba(184,132,255,0.3);
}
.pcs2-rar.is-common {
  color: #cdc4dc;
  background: rgba(120,110,150,0.15);
  border-color: rgba(160,150,200,0.4);
}
.pcs2-rar.is-epic {
  color: #e5c5ff;
  background: linear-gradient(135deg, rgba(184,132,255,0.22), rgba(140,80,200,0.12));
  border-color: rgba(184,132,255,0.55);
  text-shadow: 0 0 6px rgba(184,132,255,0.5);
}
.pcs2-rar.is-legendary {
  color: #f8d670;
  background: linear-gradient(135deg, rgba(255,200,80,0.18), rgba(255,140,60,0.08));
  border-color: rgba(255,200,80,0.55);
  text-shadow: 0 0 6px rgba(255,200,80,0.5);
}
.pcs2-urgent {
  padding: 3px 8px;
  background: linear-gradient(135deg, #ff5757, #d63030);
  color: #fff;
  border-radius: 6px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em;
  animation: pcs2-pulse 1.6s ease-in-out infinite;
}
.pcs2-sold {
  padding: 3px 10px;
  background: rgba(255,87,87,0.15);
  border: 1px solid rgba(255,87,87,0.5);
  color: #ff8a8a;
  border-radius: 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em;
}
@keyframes pcs2-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,87,87,0.5); }
  50% { box-shadow: 0 0 14px rgba(255,87,87,0.9); }
}
.pcs2-info-title {
  font-family: 'Cinzel', serif;
  font-size: 26px; font-weight: 800;
  color: #f0d28c;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(240,210,140,0.4), 0 2px 0 rgba(0,0,0,0.5);
  line-height: 1.15;
}
.pcs2-info-desc {
  font-size: 13px; font-style: italic;
  color: #b0a4cc;
  line-height: 1.4;
}
.pcs2-info-facts {
  display: flex; flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #d4c8e8;
}
.pcs2-info-facts span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(184,132,255,0.08);
  border: 1px solid rgba(184,132,255,0.2);
  border-radius: 8px;
}
.pcs2-info-facts i { font-size: 14px; color: #b884ff; }
.pcs2-info-facts span:nth-child(2) i { color: #d4a558; }
.pcs2-info-facts span:nth-child(3) i { color: #f3d775; }
.pcs2-info-facts b { color: #fff; font-weight: 800; font-size: 13.5px; }
/* Deprecado: ya no se renderiza */
.pcs2-info-view { display: none; }

/* Deprecados (carousel viejo) */
.pcs2-pets-wrap,
.pcs2-pets-lbl,
.pcs2-pets-arrow,
.pcs2-pets-dots,
.pcs2-pet-portrait { display: none; }
.pcs2-pets-track { display: none; }

/* ═══════════════════════════════════════════════════════════════
   PETS SECTION — separador + grid responsive
   ═══════════════════════════════════════════════════════════════ */
.pcs2-pets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pcs2-pets-label {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #9d8ec0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pcs2-pets-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--rar) 45%, rgba(184,132,255,0.2)) 50%,
    transparent 100%);
}
.pcs2-pets-lbl-txt {
  padding: 0 4px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--rar) 30%, transparent);
}
.pcs2-pets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   PET CARD — izq (imagen+nombre+stats) | der (skill cards)
   ═══════════════════════════════════════════════════════════════ */
.pcs2-pet {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(48,26,82,0.55) 0%, rgba(20,10,38,0.92) 100%);
  border: 1px solid color-mix(in srgb, var(--rar) 35%, rgba(184,132,255,0.22));
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  align-items: stretch;
}
.pcs2-pet:hover {
  border-color: color-mix(in srgb, var(--rar) 80%, transparent);
  transform: translateY(-3px);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.45),
    0 0 22px color-mix(in srgb, var(--rar) 28%, transparent);
}

/* ── COL IZQ: imagen + nombre + stats ── */
.pcs2-pet-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}
.pcs2-pet-img {
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--rar) 35%, transparent) 0%,
    rgba(0,0,0,0.7) 80%);
  border: 1px solid color-mix(in srgb, var(--rar) 25%, rgba(184,132,255,0.15));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.pcs2-pet-img img { width: 100%; height: 100%; object-fit: contain; }
.pcs2-pet-img > i { font-size: 54px; color: var(--rar); }

.pcs2-pet-name {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 800;
  color: color-mix(in srgb, var(--rar) 55%, #fff);
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--rar) 40%, transparent), 0 1px 0 rgba(0,0,0,0.6);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats compactos: solo iconos + número en grid 5 columnas */
.pcs2-pet-stats-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  font-family: 'Inter', sans-serif;
}
.pcs2-pet-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  border-top: 2px solid currentColor;
}
.pcs2-pet-stat i {
  font-size: 14px;
  filter: drop-shadow(0 0 4px currentColor);
}
.pcs2-pet-stat b {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.pcs2-pet-stat.is-atk { color: #ff6b6b; }
.pcs2-pet-stat.is-def { color: #5ec8ff; }
.pcs2-pet-stat.is-hp  { color: #b884ff; }
.pcs2-pet-stat.is-crit { color: #ffb347; }
.pcs2-pet-stat.is-dodge { color: #7ee787; }

/* ── COL DER: skill cards horizontales ── */
.pcs2-pet-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pcs2-pet-skills-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--rar) 45%, #d4c8e8);
  text-align: left;
  padding-left: 4px;
}
.pcs2-pet-skills-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pcs2-pet-skill {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rar) 18%, rgba(0,0,0,0.4)) 0%,
    rgba(0,0,0,0.35) 100%);
  border: 1px solid color-mix(in srgb, var(--rar) 30%, rgba(184,132,255,0.2));
  border-radius: 8px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pcs2-pet-skill:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--rar) 70%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rar) 25%, transparent);
}
.pcs2-pet-skill-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rar) 30%, rgba(40,20,72,0.6)) 0%,
    rgba(15,8,28,0.92) 100%);
  border: 1px solid color-mix(in srgb, var(--rar) 45%, rgba(184,132,255,0.35));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.pcs2-pet-skill-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pcs2-pet-skill-icon > i {
  font-size: 22px;
  color: color-mix(in srgb, var(--rar) 70%, #d4c8e8);
}
.pcs2-pet-skill-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pcs2-pet-skill-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 800;
  color: color-mix(in srgb, var(--rar) 55%, #fff);
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px color-mix(in srgb, var(--rar) 30%, transparent), 0 1px 0 rgba(0,0,0,0.5);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcs2-pet-skill-desc {
  font-size: 11px;
  color: #b0a4cc;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcs2-pet-skills-empty {
  font-size: 11px;
  color: #7a6e9c;
  text-align: center;
  padding: 16px 8px;
  font-style: italic;
}

/* ── COL 4: buy (rediseñado — cohesivo, vibrante) ── */
.pcs2-buy {
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 10px;
  background: linear-gradient(180deg, rgba(45,22,72,0.55) 0%, rgba(20,10,38,0.85) 100%);
  border: 1px solid rgba(184,132,255,0.32);
  border-radius: 12px;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.pcs2-buy-price {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(80,30,90,0.45) 0%, rgba(30,12,45,0.85) 100%);
  border: 1.5px solid rgba(255,120,200,0.5);
  border-radius: 9px;
  font-family: 'Cinzel', serif;
  box-shadow: 0 0 18px rgba(255,78,168,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pcs2-buy-price > i {
  font-size: 22px;
  color: #ff8fc8;
  text-shadow: 0 0 16px rgba(255,78,168,0.9), 0 0 4px rgba(255,78,168,1);
}
.pcs2-buy-price > b {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px rgba(255,120,200,0.65), 0 2px 0 rgba(0,0,0,0.5);
  line-height: 1;
}
.pcs2-buy-price.is-broke {
  border-color: rgba(255,87,87,0.55);
  box-shadow: 0 0 16px rgba(255,87,87,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pcs2-buy-price.is-broke > b,
.pcs2-buy-price.is-broke > i {
  color: #ff8585;
  text-shadow: 0 0 14px rgba(255,87,87,0.6);
}
/* Stock bar + label — unidad visual compacta */
.pcs2-buy-stockwrap {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}
.pcs2-buy-stockbar {
  height: 6px;
  background: rgba(0,0,0,0.65);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(184,132,255,0.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.pcs2-buy-stockfill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
  background: linear-gradient(90deg, #9d6eff 0%, #d4a8ff 50%, #9d6eff 100%);
  box-shadow: 0 0 10px rgba(184,132,255,0.6);
}
.pcs2-buy-stocklbl {
  text-align: center;
  font-size: 11.5px; color: #cdc4dc;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.pcs2-buy-stocklbl b {
  color: #fff;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(184,132,255,0.5);
}
.pcs2-buy-btn {
  position: relative;
  padding: 12px 14px;
  background: linear-gradient(180deg, #8c50d2 0%, #5a268f 50%, #3d1665 100%);
  border: 1.5px solid rgba(212,168,255,0.8);
  border-radius: 10px;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 18px rgba(140,80,210,0.45), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 6px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-transform: uppercase;
  overflow: hidden;
}
.pcs2-buy-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.6s;
  pointer-events: none;
}
.pcs2-buy-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(184,132,255,0.55), inset 0 1px 0 rgba(255,255,255,0.28);
  filter: brightness(1.12);
  border-color: #e8c9ff;
}
.pcs2-buy-btn:hover:not(:disabled)::before { left: 100%; }
.pcs2-buy-btn:disabled,
.pcs2-buy-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: linear-gradient(180deg, rgba(70,55,100,0.6) 0%, rgba(40,25,75,0.8) 100%);
  border-color: rgba(184,132,255,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.pcs2-buy-btn-main {
  font-size: 14px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pcs2-buy-btn-sub {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  opacity: 0.85;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #e8d8ff;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — tablet → mobile
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: cofre + info en row, buy abajo full-width */
@media (max-width: 1100px) {
  .pcs2-row-head {
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-areas:
      "chest info"
      "buy buy";
    gap: 16px;
  }
  .pcs2-row-head > .pcs2-chest { grid-area: chest; }
  .pcs2-row-head > .pcs2-info { grid-area: info; }
  .pcs2-row-head > .pcs2-buy { grid-area: buy; }
  .pcs2-buy {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .pcs2-buy-price { flex: 1 1 140px; padding: 10px 14px; }
  .pcs2-buy-stock { flex: 2 1 200px; display: flex; flex-direction: column; gap: 4px; }
  .pcs2-buy-btn { flex: 1 1 160px; }
  .pcs2-chest-img { max-width: 150px; }
}

/* Mobile */
@media (max-width: 720px) {
  /* Hero compacto sin chest art */
  .pcs2-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas: "icon" "info" "gems" !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .pcs2-hero-icon-wrap { grid-area: icon; justify-self: center; }
  .pcs2-hero-info { grid-area: info; }
  .pcs2-hero-art-wrap, .pcs2-hero-art { display: none !important; }
  .pcs2-hero-gems {
    grid-area: gems;
    flex-direction: row !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    justify-content: center;
    align-items: center;
  }
  .pcs2-hero-gems > i { font-size: 22px; margin: 0; }
  .pcs2-hero-gems-val { font-size: 20px; }
  .pcs2-hero-gems-lbl { font-size: 11px; }
  .pcs2-hero-title { font-size: 16px; }
  .pcs2-hero-sub { font-size: 11px; }
  .pcs2-hero-stockbar { height: 14px; }
  .pcs2-hero-stocknum { font-size: 10px; }
  .pcs2-hero-stockcap { font-size: 10px; }

  /* Row mobile: stack vertical */
  .pcs2-row {
    padding: 14px;
    gap: 14px;
    border-radius: 14px;
  }
  .pcs2-row-head {
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-areas:
      "chest info"
      "buy buy";
    gap: 12px;
  }
  .pcs2-chest-img { max-width: 110px; }
  .pcs2-info-title { font-size: 18px; }
  .pcs2-info-desc { font-size: 12px; }
  .pcs2-info-facts {
    font-size: 11.5px;
    gap: 6px;
  }
  .pcs2-info-facts span { padding: 3px 8px; }
  .pcs2-info-facts i { font-size: 12px; }
  .pcs2-info-facts b { font-size: 12px; }

  /* Buy stacked en mobile — RESET flex del media tablet para que no crezcan vertical */
  .pcs2-buy {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 8px;
  }
  .pcs2-buy-price {
    flex: 0 0 auto;
    padding: 10px 12px;
  }
  .pcs2-buy-stock {
    flex: 0 0 auto;
  }
  .pcs2-buy-btn {
    flex: 0 0 auto;
    padding: 12px 14px;
  }
  .pcs2-buy-price > i { font-size: 20px; }
  .pcs2-buy-price > b { font-size: 22px; }
  .pcs2-buy-btn-main { font-size: 13px; }

  /* Pets grid: 1 columna en mobile */
  .pcs2-pets-grid {
    grid-template-columns: 1fr;
  }
  /* Pet card: stack vertical en mobile (imagen+stats arriba, skills abajo) */
  .pcs2-pet {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
  .pcs2-pet-left {
    flex-direction: row;
    gap: 12px;
    align-items: center;
  }
  .pcs2-pet-img {
    width: 110px; height: 110px;
    flex-shrink: 0;
    aspect-ratio: 1;
  }
  .pcs2-pet-left > .pcs2-pet-name,
  .pcs2-pet-left > .pcs2-pet-stats-list {
    flex: 1;
    min-width: 0;
  }
  .pcs2-pet-left {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-areas: "img name" "img stats";
    gap: 8px 12px;
    align-items: center;
  }
  .pcs2-pet-img { grid-area: img; }
  .pcs2-pet-name { grid-area: name; text-align: left; align-self: end; }
  .pcs2-pet-stats-list { grid-area: stats; align-self: start; }
  .pcs2-pet-skill-icon { width: 38px; height: 38px; }
  .pcs2-pet-skill-icon > i { font-size: 18px; }
  .pcs2-pet-skill { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 6px 8px; }
  .pcs2-pet-skill-name { font-size: 12.5px; }
  .pcs2-pet-skill-desc { font-size: 10.5px; }
}

/* Mobile chico: imagen arriba centrada, todo apilado */
@media (max-width: 480px) {
  .pcs2-pet-left {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "name" "stats";
    justify-items: center;
  }
  .pcs2-pet-img { max-width: 140px; width: 100%; height: auto; }
  .pcs2-pet-name { text-align: center; }
  .pcs2-pet-stats-list { width: 100%; }
}

/* Mobile chico — ajustes finales */
@media (max-width: 420px) {
  .pcs2-row-head {
    grid-template-columns: 1fr;
    grid-template-areas: "chest" "info" "buy";
  }
  .pcs2-chest { justify-self: center; }
  .pcs2-chest-img { max-width: 130px; }
  .pcs2-info { text-align: center; }
  .pcs2-info-tags { justify-content: center; }
  .pcs2-info-facts { justify-content: center; }
}

/* ===================================================================
   EXPEDICIÓN — v2 cinematográfico (Obsidian Codex)
   2026-06-23
   =================================================================== */

.exp-wrap { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 22px; position: relative; }

/* 2026-06-23: rediseño del hero — imagen de tienda como fondo + mejor distribución */
.exp-hero {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(240, 192, 96, 0.55);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.6), 0 0 36px rgba(168, 140, 255, 0.22);
  min-height: 200px; isolation: isolate;
}
.exp-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/assets/pets/card_bg_creatures.webp?v=3');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
/* Tinte ligero violeta/dorado para legibilidad — deja la imagen visible */
.exp-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(168, 140, 255, 0.20), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(240, 192, 96, 0.15), transparent 65%);
}
/* Oscurecido sutil bottom para legibilidad del texto */
.exp-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(10, 6, 22, 0.55) 100%);
}
/* Corner accents (Obsidian Codex style) */
.exp-hero::before, .exp-hero::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border: 1.5px solid rgba(240, 192, 96, 0.6);
  z-index: 2; pointer-events: none;
}
.exp-hero::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.exp-hero::after  { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.exp-hero-content {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 26px; align-items: center; padding: 26px 32px;
}
.exp-hero-icon {
  position: relative;
  width: 78px; height: 78px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 192, 96, 0.45), rgba(240, 192, 96, 0.08) 70%);
  border: 2px solid rgba(240, 192, 96, 0.7);
  box-shadow: 0 0 32px rgba(240, 192, 96, 0.55), inset 0 0 24px rgba(240, 192, 96, 0.3);
}
/* Decorative rotating ring around the hero icon */
.exp-hero-icon::before {
  content: ''; position: absolute; inset: -8px;
  border: 1px dashed rgba(240, 192, 96, 0.35); border-radius: 50%;
  animation: exp-spin-slow 22s linear infinite;
}
.exp-hero-icon::after {
  content: ''; position: absolute; inset: -14px;
  border-top: 1px solid rgba(168, 140, 255, 0.5);
  border-bottom: 1px solid rgba(168, 140, 255, 0.5);
  border-left: 1px solid transparent; border-right: 1px solid transparent;
  border-radius: 50%; animation: exp-spin-slow 32s linear infinite reverse;
}
.exp-hero-icon i { font-size: 38px; color: #f5d067; animation: exp-spin-slow 28s linear infinite; position: relative; z-index: 1; filter: drop-shadow(0 2px 8px rgba(240,192,96,0.5)); }
@keyframes exp-spin-slow { to { transform: rotate(360deg); } }

.exp-hero-text { min-width: 0; }
.exp-hero-title {
  font-size: 1.85em; font-weight: 800; letter-spacing: 0.24em;
  background: linear-gradient(135deg, #fff4c8 0%, #f5d067 40%, #f0c060 70%, #d4a040 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 24px rgba(240, 192, 96, 0.4); line-height: 1.05;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.exp-hero-sub {
  font-size: 0.92em; color: #e4dcf0; margin-top: 8px;
  letter-spacing: 0.05em; font-style: italic;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
/* Divider between content and stats */
.exp-hero-stats {
  display: flex; gap: 12px; align-items: center;
  position: relative; padding-left: 26px;
}
.exp-hero-stats::before {
  content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(240, 192, 96, 0.55) 30%, rgba(240, 192, 96, 0.55) 70%, transparent);
}
.exp-hero-stat {
  text-align: center; padding: 12px 18px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 14, 38, 0.82), rgba(10, 6, 22, 0.82));
  border: 1px solid rgba(168, 140, 255, 0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  min-width: 72px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.exp-hero-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 192, 96, 0.55);
  box-shadow: 0 8px 22px rgba(240, 192, 96, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.exp-hero-stat-num { font-size: 1.8em; font-weight: 800; color: #f5d067; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 14px rgba(240, 192, 96, 0.5); }
.exp-hero-stat-lbl { font-size: 0.66em; color: #c5bcdc; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 6px; font-weight: 700; }

/* RULES — chips individuales */
.exp-rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(28, 22, 46, 0.55), rgba(20, 14, 38, 0.55));
  border: 1px solid rgba(168, 140, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.exp-rule {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8em; color: #e4dcf0; font-weight: 500;
  padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(34, 26, 54, 0.7), rgba(24, 18, 44, 0.7));
  border: 1px solid rgba(168, 140, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.exp-rule:hover {
  transform: translateY(-1px);
  border-color: rgba(168, 140, 255, 0.45);
  background: linear-gradient(135deg, rgba(38, 28, 64, 0.9), rgba(28, 20, 50, 0.9));
}
.exp-rule i {
  font-size: 1.35em; color: #a88cff;
  background: rgba(168, 140, 255, 0.12);
  border-radius: 6px; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid rgba(168, 140, 255, 0.2);
  flex-shrink: 0;
}
.exp-rule:nth-child(1) i { color: #f5d067; background: rgba(240, 192, 96, 0.14); border-color: rgba(240, 192, 96, 0.28); }
.exp-rule:nth-child(2) i { color: #7af0ff; background: rgba(122, 240, 255, 0.13); border-color: rgba(122, 240, 255, 0.25); }
.exp-rule:nth-child(3) i { color: #ff8a4c; background: rgba(255, 138, 76, 0.14); border-color: rgba(255, 138, 76, 0.28); }
.exp-rule:nth-child(4) i { color: #a88cff; }
.exp-rule:nth-child(5) i { color: #7af07a; background: rgba(122, 240, 122, 0.13); border-color: rgba(122, 240, 122, 0.25); }

.exp-section { display: flex; flex-direction: column; gap: 12px; }
.exp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px; border-bottom: 1px solid rgba(240, 192, 96, 0.18);
}
.exp-section-title {
  font-size: 0.95em; color: #f0c060;
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.exp-section-title i { color: #f0c060; font-size: 1.2em; }
.exp-section-count {
  background: rgba(240, 192, 96, 0.15); color: #f5d067;
  font-size: 0.75em; padding: 2px 10px; border-radius: 10px;
  border: 1px solid rgba(240, 192, 96, 0.3);
  font-weight: 600; letter-spacing: 0.05em;
}
.exp-ready-badge {
  display: flex; align-items: center; gap: 6px;
  background: rgba(122, 240, 122, 0.12); color: #7af07a;
  font-size: 0.78em; padding: 4px 12px; border-radius: 14px;
  border: 1px solid rgba(122, 240, 122, 0.35);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  animation: exp-blink 2s ease-in-out infinite;
}
@keyframes exp-blink {
  0%, 100% { box-shadow: 0 0 0 rgba(122, 240, 122, 0); }
  50%      { box-shadow: 0 0 18px rgba(122, 240, 122, 0.5); }
}

.exp-active-list { display: flex; flex-direction: column; gap: 12px; }
.exp-active-card {
  position: relative;
  display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center;
  background: linear-gradient(135deg, rgba(24, 18, 42, 0.85), rgba(38, 28, 60, 0.7));
  border: 1px solid rgba(168, 140, 255, 0.28); border-radius: 12px;
  padding: 14px 16px; overflow: hidden; isolation: isolate;
  transition: border-color 0.25s, transform 0.15s, box-shadow 0.25s;
}
.exp-active-card:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(168, 140, 255, 0.25); }
.exp-active-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at -10% 50%, rgba(168, 140, 255, 0.18), transparent 50%);
}
.exp-active-card.is-ready {
  border-color: rgba(122, 240, 122, 0.65);
  box-shadow: 0 0 22px rgba(122, 240, 122, 0.32);
  animation: exp-ready-pulse 1.8s ease-in-out infinite;
}
.exp-active-card.is-ready .exp-active-bg {
  background:
    radial-gradient(circle at -10% 50%, rgba(122, 240, 122, 0.22), transparent 55%),
    radial-gradient(circle at 110% 50%, rgba(240, 192, 96, 0.15), transparent 55%);
}
@keyframes exp-ready-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(122, 240, 122, 0.25); }
  50%      { box-shadow: 0 0 28px rgba(122, 240, 122, 0.55); }
}
.exp-active-pet {
  position: relative; z-index: 1;
  width: 76px; height: 76px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(10, 6, 22, 0.85), rgba(28, 18, 50, 0.7));
  border: 1.5px solid rgba(168, 140, 255, 0.4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.5);
}
.exp-active-pet img { width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.exp-active-pet i { font-size: 36px; color: #a88cff; }
.exp-pet-lv {
  position: absolute; bottom: -1px; right: -1px;
  background: linear-gradient(135deg, #f5d067, #d4a040);
  color: #1b1430; font-size: 0.68em; font-weight: 700;
  padding: 2px 7px; border-radius: 6px 0 6px 0; letter-spacing: 0.05em;
}
.exp-active-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.exp-active-name { font-weight: 700; color: #fff; font-size: 1.05em; letter-spacing: 0.02em; }
.exp-active-exp { font-size: 0.85em; color: #c8b8ff; display: flex; align-items: center; gap: 6px; }
.exp-active-exp i { color: #a88cff; }
.exp-progress-wrap { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.exp-progress-bar {
  height: 6px; background: rgba(0, 0, 0, 0.45);
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(168, 140, 255, 0.2);
}
.exp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a88cff 0%, #f5d067 100%);
  border-radius: 3px; transition: width 0.6s ease;
  box-shadow: 0 0 8px rgba(168, 140, 255, 0.6);
}
.exp-active-card.is-ready .exp-progress-fill {
  background: linear-gradient(90deg, #7af07a 0%, #f5d067 100%);
  box-shadow: 0 0 14px rgba(122, 240, 122, 0.6);
}
.exp-active-timer {
  font-size: 0.82em; color: #c8c0e0;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 5px;
}
.exp-active-timer i { color: #f0c060; }
.exp-active-card.is-ready .exp-active-timer { color: #7af07a; font-weight: 700; letter-spacing: 0.12em; }
.exp-active-card.is-ready .exp-active-timer i { color: #7af07a; }
.exp-claim-btn { position: relative; z-index: 1; white-space: nowrap; display: flex; align-items: center; gap: 6px; }

.exp-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.exp-card {
  position: relative; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, rgba(22, 16, 38, 0.95), rgba(34, 24, 56, 0.95));
  border: 1px solid rgba(168, 140, 255, 0.22);
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
  isolation: isolate; display: flex; flex-direction: column;
}
.exp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.exp-card-common:hover    { border-color: rgba(170, 170, 170, 0.5); }
.exp-card-epic:hover      { border-color: rgba(194, 102, 255, 0.6); box-shadow: 0 10px 28px rgba(194, 102, 255, 0.25); }
.exp-card-legendary:hover { border-color: rgba(245, 166, 35, 0.65); box-shadow: 0 10px 28px rgba(245, 166, 35, 0.28); }
/* 2026-06-23: card bloqueada por tier insuficiente */
.exp-card.is-locked { opacity: 0.55; filter: saturate(0.55); }
.exp-card.is-locked:hover { transform: none; box-shadow: none; cursor: not-allowed; }
.exp-card-lock-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(8,4,18,0.55), rgba(8,4,18,0.85));
  color: #f5d067;
  font-weight: 700; font-size: 0.78em;
  text-transform: uppercase; letter-spacing: 0.05em;
  pointer-events: none;
}
.exp-card-lock-overlay i { font-size: 26px; color: #f5d067; filter: drop-shadow(0 0 6px rgba(245,208,103,0.5)); }
.exp-start-btn.is-locked-btn {
  background: linear-gradient(135deg, rgba(60, 40, 80, 0.5), rgba(40, 28, 60, 0.5));
  border: 1px dashed rgba(245, 208, 103, 0.35);
  color: rgba(245, 208, 103, 0.7);
  cursor: not-allowed;
}
.exp-start-btn.is-locked-btn:hover { transform: none; box-shadow: none; }
/* 2026-06-23: regla destacada de escalado de drops por nivel de pet */
.exp-rule.exp-rule-scale {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(122, 240, 122, 0.10), rgba(60, 200, 100, 0.05));
  border-color: rgba(122, 240, 122, 0.35);
  color: #d4f0d4;
}
.exp-rule.exp-rule-scale b { color: #afe9a5; }

.exp-card-banner {
  position: relative; height: 92px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.exp-card-common .exp-card-banner {
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 180, 110, 0.4), transparent 70%),
    linear-gradient(135deg, #2a3a26 0%, #1a2418 100%);
}
.exp-card-epic .exp-card-banner {
  background:
    radial-gradient(circle at 50% 0%, rgba(194, 102, 255, 0.45), transparent 70%),
    linear-gradient(135deg, #3a1a4a 0%, #1f0e2a 100%);
}
.exp-card-legendary .exp-card-banner {
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 166, 35, 0.5), transparent 70%),
    linear-gradient(135deg, #4a2a10 0%, #2a1808 100%);
}
.exp-card-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 14px 14px; opacity: 0.4;
}
.exp-card-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35));
}
.exp-card-banner-icon {
  font-size: 48px; color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
  position: relative; z-index: 1; transition: transform 0.3s;
}
.exp-card:hover .exp-card-banner-icon { transform: scale(1.1) rotate(-5deg); }
.exp-card-common    .exp-card-banner-icon { color: #b4d0a8; }
.exp-card-epic      .exp-card-banner-icon { color: #d8a4ff; }
.exp-card-legendary .exp-card-banner-icon { color: #ffd47a; }

.exp-card-tier-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: 0.72em; font-weight: 700;
  padding: 4px 10px; border-radius: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.exp-card-common    .exp-card-tier-badge { color: #c4d4bc; border-color: rgba(196, 212, 188, 0.35); }
.exp-card-epic      .exp-card-tier-badge { color: #e0c0ff; border-color: rgba(194, 102, 255, 0.45); }
.exp-card-legendary .exp-card-tier-badge { color: #ffd47a; border-color: rgba(245, 166, 35, 0.5); }

.exp-card-body { padding: 14px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.exp-card-name { font-size: 1.1em; font-weight: 700; color: #fff; letter-spacing: 0.04em; line-height: 1.2; }
.exp-card-flavor { font-size: 0.78em; color: #a8a0c0; font-style: italic; line-height: 1.4; }
.exp-card-stats { display: flex; gap: 8px; margin-top: 2px; }
.exp-stat {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(168, 140, 255, 0.18);
  border-radius: 8px; padding: 6px 10px;
  font-size: 0.85em; color: #d4cce8;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.exp-stat i { font-size: 1.1em; }
.exp-stat:first-child i { color: #a88cff; }
.exp-stat:last-child  i { color: #f5d067; }

.exp-loot-label {
  font-size: 0.62em; letter-spacing: 0.18em; font-weight: 700;
  color: rgba(212, 204, 232, 0.55); margin-bottom: 2px;
}
.exp-loot-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.exp-loot-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(168, 140, 255, 0.12);
  border: 1px solid rgba(168, 140, 255, 0.28);
  color: #d4cce8; font-size: 0.7em;
  padding: 3px 6px 3px 4px; border-radius: 7px;
  font-weight: 600; cursor: help; line-height: 1;
}
.exp-loot-chip .exp-mat-ico {
  font-size: 16px; color: #a88cff;
  background: rgba(0, 0, 0, 0.25); border-radius: 4px;
  padding: 1px; flex-shrink: 0;
}
.exp-loot-chip-pct { font-weight: 800; font-size: 1em; color: #f5d067; font-variant-numeric: tabular-nums; }
.exp-loot-chip-qty { font-size: 0.78em; color: rgba(212, 204, 232, 0.7); font-variant-numeric: tabular-nums; }
.exp-loot-chip.exp-loot-gems {
  background: rgba(122, 240, 255, 0.14);
  border-color: rgba(122, 240, 255, 0.32);
  color: #7af0ff;
}
.exp-loot-chip.exp-loot-gems i { font-size: 16px; padding: 2px; background: rgba(0,0,0,0.25); border-radius: 5px; }
.exp-loot-chip.exp-loot-gems .exp-loot-chip-pct { color: #7af0ff; }
.exp-card-legendary .exp-loot-chip { background: rgba(245, 208, 103, 0.10); border-color: rgba(245, 208, 103, 0.30); }
.exp-card-legendary .exp-loot-chip .exp-mat-ico { color: #f5d067; }

/* HISTORIAL */
.exp-history-list { display: flex; flex-direction: column; gap: 8px; }
.exp-hist-row {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(28, 23, 56, 0.65), rgba(20, 15, 42, 0.65));
  border: 1px solid rgba(168, 140, 255, 0.18);
  border-radius: 10px; padding: 10px 12px;
}
.exp-hist-pet {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35); border-radius: 8px;
  border: 1px solid rgba(168, 140, 255, 0.22);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.exp-hist-pet img { max-width: 100%; max-height: 100%; }
.exp-hist-pet i { font-size: 22px; color: rgba(168, 140, 255, 0.55); }
.exp-hist-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.exp-hist-title { font-size: 0.88em; color: #e0d8f2; font-weight: 600; }
.exp-hist-exp { color: #a88cff; font-weight: 500; font-size: 0.92em; }
.exp-hist-loot { display: flex; flex-wrap: wrap; gap: 4px; }
.exp-hist-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(168, 140, 255, 0.10);
  border: 1px solid rgba(168, 140, 255, 0.22);
  color: #d4cce8; font-size: 0.72em;
  padding: 2px 7px 2px 4px; border-radius: 6px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.exp-hist-chip .exp-mat-ico { font-size: 14px; color: #a88cff; }
.exp-hist-chip.exp-hist-gems { background: rgba(122, 240, 255, 0.12); border-color: rgba(122, 240, 255, 0.28); color: #7af0ff; }
.exp-hist-time {
  font-size: 0.72em; color: rgba(212, 204, 232, 0.5);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
@media (max-width: 720px) {
  .exp-hist-row { flex-wrap: wrap; padding: 8px; gap: 8px; }
  .exp-hist-time { width: 100%; text-align: right; }
}

.exp-card .exp-start-btn {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.85em; padding: 10px 14px; border-radius: 8px;
  background: linear-gradient(135deg, #6b4ec2, #8a6dd8);
  color: #fff; border: 1px solid rgba(168, 140, 255, 0.45);
  box-shadow: 0 4px 14px rgba(107, 78, 194, 0.4);
  transition: transform 0.15s, box-shadow 0.2s;
}
.exp-card .exp-start-btn .exp-btn-cost {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0, 0, 0, 0.32); color: #f5d067;
  font-size: 0.92em; font-weight: 800; letter-spacing: 0;
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid rgba(245, 208, 103, 0.4);
  font-variant-numeric: tabular-nums; text-transform: none;
  margin-left: 4px;
}
.exp-card .exp-start-btn .exp-btn-cost i { font-size: 0.95em; }
.exp-card-legendary .exp-start-btn .exp-btn-cost {
  background: rgba(0, 0, 0, 0.42); color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.exp-card .exp-start-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(168, 140, 255, 0.55); }
.exp-card-legendary .exp-start-btn {
  background: linear-gradient(135deg, #c89030, #f5d067);
  border-color: rgba(245, 208, 103, 0.55);
  color: #1b1430;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.4);
}
.exp-card-legendary .exp-start-btn:hover { box-shadow: 0 6px 22px rgba(245, 208, 103, 0.6); }

.exp-picker-modal { border: 1px solid rgba(168, 140, 255, 0.35) !important; }
.exp-picker-row { transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.exp-picker-row:hover {
  background: rgba(168, 140, 255, 0.12) !important;
  border-color: rgba(168, 140, 255, 0.5) !important;
  transform: translateX(2px);
}

@media (max-width: 720px) {
  .exp-wrap { padding: 12px; gap: 16px; }
  .exp-hero-content { grid-template-columns: 56px 1fr; padding: 16px 14px; gap: 12px; }
  .exp-hero-icon { width: 56px; height: 56px; }
  .exp-hero-icon i { font-size: 28px; }
  .exp-hero-title { font-size: 1.15em; letter-spacing: 0.12em; }
  .exp-hero-sub { font-size: 0.75em; }
  .exp-hero-stats { grid-column: 1 / -1; margin-top: 12px; justify-content: space-around; width: 100%; }
  .exp-hero-stat { padding: 6px 10px; min-width: 56px; }
  .exp-hero-stat-num { font-size: 1.25em; }
  .exp-rules { grid-template-columns: 1fr 1fr; padding: 8px 10px; }
  .exp-rule { font-size: 0.75em; }
  .exp-active-card { grid-template-columns: 56px 1fr; gap: 10px; padding: 10px 12px; }
  .exp-active-pet { width: 56px; height: 56px; }
  .exp-active-pet i { font-size: 28px; }
  .exp-claim-btn { grid-column: 1 / -1; margin-top: 8px; justify-content: center; }
  .exp-catalog { grid-template-columns: 1fr; gap: 12px; }
  .exp-card-banner { height: 78px; }
  .exp-card-banner-icon { font-size: 40px; }
  .exp-card-body { padding: 12px; gap: 8px; }
  .exp-card-name { font-size: 1em; }
  .exp-section-title { font-size: 0.85em; }
}