/* Cosméticos de perfil de Krown Rewards (marco, color de nombre, efecto de
   tarjeta, insignia — 4 tipos independientes): swatches para el
   catálogo/inventario + animaciones compartidas, aplicadas también en vivo
   sobre el perfil real (Netline). Requiere app-tokens.css cargado antes
   (usa sus tokens: --bg-1/2/3, --accent...). */

/* Tile tipo "tienda de Discord": SOLO la pieza que vende cada item (anillo,
   texto de nombre o mini tarjeta), centrada, sin mockup de perfil completo.
   container-type:inline-size = la insignia escala en cqw según el ANCHO real
   del hueco donde se pinte el swatch (220px en catálogo, mucho más en la
   ficha); el anillo de marco NO escala — va al tamaño exacto del perfil real
   (ver .kr-tile-ring más abajo), a propósito.
   Sin border-radius propio: en todos sus usos (.rw-card__img, .rw-detail__img)
   el contenedor ya recorta en redondo (overflow:hidden + su propio radius) —
   redondear aquí también dejaba un doble borde con las esquinas del
   contenedor asomando por detrás.
   isolation:isolate = stacking context propio (necesario para el truco de
   z-index negativo de .anim-sweep, ver más abajo). */
.kr-tile {
  container-type: inline-size;
  width: 100%; height: 100%; min-height: 90px; overflow: hidden;
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 14px;
  background: radial-gradient(circle at 50% 38%, var(--bg-2) 0%, var(--bg-1) 72%);
}

/* Mismo tamaño EXACTO que el marco real sobre el avatar en el perfil
   (#pm-av-wrap en _profile_modal.php: 72px, padding 3px) — no se reescala al
   hueco del catálogo/ficha, así se ve tal cual quedaría puesto. */
