/* =====================================================================
   AVATAR SKINS — Marcos decorativos para el avatar del personaje
   2026-05-13

   Hay 2 formas de aplicar un skin:

   1) Vía renderAvatar() — el wrapper es <div class="avatar-wrap avatar-{size} skin-X">
      Estructura completa con foto + marco integrado.

   2) Vía skinClass() — agrega `has-skin skin-X` a un wrapper EXISTENTE
      (ej: .top-avatar, .race-portrait-img, .rmrc-avatar, etc.). El skin
      aplica border + glow al elemento sin tocar la foto.

   Cada skin tiene 3 variantes visuales:
     - Frame border (color + gradient)
     - Glow / shadow (efecto exterior)
     - Pseudo-elementos para particulas o coronas
====================================================================== */

/* ============ BASE: avatar-wrap (renderAvatar) ============ */
.avatar-wrap {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: visible;
  box-sizing: border-box;
}
.avatar-wrap .avatar-photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.avatar-wrap .avatar-photo-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.avatar-wrap .avatar-photo > i {
  font-size: 60%;
  color: rgba(255, 255, 255, 0.75);
}

/* Tamaños */
.avatar-xs { width: 24px;  height: 24px; }
.avatar-sm { width: 36px;  height: 36px; }
.avatar-md { width: 52px;  height: 52px; }
.avatar-lg { width: 72px;  height: 72px; }
.avatar-xl { width: 96px;  height: 96px; }

