/* ================================================================
   EMPORIO DE PIEZAS — el dibujo de cada cosmético
   ----------------------------------------------------------------
   Marcos, títulos, auras de tarjeta e iconos de consumibles. Lo pinta
   js/emporio/emporio-render.js; aquí vive cómo se ve. Una regla por EFECTO del
   catálogo cerrado (emporio_efectos, sección 102.2): añadir un efecto
   es añadir su bloque aquí, su entrada en EFECTOS de emporio-render.js
   y su fila en la base. tests/emporio/test-catalogo.js mira los tres.

   Ningún color está escrito a mano en un efecto: cuelgan de --c1 y
   --c2, que el JS pone ya validados (#rrggbb). Así el mismo aro de
   neón sirve para un marco cian y para uno dorado.

   Todo lo que se mueve se para con prefers-reduced-motion y con el
   modo de bajo rendimiento (perf-mode.css ya apaga las animaciones de
   body.perf-low; aquí además se quitan los brillos que dependen de
   ellas para que no se queden congelados a medias).

   La paleta de los TEMAS del Emporio no está aquí: un tema se aplica
   en todas las páginas, así que vive en themes.css, que cargan todas.
   ================================================================ */

@keyframes emp-girar   { to { transform: rotate(360deg); } }
@keyframes emp-girar-r { to { transform: rotate(-360deg); } }

/* ════════════════════════════════════════════════════════════════
   MARCOS
   El contenedor del avatar es position: relative (el de siempre de
   frames.css). El marco CSS es un aro dibujado con una máscara radial
   sobre un fondo; sale un poco por fuera de la foto (--frame-scale)
   para que el aro abrace la foto en vez de taparla.
   ════════════════════════════════════════════════════════════════ */

.emp-marco {
  --frame-scale: 1.2;
  --emp-grosor: 17%;
  border-radius: 50%;
  display: block;
}