.kr-tile-ring {
  width: 72px; height: 72px; padding: 3px;
  border-radius: 50%; display: flex; flex-shrink: 0;
}
.kr-tile-ring-inner {
  width: 100%; height: 100%; border-radius: 50%; background: var(--bg-3, #333);
  display: flex; align-items: center; justify-content: center;
}
/* Misma gema que .kr-tile-card-gem img (mismo color/tamaño): blanca, 60%,
   opacity .8 — antes iba más tenue (.45, 62%) y desentonaba con la tarjeta. */
.kr-tile-gem { width: 60%; height: 60%; object-fit: contain; filter: brightness(0) invert(1); opacity: .8; display: block; }
/* Tarjeta de marco en cuadrícula de 220px (catálogo, home, mis-cosméticos):
   gema más pequeña que en la ficha/canje, donde el hueco es mucho mayor.
   Las tres vistas de cuadrícula comparten el mismo .rw-grid/tile de 220px,
   así que llevan el mismo modificador para que el swatch se vea igual en
   las tres — si no, el mismo item cambia de proporción según la página. */
.rw-card__img--catalog .kr-tile-gem { width: 46%; height: 46%; }
/* Vista rápida (modal sobre catálogo): reusa el mismo fragmento .rw-detail
   que la ficha completa, pero en un hueco compacto (modal, no página ancha)
   — sin este modificador la gema hereda el 60% de la ficha y se ve
   sobredimensionada. Mismo 46% que la cuadrícula del catálogo. */
.rw-modal--quickview .kr-tile-gem { width: 46%; height: 46%; }

.kr-tile-name { font-weight: 700; font-size: .85rem; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Marco equipado, EN VIVO, sobre cualquier avatar del ecosistema (no el
   swatch del catálogo — eso es .kr-tile-ring arriba, tamaño fijo 72px). Envuelve
   lo que sea que el avatar ya renderice (foto o gema por defecto): padding fijo
   pequeño + el fondo/gradiente del marco asomando alrededor, igual que
   #pm-av-wrap en _profile_modal.php pero para CUALQUIER tamaño de avatar del
   sitio (crece el elemento ~4px en total a propósito, incluso en avatares
   diminutos como el header de 26px — ver krownCosmeticFrameWrap() en
   lib/app-core/helpers.php). */
.krown-frame {
  display: inline-flex; flex-shrink: 0; padding: 2px; border-radius: 50%; line-height: 0;
}
/* Variante superpuesta (sin envolver): para avatares cuyo tamaño depende de
   un % resuelto contra su propio contenedor (width:100%/height:100%) — en
   ese caso envolver por fuera rompe el layout (el % no resuelve contra
   nada). En vez de envolver, un borde superpuesto DENTRO del propio
   overflow:hidden del elemento — ver krownCosmeticFrameOverlay() en
   lib/app-core/helpers.php.
   Pintado con background (admite color solido Y gradiente/conico igual) +
   mask circular que recorta solo el borde — a proposito NO usa border-image:
   border-image ignora border-radius, en un circulo el "cuadrado" invisible
   del border-image sobresale por las esquinas y el overflow:hidden del
   padre se las come → el anillo salia partido en 4 trozos en vez de
   completo (bug real reportado: "no se ve el circulo del marco entero").
   La mascara SI es circular de verdad, no depende de border-radius. */
.krown-frame--overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  -webkit-mask: radial-gradient(circle farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(circle farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
/* Variante cuadrada a sangre (ej. player-card de Esports, sin border-radius
   propio): ahi border-image SI funciona bien porque la caja ya es
   rectangular, no hace falta mascara. */
.krown-frame--overlay-square {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: 0; border-radius: inherit; display: block;
  border: 2px solid; border-style: solid;
}

/* Efecto de tarjeta: mini tarjeta de perfil (banner neutro + cuerpo con el
   efecto + logo) girada, como una carta flotando dentro del tile. El bg/anim
   del item tiñe el CUERPO (debajo del banner), nunca el banner en sí — el
   banner es una franja de foto de portada neutra, ajena al cosmético.
   Alargada (como una tarjeta de perfil real, no un cuadrado) pero el banner
   se queda a altura fija en vez de estirarse con la tarjeta. Gema en círculo
   montada sobre la costura banner/cuerpo, a la izquierda — el sitio típico
   del logo en una tarjeta (mitad sobre el banner, mitad sobre el cuerpo). */
.kr-tile-card {
  width: 58%; aspect-ratio: 4 / 4.6; border-radius: 10px; overflow: visible;
  position: relative; isolation: isolate;
  transform: perspective(600px) rotate(-6deg) rotateY(10deg);
}
.kr-tile-card-banner {
  height: 30px; border-radius: 10px 10px 0 0; overflow: hidden;
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
}
.kr-tile-card-banner::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4); z-index: -1;
}
.kr-tile-card-body {
  position: absolute; inset: 30px 0 0 0; border-radius: 0 0 10px 10px;
  overflow: hidden; background: var(--bg-1);
}
.kr-tile-card-gem {
  position: absolute; top: 30px; left: 12%; transform: translateY(-50%);
  width: 30%; aspect-ratio: 1; border-radius: 50%; padding: 3px;
  background: var(--bg-1); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); z-index: 1;
}
.kr-tile-card-gem-inner {
  width: 100%; height: 100%; border-radius: 50%; background: var(--bg-3, #333);
  display: flex; align-items: center; justify-content: center;
}
.kr-tile-card-gem img { width: 60%; object-fit: contain; filter: brightness(0) invert(1); opacity: .8; display: block; }

.kr-tile--badge { justify-content: center; }
.kr-tile-badge-icon { width: 42cqw !important; height: 42cqw !important; min-width: 36px; max-width: 104px; min-height: 36px; max-height: 104px; }

/* Cada insignia lleva su propio color (SVG ya coloreado, o el rombo real de
   marca en rojo) - sin filter:invert forzando blanco (asi es como todas
   las insignias, distintas entre si, terminaban viendose igual: el mismo
   rombo blanco). */
.kr-badge-icon { width: 32px; height: 32px; object-fit: contain; display: block; }

/* Insignia en vivo (perfil): etiqueta propia en :hover con el nombre, en vez
   de title nativo + cursor:help (eso solo pintaba el cursor de interrogante
   del navegador, sin nombre legible hasta pasado el delay del tooltip nativo).
   Colores fijos (no var(--text-0)/var(--bg-1) de app-tokens.css) a proposito:
   --text-0 NO existe en apps con su propio design system (Series usa
   --text-1/--bg-dark), asi que el chip salia sin fondo/texto invisible ahi.
   z-index alto + el padre (.kr-badge-tip) SIN overflow propio para que no lo
   recorte un contenedor ancestro con overflow-y:auto (ej. #pm-box). */
.kr-badge-tip { position: relative; display: inline-flex; flex-shrink: 0; cursor: default; }
.kr-badge-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: rgba(20, 20, 24, .96); color: #fff;
  font-size: .68rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  padding: 4px 8px; border-radius: 5px; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  z-index: 999;
}
.kr-badge-tip:hover::after, .kr-badge-tip:focus-visible::after { opacity: 1; visibility: visible; }

@property --kr-spin { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

@media (prefers-reduced-motion: no-preference) {
  .anim-spin  { animation: kr-spin-ring 3.2s linear infinite; }
  @keyframes kr-spin-ring { to { --kr-spin: 360deg; } }

  .anim-pulse { animation: kr-pulse-ring 1.8s ease-in-out infinite; }
  @keyframes kr-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 7px transparent; } }

  .anim-shift { animation: kr-shift-ring 3.4s ease-in-out infinite; background-size: 220% 220%; }
  @keyframes kr-shift-ring { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

  /* Halo (color de nombre): banda de luz deslizando en horizontal, lenta y
     lineal (sin rebote ease-in-out) para que se note sutil. Solo la usa
     cosmetic-name-halo-giratorio (el marco volvió a anim-spin, el giro
     original). */
  .anim-halo { animation: kr-halo-shift 8s linear infinite; background-size: 200% 100%; }
  @keyframes kr-halo-shift { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }

  .anim-fade  { animation: kr-fade-ring 2.6s ease-in-out infinite; }
  @keyframes kr-fade-ring { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

  /* z-index negativo: pinta por encima del fondo propio del elemento pero por
     debajo de su contenido en flujo normal, sin tocar el resto de hijos.
     Requiere que el elemento tenga su propio positioning context — el ring,
     #pm-box y .kr-tile-card-body ya lo tienen todos por su cuenta (relative o
     absolute), así que NO se fuerza position aquí: en .kr-tile-card-body eso
     pisaba su position:absolute con relative, y al depender del inset para
     su tamaño (sin width/height propios) colapsaba a 0px — el swatch de
     Escaneo (único cosmético con anim:sweep) no se veía en el catálogo. */
  .anim-sweep { overflow: hidden; }
  .anim-sweep::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
    background-size: 220% 220%; animation: kr-sweep-ring 2.4s ease-in-out infinite;
  }
  @keyframes kr-sweep-ring { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .anim-spin, .anim-pulse, .anim-shift, .anim-fade, .anim-halo { animation: none !important; }
}