/* ============ OVERLAY MODE: skinFrame() inserta este overlay sobre wrappers existentes ============ */
.avatar-skin-overlay {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

/* ============ FRAMES POR SKIN ============
   Cada skin se aplica de 3 maneras:
   - .avatar-wrap.skin-X       → el wrapper directo del helper
   - .has-skin.skin-X          → wrappers existentes con class agregada
   - .avatar-skin-overlay.skin-X → overlay div
====================================================================== */

/* ────── default: marco transparente sutil ────── */
.avatar-wrap.skin-default,
.has-skin.skin-default {
  /* sin border extra, mantiene el look base */
}

/* ────── bronze: marco bronce con grabados ────── */
.avatar-wrap.skin-bronze,
.has-skin.skin-bronze,
.avatar-skin-overlay.skin-bronze {
  box-shadow:
    inset 0 0 0 2px #8a5028,
    inset 0 0 0 3px #c97d3b,
    0 0 8px rgba(201, 125, 59, 0.45);
}
.avatar-skin-overlay.skin-bronze {
  border: 2px solid #c97d3b;
  box-shadow: 0 0 8px rgba(201, 125, 59, 0.45), inset 0 0 0 1px #8a5028;
}

/* ────── silver: plata pulida con runas ────── */
.avatar-wrap.skin-silver,
.has-skin.skin-silver,
.avatar-skin-overlay.skin-silver {
  box-shadow:
    inset 0 0 0 2px #6e6e85,
    inset 0 0 0 3px #c4c4d0,
    0 0 10px rgba(196, 196, 208, 0.55);
}
.avatar-skin-overlay.skin-silver {
  border: 2px solid #c4c4d0;
  box-shadow: 0 0 10px rgba(196, 196, 208, 0.55), inset 0 0 0 1px #6e6e85;
}

/* ────── gold: dorado brillante del reino ────── */
.avatar-wrap.skin-gold,
.has-skin.skin-gold,
.avatar-skin-overlay.skin-gold {
  box-shadow:
    inset 0 0 0 2px #7a5e10,
    inset 0 0 0 3px #e9b963,
    inset 0 0 0 4px #ffd24a,
    0 0 14px rgba(233, 185, 99, 0.7),
    0 0 24px rgba(233, 185, 99, 0.3);
}
.avatar-skin-overlay.skin-gold {
  border: 3px solid;
  border-image: linear-gradient(45deg, #ffd24a 0%, #e9b963 35%, #c79a45 70%, #ffd24a 100%) 1;
  box-shadow: 0 0 14px rgba(233, 185, 99, 0.7), 0 0 24px rgba(233, 185, 99, 0.3);
}

/* ────── emerald: vid esmeralda con hojas ────── */
.avatar-wrap.skin-emerald,
.has-skin.skin-emerald,
.avatar-skin-overlay.skin-emerald {
  box-shadow:
    inset 0 0 0 2px #2f7d44,
    inset 0 0 0 3px #5fd684,
    0 0 14px rgba(95, 214, 132, 0.65);
}
.avatar-wrap.skin-emerald::after,
.has-skin.skin-emerald::after,
.avatar-skin-overlay.skin-emerald::after {
  content: '';
  position: absolute;
  top: -4px; right: -2px;
  width: 12px; height: 12px;
  background: radial-gradient(circle at 30% 30%, #aff5c2 0%, #5fd684 50%, #2f7d44 100%);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-25deg);
  box-shadow: 0 0 8px rgba(95, 214, 132, 0.65);
}

/* ────── sapphire: cristal zafiro ────── */
.avatar-wrap.skin-sapphire,
.has-skin.skin-sapphire,
.avatar-skin-overlay.skin-sapphire {
  box-shadow:
    inset 0 0 0 2px #1d4a8f,
    inset 0 0 0 3px #5aa6ff,
    inset 0 0 12px rgba(90, 166, 255, 0.35),
    0 0 18px rgba(90, 166, 255, 0.8),
    0 0 32px rgba(90, 166, 255, 0.3);
  animation: skin-sapphire-shimmer 3s ease-in-out infinite;
}
@keyframes skin-sapphire-shimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}

/* ────── flames: llamas eternas (animadas) ────── */
.avatar-wrap.skin-flames,
.has-skin.skin-flames,
.avatar-skin-overlay.skin-flames {
  box-shadow:
    inset 0 0 0 2px #8a3a10,
    inset 0 0 0 3px #ff7e3d,
    0 0 16px rgba(255, 126, 61, 0.85),
    0 0 32px rgba(255, 60, 0, 0.4);
  animation: skin-flames-pulse 1.4s ease-in-out infinite;
}
@keyframes skin-flames-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px #8a3a10, inset 0 0 0 3px #ff7e3d, 0 0 16px rgba(255, 126, 61, 0.85), 0 0 32px rgba(255, 60, 0, 0.4); }
  50%      { box-shadow: inset 0 0 0 2px #8a3a10, inset 0 0 0 3px #ffaa50, 0 0 22px rgba(255, 170, 80, 1),   0 0 40px rgba(255, 80, 0, 0.55); }
}

/* ────── frost: aura glacial con escarcha ────── */
.avatar-wrap.skin-frost,
.has-skin.skin-frost,
.avatar-skin-overlay.skin-frost {
  box-shadow:
    inset 0 0 0 2px #4a7d99,
    inset 0 0 0 3px #7dd3fc,
    inset 0 0 14px rgba(125, 211, 252, 0.4),
    0 0 18px rgba(125, 211, 252, 0.85),
    0 0 36px rgba(125, 211, 252, 0.3);
}
.avatar-wrap.skin-frost::before,
.has-skin.skin-frost::before,
.avatar-skin-overlay.skin-frost::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.85) 1px, transparent 2px),
    radial-gradient(circle at 80% 20%, rgba(125,211,252,0.85) 1px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.7) 1px, transparent 2px),
    radial-gradient(circle at 25% 75%, rgba(125,211,252,0.7) 1px, transparent 2px);
  pointer-events: none;
  z-index: 6;
  animation: skin-frost-rotate 12s linear infinite;
}
@keyframes skin-frost-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ────── dragon: escamas del dragón ────── */
.avatar-wrap.skin-dragon,
.has-skin.skin-dragon,
.avatar-skin-overlay.skin-dragon {
  box-shadow:
    inset 0 0 0 2px #4a1a0a,
    inset 0 0 0 3px #ff8a3d,
    inset 0 0 0 4px #c83e1f,
    0 0 18px rgba(255, 138, 61, 0.9),
    0 0 36px rgba(200, 62, 31, 0.45);
}
.avatar-wrap.skin-dragon::after,
.has-skin.skin-dragon::after,
.avatar-skin-overlay.skin-dragon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0deg, #ff8a3d 30deg, transparent 60deg, #c83e1f 120deg, transparent 150deg, #ff8a3d 240deg, transparent 270deg, #c83e1f 330deg, transparent 360deg);
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  animation: skin-dragon-rotate 8s linear infinite;
}
@keyframes skin-dragon-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ────── mythic_crown: corona mítica (legendary) ────── */
.avatar-wrap.skin-mythic-crown,
.has-skin.skin-mythic-crown,
.avatar-skin-overlay.skin-mythic-crown {
  box-shadow:
    inset 0 0 0 2px #7a5e10,
    inset 0 0 0 3px #ffd24a,
    inset 0 0 0 5px #ffeaa0,
    0 0 22px rgba(255, 210, 74, 1),
    0 0 44px rgba(255, 210, 74, 0.4);
  animation: skin-mythic-rotate 6s linear infinite;
}
@keyframes skin-mythic-rotate {
  0%, 100% { filter: hue-rotate(0deg) brightness(1.05); }
  50%      { filter: hue-rotate(-15deg) brightness(1.2); }
}
.avatar-wrap.skin-mythic-crown::before,
.has-skin.skin-mythic-crown::before,
.avatar-skin-overlay.skin-mythic-crown::before {
  content: '\f521';   /* fa-crown */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: -55%;
  left: 50%;
  transform: translateX(-50%);
  color: #ffd24a;
  font-size: 55%;
  text-shadow:
    0 0 8px rgba(255, 210, 74, 1),
    0 0 16px rgba(255, 170, 80, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  animation: skin-mythic-crown-bob 2.4s ease-in-out infinite;
}
@keyframes skin-mythic-crown-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -2px); }
}

