/* =========================================
   FEED: Últimas entradas de TODOS los apartados
   Cada tipo conserva la forma de su sección
   ========================================= */

.recent-feed {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
}

/* Todas las tarjetas del feed comparten alto y se elevan al hover */
.feed-card {
  min-height: 118px;
  transition: transform 0.15s ease;
}

.feed-card:hover {
  transform: translateY(-5px);
  z-index: 2;
}

.feed-kind {
  font-family: var(--font-hud);
  font-size: 0.42rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.feed-name {
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  line-height: 1.05;
}

/* --- ARTE: diapositiva enmarcada física (marco de plástico
   con bisel + borde de luz de rareza), no neón plano --- */
.feed-art {
  --ia: var(--rgb-cyan);
  background: linear-gradient(160deg, #3a3350 0%, #241f38 60%, #1b1730 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 -3px 5px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(var(--ia), 0.6),
    0 6px 14px rgba(0, 0, 0, 0.5);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  text-decoration: none;
  width: 132px;
}

.feed-art.rarity-comun      { --ia: var(--rgb-blue); }
.feed-art.rarity-raro       { --ia: var(--rgb-cyan); }
.feed-art.rarity-epico      { --ia: var(--rgb-purple); }
.feed-art.rarity-legendario { --ia: var(--rgb-yellow); }
.feed-art.rarity-maldito    { --ia: var(--rgb-red); }

.feed-art .feed-kind { color: rgb(var(--ia)); }

.feed-art-thumb {
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--ia), 0.18), transparent 70%),
    linear-gradient(180deg, #15101f, #0c0a16);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 1px rgba(var(--ia), 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.6);
  color: rgba(var(--ia), 0.7);
  display: flex;
  flex-grow: 1;
  font-size: 1.4rem;
  justify-content: center;
  min-height: 54px;
  overflow: hidden;
}

.feed-art-thumb img {
  height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
  width: 100%;
}

/* --- ARCADE: eco del cartucho (gris moldeado + muescas + etiqueta) --- */
.feed-cart {
  background: linear-gradient(160deg, #524a62 0%, #332c44 60%, #251f36 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 6px 14px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 9px 9px;
  text-decoration: none;
  width: 138px;
}

.feed-cart .feed-kind { color: var(--pastel-yellow); }

.feed-cart::before {
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 5px, rgba(255, 255, 255, 0.07) 5px 7px, transparent 7px 12px);
  border-radius: 2px;
  content: "";
  height: 6px;
}

.feed-cart-label {
  background: linear-gradient(175deg, rgba(var(--rgb-yellow), 0.4), rgba(var(--rgb-yellow), 0.16)), #221c33;
  border-radius: 3px;
  color: var(--text);
  flex-grow: 1;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  line-height: 1.1;
  padding: 8px;
}

/* --- CRÓNICA: eco de la mesa de rol (morado + gema hexagonal) --- */
.feed-cronica {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: rgba(var(--rgb-purple), 0.12);
  border: 2px solid var(--neon-purple);
  clip-path: var(--clip-panel);
  color: var(--text);
  display: flex;
  filter: drop-shadow(0 0 6px rgba(var(--rgb-purple), 0.4));
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  padding: 10px;
  text-decoration: none;
  width: 132px;
}

.feed-cronica .feed-kind { color: var(--pastel-purple); }

.feed-cronica::after {
  background-color: rgba(var(--rgb-purple), 0.3);
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  content: "d20";
  font-family: var(--font-hud);
  font-size: 0.45rem;
  padding: 10px 0;
  text-align: center;
  width: 38px;
}