/* El aro */
.emp-marco::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--emp-anillo, var(--c1));
  -webkit-mask: radial-gradient(circle farthest-side, transparent calc(100% - var(--emp-grosor)), #000 calc(100% - var(--emp-grosor) + 0.6px));
          mask: radial-gradient(circle farthest-side, transparent calc(100% - var(--emp-grosor)), #000 calc(100% - var(--emp-grosor) + 0.6px));
}

/* Los contenedores nuevos que llevan marco (comentarios, Salón,
   tienda): mismo trato que .pv-avatar.has-frame */
.emp-con-marco { position: relative; overflow: visible !important; }
/* La foto, fija a la caja redonda. Con el marco hay que dejar salir lo que
   sobresale (overflow visible), y una foto VERTICAL, que en una rejilla
   con height:100% mide más que la caja, asomaba por debajo en un óvalo. */
.emp-con-marco > img:not(.frame-overlay) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Neón: aro de dos colores que brilla ── */
.emp-m-neon {
  --emp-anillo: conic-gradient(from 210deg, var(--c1), var(--c2), var(--c1));
  --emp-grosor: 13%;
  filter: drop-shadow(0 0 2px var(--c1)) drop-shadow(0 0 7px var(--c1-borde));
}

/* ── Metal: bandas de brillo que giran despacio ── */
.emp-m-metal {
  --emp-anillo: conic-gradient(from 20deg, var(--c1), var(--c2) 12%, var(--c1) 26%, var(--c2) 41%,
                               var(--c1) 55%, var(--c2) 71%, var(--c1) 86%, var(--c2) 95%, var(--c1));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.emp-m-metal::before { animation: emp-girar 14s linear infinite; }
.emp-m-metal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Bisel: un filo claro por fuera y uno oscuro por dentro */
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

/* ── Madera: vetas en anillo ── */
.emp-m-madera {
  --emp-grosor: 19%;
  --emp-anillo:
    radial-gradient(circle farthest-side, rgba(0, 0, 0, 0.45) 80%, transparent 86%, transparent 95%, rgba(0, 0, 0, 0.5) 100%),
    repeating-conic-gradient(from 7deg, var(--c1) 0deg 5deg, var(--c2) 5deg 6.5deg, var(--c1) 6.5deg 11deg, var(--c2) 11deg 14deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

/* ── Lente: graduación + reflejo de cristal sobre la foto ── */
.emp-m-lente {
  --emp-grosor: 15%;
  --emp-anillo:
    repeating-conic-gradient(var(--c1) 0deg 1.4deg, transparent 1.4deg 10deg),
    radial-gradient(circle farthest-side, var(--c2) 0 100%);
  filter: drop-shadow(0 0 4px var(--c1-borde));
}
.emp-m-lente::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 32%, transparent 46%);
  box-shadow: inset 0 0 0 1px var(--c1-borde);
}

/* ── Reloj: doce marcas y una aguja que avanza a saltos ── */
.emp-m-reloj {
  --emp-grosor: 16%;
  --emp-anillo:
    repeating-conic-gradient(var(--c1) 0deg 2.6deg, transparent 2.6deg 30deg),
    radial-gradient(circle farthest-side, var(--c2) 0 100%);
  filter: drop-shadow(0 0 3px var(--c1-borde));
}
.emp-m-aguja {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: emp-girar 60s steps(60) infinite;
}
.emp-m-aguja::before {
  content: "";
  position: absolute;
  top: -1%;
  left: 50%;
  width: 7%;
  height: 13%;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--c1);
  box-shadow: 0 0 6px var(--c1);
}

/* ── Cripto: glifos que giran y parpadean (SVG con textPath) ── */
.emp-m-cripto {
  --emp-grosor: 18%;
  --emp-anillo: radial-gradient(circle farthest-side, var(--c2-suave) 0 100%);
}
.emp-m-cripto-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.emp-m-cripto-giro  { transform-origin: 50px 50px; animation: emp-girar 22s linear infinite; }
.emp-m-cripto-giro2 { transform-origin: 50px 50px; animation: emp-girar-r 34s linear infinite; }
.emp-m-cripto-txt {
  font: 800 11px/1 ui-monospace, "Consolas", monospace;
  fill: var(--c1);
  filter: drop-shadow(0 0 2px var(--c1));
  animation: emp-parpadeo 4.2s steps(1) infinite;
}
.emp-m-cripto-txt2 {
  font: 700 6px/1 ui-monospace, "Consolas", monospace;
  fill: var(--c2);
  opacity: 0.55;
}
@keyframes emp-parpadeo {
  0%, 100% { opacity: 1; }
  7%  { opacity: 0.35; }
  9%  { opacity: 1; }
  52% { opacity: 0.6; }
  54% { opacity: 1; }
  81% { opacity: 0.25; }
  83% { opacity: 1; }
}

/* ── Calabaza: aro naranja-morado, calabaza de corona y brasas ── */
.emp-m-calabaza {
  --emp-grosor: 14%;
  --emp-anillo: conic-gradient(from 180deg, var(--c2), var(--c1) 30%, var(--c2) 50%, var(--c1) 70%, var(--c2));
  filter: drop-shadow(0 0 5px var(--c1-borde));
}
.emp-m-calabaza-svg {
  position: absolute;
  top: -21%;
  left: 50%;
  width: 46%;
  transform: translateX(-50%);
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(255, 140, 30, 0.75));
}
.emp-cal-gajo   { fill: var(--c1); stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.emp-cal-centro { fill: var(--c1); stroke: rgba(0, 0, 0, 0.4); stroke-width: 1; }
.emp-cal-tallo  { fill: #3f6b2a; }
.emp-cal-hoja   { fill: #5c8f3a; }
.emp-cal-cara   { fill: #fff2a6; animation: emp-vela 2.6s ease-in-out infinite; }
@keyframes emp-vela {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.72; }
  60% { opacity: 0.95; }
}
.emp-brasa {
  position: absolute;
  bottom: 4%;
  width: 6%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3b0, var(--c1) 55%, transparent 72%);
  opacity: 0;
  animation: emp-brasa 3.6s ease-in infinite;
}
.emp-brasa.b1 { left: 14%; animation-delay: 0s; }
.emp-brasa.b2 { left: 32%; animation-delay: 1.1s; }
.emp-brasa.b3 { left: 56%; animation-delay: 2.2s; }
.emp-brasa.b4 { left: 74%; animation-delay: 0.6s; }
.emp-brasa.b5 { left: 86%; animation-delay: 1.7s; }
@keyframes emp-brasa {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: 0.95; }
  100% { transform: translateY(-150%) translateX(12%) scale(0.4); opacity: 0; }
}

/* ── Imagen subida ── */
.emp-marco-img { --frame-scale: 1.32; }
.emp-marco-reserva { opacity: 0.55; }
.emp-img-reserva { display: inline-grid; place-items: center; opacity: 0.6; }

/* ════════════════════════════════════════════════════════════════
   TÍTULOS — la placa bajo el @usuario
   ════════════════════════════════════════════════════════════════ */

.emp-titulo {
  --c1: #b8c4d6;
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.14em 0.66em;
  border-radius: 999px;
  border: 1px solid var(--c1-borde, rgba(184, 196, 214, 0.55));
  background: var(--c1-suave, rgba(184, 196, 214, 0.16));
  color: var(--c1);
  font: 800 0.72rem/1.45 "Nunito", sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.emp-titulo-txt { overflow: hidden; text-overflow: ellipsis; }

/* Destello: una franja de luz que cruza */
.emp-t-brillo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: emp-destello 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes emp-destello {
  0%, 55% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* Prisma: el texto en degradado que se desliza */
.emp-t-arcoiris {
  border-color: transparent;
  background:
    linear-gradient(var(--pl-panel, #140c1f), var(--pl-panel, #140c1f)) padding-box,
    linear-gradient(90deg, var(--c1), var(--c2)) border-box;
}
.emp-t-arcoiris .emp-titulo-txt {
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: emp-prisma 4s linear infinite;
}
@keyframes emp-prisma { to { background-position: -200% 0; } }

/* Interferencia: dos copias desplazadas que tiemblan */
.emp-t-glitch {
  border-color: var(--c1-borde);
  background: rgba(0, 0, 0, 0.45);
  text-shadow: 0 0 6px var(--c1-borde);
}
.emp-t-glitch::before,
.emp-t-glitch::after {
  content: attr(data-texto);
  position: absolute;
  inset: 0;
  padding: inherit;
  display: flex;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.emp-t-glitch::before { color: var(--c2); animation: emp-glitch-a 2.8s steps(1) infinite; }
.emp-t-glitch::after  { color: var(--c1); animation: emp-glitch-b 3.3s steps(1) infinite; opacity: 0.8; }
@keyframes emp-glitch-a {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  12% { clip-path: inset(10% 0 55% 0); transform: translate(-2px, 0); }
  14% { clip-path: inset(0 0 100% 0); }
  62% { clip-path: inset(60% 0 8% 0); transform: translate(2px, 0); }
  64% { clip-path: inset(0 0 100% 0); }
}
@keyframes emp-glitch-b {
  0%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  33% { clip-path: inset(40% 0 30% 0); transform: translate(2px, -1px); }
  35% { clip-path: inset(0 0 100% 0); }
  80% { clip-path: inset(5% 0 70% 0); transform: translate(-1px, 1px); }
  82% { clip-path: inset(0 0 100% 0); }
}

/* Las rarezas ponen el color de la placa cuando el artículo no trae uno */
.emp-titulo.r-rare      { --c1-sombra: rgba(79, 195, 255, 0.4); }
.emp-titulo.r-legendary { box-shadow: 0 0 12px -3px var(--c1-borde); }

/* ════════════════════════════════════════════════════════════════
   AURAS — visten las tarjetas que publica cada creador
   La capa es un hijo y no un pseudo-elemento de la tarjeta: las
   tarjetas de la galería ya usan sus ::before/::after en algunos
   temas, y pisarlos sería romperle el tema a alguien.
   ════════════════════════════════════════════════════════════════ */

.emp-aura { position: relative; isolation: isolate; }
.emp-aura-capa {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  padding: 3px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Neón: borde de dos colores que late */
.emp-a-neon .emp-aura-capa { background: conic-gradient(from 90deg, var(--c1), var(--c2), var(--c1), var(--c2), var(--c1)); }
.emp-a-neon { animation: emp-latido 2.8s ease-in-out infinite; }
@keyframes emp-latido {
  0%, 100% { box-shadow: 0 0 14px -4px var(--c1-brillo), 0 18px 40px -22px rgba(0, 0, 0, 0.9); }
  50%      { box-shadow: 0 0 28px -2px var(--c2-brillo), 0 18px 40px -22px rgba(0, 0, 0, 0.9); }
}

/* Binario: ceros y unos que corren por el borde */
.emp-a-binario .emp-aura-capa {
  padding: 8px;
  background: var(--emp-bin), rgba(2, 10, 6, 0.82);
  background-size: 64px 10px, auto;
  animation: emp-bits 2.6s linear infinite;
}
.emp-a-binario { box-shadow: 0 0 18px -6px var(--c1-brillo), 0 18px 40px -22px rgba(0, 0, 0, 0.9); }
@keyframes emp-bits { to { background-position: 64px 0, 0 0; } }

/* Pergamino: papel viejo con los bordes tostados */
.emp-a-pergamino .emp-aura-capa {
  padding: 7px;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(60, 30, 5, 0.55) 100%),
    repeating-linear-gradient(8deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, var(--c1), #e9d3a1 45%, var(--c1));
}
.emp-a-pergamino { box-shadow: 0 0 16px -6px var(--c1-brillo), 0 18px 40px -22px rgba(0, 0, 0, 0.9); }

/* Aurora: un degradado que gira alrededor */
.emp-a-aurora .emp-aura-capa { padding: 3px; }
.emp-a-aurora .emp-aura-capa::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(var(--c1), var(--c2), transparent 40%, var(--c1) 60%, var(--c2), var(--c1));
  animation: emp-girar 6s linear infinite;
}
.emp-a-aurora { box-shadow: 0 0 22px -6px var(--c1-brillo), 0 0 30px -10px var(--c2-brillo), 0 18px 40px -22px rgba(0, 0, 0, 0.9); }

/* ════════════════════════════════════════════════════════════════
   ICONOS DE CONSUMIBLES (SVG)
   ════════════════════════════════════════════════════════════════ */

.emp-ico-escudo, .emp-ico-pocion { width: 100%; height: 100%; overflow: visible; }
.emp-esc-fondo  { fill: #2a6bff; stroke: #bfe2ff; stroke-width: 2.5; stroke-linejoin: round; }
.emp-esc-brillo { fill: rgba(255, 255, 255, 0.16); }
.emp-esc-llama  { fill: #ffb347; filter: drop-shadow(0 0 4px #ff8a00); animation: emp-vela 2.2s ease-in-out infinite; }
.emp-poc-cristal { fill: rgba(220, 240, 255, 0.18); stroke: #d9f2ff; stroke-width: 2.4; stroke-linejoin: round; }
.emp-poc-liquido { fill: #a96ae7; filter: drop-shadow(0 0 6px #c98bff); }
.emp-poc-burbuja { fill: #f3dcff; animation: emp-burbuja 2.4s ease-in infinite; }
.emp-poc-burbuja.u2 { animation-delay: 0.8s; }
.emp-poc-burbuja.u3 { animation-delay: 1.5s; }
.emp-poc-x2 { font: 900 10px/1 "Orbitron", sans-serif; fill: #fff; }
@keyframes emp-burbuja {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   MINIATURAS (tarjetas de la tienda, inventario, gestor)
   ════════════════════════════════════════════════════════════════ */

.emp-vista {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.emp-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 46%;
  max-width: 96px;
  aspect-ratio: 1;
  /* Sin esto, una caja con aspect-ratio crece hasta lo que mida su
     contenido: una foto de perfil vertical la estiraba en un óvalo. */
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
}
.emp-foto {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* La foto llena la caja redonda sin opinar sobre su tamaño */
.emp-avatar > .emp-foto { position: absolute; inset: 0; }
.emp-foto-iniciales {
  display: grid;
  place-items: center;
  background: var(--pl-grad);
  color: #12001f;
  font: 900 1.1rem/1 var(--font-heading, "Orbitron", sans-serif);
}

.emp-vista-titulo {
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0.35rem;
  padding: 0 0.8rem;
  text-align: center;
}
.emp-placa-nombre {
  font: 800 1rem/1.2 "Nunito", sans-serif;
  color: var(--pl-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-placa-nombre::before { content: "@"; opacity: 0.55; }
.emp-vista-titulo .emp-titulo { font-size: 0.8rem; }

/* Una tarjeta de la galería en miniatura, para las auras */
.emp-mini-tarjeta {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 62%;
  max-width: 150px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pl-panel);
  border: 1px solid var(--pl-border);
}
.emp-mini-portada {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(141, 238, 255, 0.18), rgba(229, 89, 177, 0.18));
}
.emp-mini-titulo {
  padding: 0.3rem 0.5rem 0.4rem;
  font: 800 0.66rem/1.2 "Nunito", sans-serif;
  color: var(--pl-text);
}

/* Un sitio en miniatura, para los temas. Las variables de la paleta
   las pone el JS en el propio .emp-vista-tema: no tocan la página. */
.emp-vista-tema {
  --ms-fondo: var(--emp-fondo, #07060d);
  --ms-texto: var(--emp-texto, #f8f2ff);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  place-items: stretch;
  gap: 6%;
  padding: 7% 8%;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, var(--emp-a4-14, transparent), transparent 45%),
    radial-gradient(circle at 92% 18%, var(--emp-a2-14, transparent), transparent 50%),
    var(--ms-fondo);
  color: var(--ms-texto);
}
.emp-ms-nav { display: flex; gap: 6%; height: 7px; }
.emp-ms-nav i { flex: 1; border-radius: 4px; background: var(--emp-borde, rgba(255, 255, 255, 0.15)); }
.emp-ms-nav i:first-child { flex: 2; background: var(--emp-a1, #8deeff); }
.emp-ms-hero { display: grid; gap: 4px; }
.emp-ms-hero b { height: 9px; width: 70%; border-radius: 4px; background: linear-gradient(90deg, var(--emp-a1, #8deeff), var(--emp-a3, #a96ae7), var(--emp-a4, #e559b1)); }
.emp-ms-hero em { height: 5px; width: 50%; border-radius: 4px; background: var(--emp-tenue, #bba9df); opacity: 0.7; }
.emp-ms-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.emp-ms-tarjetas i { border-radius: 6px; min-height: 26px; background: var(--emp-panel, rgba(255, 255, 255, 0.06)); border: 1px solid var(--emp-borde, rgba(255, 255, 255, 0.12)); }
.emp-ms-boton { justify-self: start; width: 38%; height: 10px; border-radius: 999px; background: var(--emp-a2, #7f99ff); box-shadow: 0 0 10px -2px var(--emp-a2, #7f99ff); }

/* Puzzleween en miniatura: sus propios colores, fijos */
.emp-vista-pw {
  --emp-fondo: #0b0612; --emp-texto: #ffe8c8; --emp-a1: #ff9c33; --emp-a2: #b46cff;
  --emp-a3: #7b2cbf; --emp-a4: #ff6a00; --emp-borde: rgba(255, 156, 51, 0.25);
  --emp-panel: rgba(30, 14, 40, 0.9); --emp-tenue: #c7a98a;
  --emp-a4-14: rgba(255, 106, 0, 0.22); --emp-a2-14: rgba(180, 108, 255, 0.2);
}

/* Los fondos animados, en miniatura */
.emp-vista-tema[data-emp-fx="rejilla"] { background-image:
    linear-gradient(var(--emp-a1-16, transparent) 1px, transparent 1px),
    linear-gradient(90deg, var(--emp-a1-16, transparent) 1px, transparent 1px);
  background-size: 14px 14px; background-color: var(--ms-fondo); }
.emp-vista-tema[data-emp-fx="scanlines"] { background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
  background-color: var(--ms-fondo); }
.emp-vista-tema[data-emp-fx="lluvia"] { background-image:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--emp-a1-16, transparent) 9px 10px);
  background-color: var(--ms-fondo); }
.emp-vista-tema[data-emp-fx="estrellas"] { background-image:
    radial-gradient(1px 1px at 20% 30%, var(--ms-texto), transparent),
    radial-gradient(1px 1px at 70% 60%, var(--ms-texto), transparent),
    radial-gradient(1px 1px at 45% 85%, var(--ms-texto), transparent);
  background-color: var(--ms-fondo); }

.emp-vista-consumible { padding: 16%; }
.emp-vista-consumible svg { max-height: 100%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55)); }

/* ── Tema claro: los colores de las placas están pensados para fondo
   oscuro; sobre blanco, un azul de rareza rara apenas llega a 2:1.
   Se oscurece la placa entera (texto y fondo) hasta que se lea. ── */
body.theme-light .emp-titulo { filter: brightness(0.62) saturate(1.35); }
body.theme-light .emp-t-glitch { filter: none; background: #1d1430; }

/* ── Tema píxel: esquinas rectas ── */
body.theme-pixel .emp-titulo,
body.theme-pixel .emp-mini-tarjeta,
body.theme-pixel .emp-vista-tema { border-radius: 0; }

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .emp-marco::before, .emp-marco *, .emp-m-aguja,
  .emp-titulo, .emp-titulo *, .emp-titulo::before, .emp-titulo::after,
  .emp-aura, .emp-aura-capa, .emp-aura-capa::before,
  .emp-ico-escudo *, .emp-ico-pocion * {
    animation: none !important;
  }
  .emp-t-brillo::after { display: none; }
  .emp-brasa { display: none; }
}
body.perf-low .emp-t-brillo::after,
body.perf-low .emp-brasa { display: none; }