/* ============ Aplicación a wrappers EXISTENTES del codebase ============
   Para no refactorear las 20 ubicaciones individualmente, aplicamos el
   skin como `has-skin skin-X` directamente al wrapper ya existente.
====================================================================== */

/* Top bar avatar */
.top-avatar.has-skin {
  position: relative;
  border-radius: 50%;
}

/* Race portrait img (usado en muchos lugares) */
.race-portrait-img.has-skin,
.top-avatar.has-skin {
  border-radius: 50%;
}

/* Ranking avatars */
.rank-avatar-img.has-skin,
.rmrc-avatar.has-skin,
.rpc-avatar.has-skin,
.rank-row-avatar.has-skin {
  border-radius: 50%;
}

/* Combat / PvP duel portraits */
.cs-portrait.has-skin {
  border-radius: 50%;
}

/* Mini avatars (chat, guild hall, clan cave) */
.cmg-portrait.has-skin,
.gh-actor-mini-avatar.has-skin,
.cc-actor-mini-avatar.has-skin,
.ghc-ally-avatar.has-skin,
.ghc-ally-circle-avatar.has-skin {
  border-radius: 50%;
}

/* Guild members */
.gn-mr-avatar.has-skin,
.gn-rr-avatar.has-skin,
.gn-avatar.has-skin {
  border-radius: 50%;
}

/* ============ TIENDA OFICIAL: sección Skins ============ */
.oshop-skins-section {
  margin: 14px 0 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(40, 22, 56, 0.7), rgba(20, 10, 30, 0.85));
  border: 1px solid rgba(184, 132, 255, 0.32);
  border-radius: 12px;
}
.oshop-skins-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title, 'Cinzel'), serif;
  font-size: 15px;
  font-weight: 800;
  color: #c39dff;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.oshop-skins-title i {
  font-size: 17px;
}
.oshop-skins-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.oshop-skin-card {
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 10px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.oshop-skin-card:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 132, 255, 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(184, 132, 255, 0.18) inset;
}
.oshop-skin-card.is-equipped {
  border-color: #5fd684;
  box-shadow: 0 0 14px rgba(95, 214, 132, 0.32), inset 0 0 0 1px rgba(95, 214, 132, 0.5);
}
.oshop-skin-preview {
  width: 64px; height: 64px;
  margin: 0 auto 10px;
}
.oshop-skin-name {
  font-family: var(--font-title, 'Cinzel'), serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #e0d8c8);
  margin-bottom: 4px;
  line-height: 1.2;
}
.oshop-skin-rarity {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.oshop-skin-rarity.r-common    { color: #c4c4d0; }
.oshop-skin-rarity.r-uncommon  { color: #5fd684; }
.oshop-skin-rarity.r-rare      { color: #5aa6ff; }
.oshop-skin-rarity.r-epic      { color: #b884ff; }
.oshop-skin-rarity.r-legendary { color: #ffaa50; }
.oshop-skin-rarity.r-mythic    { color: #ff5a78; }

.oshop-skin-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: all 0.15s;
  width: 100%;
  font-family: inherit;
}
.oshop-skin-action i { font-size: 11px; }
.oshop-skin-action.buy {
  color: var(--gold, #e9b963);
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.08);
}
.oshop-skin-action.buy:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.75);
}
.oshop-skin-action.equip {
  color: #b884ff;
  border-color: rgba(184, 132, 255, 0.5);
  background: rgba(184, 132, 255, 0.08);
}
.oshop-skin-action.equip:hover {
  background: rgba(184, 132, 255, 0.18);
  border-color: rgba(184, 132, 255, 0.75);
}
.oshop-skin-action.equipped {
  color: #5fd684;
  border-color: rgba(95, 214, 132, 0.5);
  background: rgba(95, 214, 132, 0.08);
  cursor: default;
}
.oshop-skin-action.cant-afford {
  color: var(--text-dim);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  cursor: not-allowed;
}