/* ==========================================================================
   MACRO REBORN — FICHA DE JUEGO
   Usa los tokens y componentes de css/inicio.css (:root, .navbar, .eyebrow,
   .pie-footer, .boton, etc.). Este archivo cubre lo específico de juego.html.
   ========================================================================== */

.mr-root {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ==========================================================================
   NAVBAR
   Ya no necesita nada especial acá: usa el layout estándar de 2 filas
   de css/inicio.css (el mismo que el resto del sitio). La versión vieja
   de este bloque centraba el buscador a mano con position:absolute
   pensada para cuando .nav-links quedaba vacío; con .nav-categorias
   ese caso ya no existe, así que se sacó para no pisar el layout nuevo.
   ========================================================================== */


.contenido-principal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 70px;
}

.migas {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13.5px;
  margin-bottom: 26px;
}

.migas a {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.migas a:hover {
  color: var(--gold-bright);
}

/* ==========================================================================
   FICHA
   ========================================================================== */

.detalle-juego {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 40px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
  border: 3px solid var(--clasico-borde);
  border-radius: var(--clasico-radio);
  padding: 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  text-align: left;
  overflow: hidden;
}

.detalle-juego::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 500px 300px at 0% 0%, rgba(240, 180, 41, 0.1), transparent 60%);
  pointer-events: none;
}

/* ---- Portada ---- */

.juego-grande {
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 110px;
  background: radial-gradient(circle at 50% 40%, rgba(240, 180, 41, 0.14), rgba(0, 0, 0, 0.3) 75%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(240, 180, 41, 0.08);
}

.juego-grande::after {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.8;
}

/* ---- Info ---- */

.detalle-juego-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.nombre-juego {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 14px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.detalle-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.categoria-juego,
.estado-juego {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.categoria-juego:empty,
.estado-juego:empty,
.jugadores-juego:empty {
  display: none;
}

.categoria-juego {
  background: rgba(56, 189, 248, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.estado-juego {
  background: rgba(240, 180, 41, 0.14);
  color: var(--gold-bright);
  border: 1px solid rgba(240, 180, 41, 0.35);
}

.descripcion-juego {
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 30px;
  max-width: 60ch;
}

.detalle-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
}

/* Botón Jugar: la acción principal, debe destacar */
.boton-jugar {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 17px;
  padding: 16px 40px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 10px 26px rgba(240, 180, 41, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.boton-jugar:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 32px rgba(240, 180, 41, 0.48);
}

.boton-jugar:active {
  transform: translateY(-1px) scale(0.99);
}

/* Botón de favoritos */
.boton-favorito {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 26px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-main);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.boton-favorito:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* Estado "ya en favoritos" (favoritos.js cambia solo el texto,          */
/* pero si en el futuro agrega una clase, queda preparado visualmente).  */
.boton-favorito.activo,
.boton-favorito[data-activo="true"] {
  background: rgba(240, 180, 41, 0.14);
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 780px) {
  .detalle-juego {
    grid-template-columns: 1fr;
    padding: 26px;
    gap: 26px;
  }

  .juego-grande {
    height: 190px;
    font-size: 80px;
  }

  .detalle-acciones {
    flex-direction: column;
  }

  .boton-jugar,
  .boton-favorito {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .contenido-principal {
    padding: 32px 16px 50px;
  }

  .detalle-juego {
    padding: 20px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   PANEL: CALIFICACIÓN (⭐) + LIKE / NO ME GUSTA (❤️/👎)
   ========================================================================== */

.panel-valoracion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 26px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
  border: 3px solid var(--clasico-borde);
  border-radius: var(--clasico-radio);
  padding: 30px 36px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.panel-subtitulo {
  font-family: var(--clasico-fuente);
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--clasico-borde);
  margin: 0 0 16px;
}

.reacciones-bloque {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}

/* ---- Promedio (solo lectura, estrellas superpuestas con relleno %) ---- */

.valoracion-promedio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.estrellas-promedio {
  position: relative;
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 3px;
}

.estrellas-fondo {
  color: rgba(255, 255, 255, 0.14);
}

.estrellas-relleno {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 0%;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(240, 180, 41, 0.35));
  transition: width 0.25s ease;
}

.valoracion-numero {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-main);
}

.valoracion-cantidad {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Calificación propia (interactiva) ---- */

.valoracion-usuario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.valoracion-usuario-label {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.calificacion-estrellas {
  display: inline-flex;
  gap: 4px;
}

.estrella {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 2px;
  color: rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, color 0.12s ease;
}

.estrella:hover {
  transform: scale(1.18);
}

.estrella.activa,
.estrella.preview {
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(240, 180, 41, 0.4));
}

/* ---- Like / No me gusta ---- */

.reacciones-juego {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.boton-reaccion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-main);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.boton-reaccion:hover {
  transform: translateY(-3px);
}

.reaccion-contador {
  font-family: var(--font-display);
  font-size: 13px;
  opacity: 0.85;
}

.boton-like:hover,
.boton-like.activo {
  border-color: var(--green);
  color: var(--success-light);
  background: rgba(34, 197, 94, 0.12);
}

.boton-dislike:hover,
.boton-dislike.activo {
  border-color: var(--danger);
  color: var(--danger-light);
  background: rgba(239, 68, 68, 0.12);
}

/* ==========================================================================
   PANEL: RESEÑAS (📝)
   ========================================================================== */

.panel-resenas {
  margin-top: 26px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
  border: 3px solid var(--clasico-borde);
  border-radius: var(--clasico-radio);
  padding: 30px 36px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.form-resena-label {
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 10px;
}

#formResenaEstrellas {
  margin-bottom: 14px;
}

.resena-textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 14px;
  line-height: 1.5;
  transition: border-color 0.15s ease;
}

.resena-textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form-resena-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.boton-publicar-resena {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14.5px;
  padding: 12px 26px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 8px 20px rgba(240, 180, 41, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.boton-publicar-resena:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(240, 180, 41, 0.42);
}

.boton-eliminar-resena {
  display: none;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--danger-light);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  transition: transform 0.18s ease;
}

.boton-eliminar-resena:hover {
  transform: translateY(-2px);
}

.resena-aviso {
  color: var(--text-muted);
  font-size: 14px;
  background: var(--bg-deep);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}

/* ---- Lista de reseñas ---- */

.lista-resenas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
}

.resenas-vacio {
  color: var(--text-muted);
  font-size: 14px;
}

.tarjeta-resena {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  padding: 18px 20px;
}

.tarjeta-resena.resena-propia {
  border-left-color: var(--cyan);
}

.resena-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

/* Antes era un círculo (border-radius:50%). Ahora usa el mismo marco
   cuadrado ornamentado con destellos en las esquinas que el resto de
   los avatares del sitio (ver la misma idea en css/perfil.css,
   .avatar-mini). ".resena-avatar-simple" (más abajo) es una <img>
   suelta -el avatar por defecto-, así que se queda solo con el marco
   cuadrado: los navegadores no generan contenido ::before/::after
   sobre <img>. */
.resena-avatar {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-base);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold-deep);
}

.resena-avatar::before,
.resena-avatar::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  filter: drop-shadow(0 0 2px rgba(240, 180, 41, .8));
  pointer-events: none;
  z-index: 2;
}
.resena-avatar::before { top: 1px; left: 1px; }
.resena-avatar::after { bottom: 1px; right: 1px; }

.capa-resena {
  /* FIX: se reemplaza el recorte "a mano" por zoom fijo (que dejaba el
     avatar corrido hacia abajo, fuera del círculo, según qué capas
     tuviera activas) por el mismo criterio que ya usa correctamente
     ".avatar-mini-conectado .capa-mini" en Comunidad (css/comunidad.css)
     y ".capa-chat" en el chat (css/chat.css): la capa ocupa el 100% del
     círculo, pegada arriba a la izquierda, con object-fit:cover. Así el
     avatar se ve igual acá que en Comunidad, sin importar la combinación
     de capas que tenga el usuario. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resena-avatar-simple {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold-deep);
}

.resena-datos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.resena-nombre {
  color: var(--gold-bright);
  font-size: 14.5px;
}

.resena-estrellas {
  font-size: 13px;
  letter-spacing: 1px;
}

.resena-estrella {
  color: rgba(255, 255, 255, 0.18);
}

.resena-estrella.llena {
  color: var(--gold);
}

.resena-fecha {
  color: var(--text-muted);
  font-size: 12px;
}

.resena-acciones-propias {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.boton-editar-resena,
.boton-borrar-resena {
  background: var(--bg-panel);
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.boton-editar-resena:hover {
  transform: translateY(-2px);
  color: var(--cyan);
  border-color: rgba(56, 189, 248, 0.4);
}

.boton-borrar-resena:hover {
  transform: translateY(-2px);
  color: var(--danger-light);
  border-color: rgba(239, 68, 68, 0.4);
}

.resena-texto {
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   RESPONSIVE — VALORACIÓN / RESEÑAS
   ========================================================================== */

@media (max-width: 780px) {
  .panel-valoracion {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 24px;
  }

  .reacciones-bloque {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 22px;
  }

  .panel-resenas {
    padding: 24px;
  }

  .resena-cabecera {
    flex-wrap: wrap;
  }

  .resena-acciones-propias {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .panel-valoracion,
  .panel-resenas {
    padding: 18px;
  }

  .form-resena-acciones {
    flex-direction: column;
  }

  .boton-publicar-resena,
  .boton-eliminar-resena {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .reacciones-juego {
    flex-direction: column;
  }

  .boton-reaccion {
    width: 100%;
    justify-content: center;
  }
}

/* Evita el zoom automático de Safari/iOS al escribir una reseña (se activa
   cuando un textarea tiene font-size menor a 16px). Solo aplica en mobile. */
@media (max-width: 768px) {
  .resena-textarea {
    font-size: 16px;
  }
}


/* ==========================================================================
   MÉTRICAS + RELACIONADOS — centro del juego
   ========================================================================== */
.juego-metricas{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin-top:18px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.juego-metrica{
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 16px;
  background:var(--bg-panel);
}
.juego-metrica>span{font-size:20px;}
.juego-metrica b{display:block;color:var(--text-main);font-size:16px;line-height:1.1;}
.juego-metrica small{display:block;margin-top:3px;color:var(--text-muted);font-size:10.5px;}
.juegos-relacionados{margin-top:36px;}
.juegos-relacionados-cabecera{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px;}
.juegos-relacionados-cabecera h2{margin:2px 0 0;font-family:var(--font-display);font-size:clamp(20px,3vw,28px);color:var(--text-main);}
.juegos-relacionados-cabecera a{color:var(--gold-bright);font-size:12.5px;font-weight:800;white-space:nowrap;}
.juegos-relacionados-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.juego-relacionado-card a{display:block;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--bg-panel);color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.juego-relacionado-card a:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 26px rgba(0,0,0,.24);}
.juego-relacionado-imagen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-deep);}
.juego-relacionado-imagen img{width:100%;height:100%;object-fit:cover;transition:transform .22s ease;}
.juego-relacionado-card a:hover .juego-relacionado-imagen img{transform:scale(1.05);}
.juego-relacionado-imagen>span{position:absolute;left:7px;right:7px;bottom:7px;padding:6px 10px;text-align:center;border-radius:999px;background:var(--gold);color:var(--text-on-accent);font-size:10px;font-weight:900;opacity:0;transform:translateY(4px);transition:.18s ease;}
.juego-relacionado-card a:hover .juego-relacionado-imagen>span{opacity:1;transform:translateY(0);}
.juego-relacionado-info{padding:9px 10px 11px;}
.juego-relacionado-info strong{display:block;color:var(--text-main);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.juego-relacionado-info small{display:block;margin-top:4px;color:var(--text-muted);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:900px){.juegos-relacionados-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:620px){.juego-metricas{grid-template-columns:repeat(2,minmax(0,1fr));}.juegos-relacionados-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.juegos-relacionados-cabecera{align-items:flex-start;}}


/* Descubrimiento editorial de la ficha */
.ficha-badges-extra { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ficha-tag { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.ficha-tag.trending { color: #ffb75d; border-color: rgba(255,183,93,.35); background: rgba(255,183,93,.08); }
.ficha-tag.popular { color: #ffe16b; border-color: rgba(255,225,107,.35); background: rgba(255,225,107,.08); }
.ficha-tag.nuevo { color: #7dd3fc; border-color: rgba(125,211,252,.35); background: rgba(125,211,252,.08); }
.ficha-tag.destacado { color: var(--gold-bright); border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.08); }
.juego-popularidad-linea { margin: -15px 0 26px; color: var(--text-muted); font-size: 13px; font-weight: 600; }


/* ========================================================================
   FLUJO DE DESCUBRIMIENTO — siguiente/anterior/categoría
   ======================================================================== */
.juego-flujo-navegacion{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px 24px;
  background:linear-gradient(180deg,var(--bg-panel),var(--bg-base));
  border:3px solid var(--clasico-borde);
  border-radius:var(--clasico-radio);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.juego-flujo-navegacion[hidden]{display:none!important;}
.flujo-contexto{display:flex;flex-direction:column;gap:4px;min-width:0;}
.flujo-contexto strong{font-family:var(--font-display);font-size:16px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.flujo-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.flujo-boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:9px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--text-main);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,color .16s ease,background .16s ease;
}
.flujo-boton:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold-bright);background:rgba(240,180,41,.08);}
.flujo-boton-principal{border-color:rgba(240,180,41,.4);color:var(--gold-bright);}
@media(max-width:700px){
  .juego-flujo-navegacion{align-items:flex-start;flex-direction:column;padding:18px;}
  .flujo-acciones{width:100%;justify-content:stretch;}
  .flujo-boton{flex:1 1 auto;}
}

/* ============================================================================
   FICHA DE JUEGO — capa de portal / descubrimiento (añadida sin reemplazar)
   ============================================================================ */
.ficha-badges-extra{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
.ficha-tag{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--bg-panel-alt);color:var(--text-secondary);font-size:10px;font-weight:800}
.ficha-tag.trending{border-color:rgba(240,180,41,.55);color:var(--gold-bright)}
.ficha-tag.popular{border-color:rgba(56,189,248,.4);color:var(--cyan)}
.ficha-tag.nuevo{border-color:rgba(53,212,136,.4);color:var(--green)}
.juego-metricas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0 8px}
.juego-metricas span{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-panel);text-align:center}
.juego-metricas b{display:block;color:var(--text-main);font-size:12px}
.juego-metricas small{display:block;margin-top:2px;color:var(--text-muted);font-size:9px}
.juego-popularidad{margin:6px 0 0;color:var(--text-muted);font-size:11px}
.panel-relacionados{margin-top:24px;padding:20px;background:linear-gradient(145deg,var(--bg-panel),var(--bg-base));border:1px solid var(--line);border-radius:14px}
.panel-relacionados[hidden]{display:none}
.panel-relacionados-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-relacionados-cabecera h2{margin:3px 0 0;font-family:var(--font-display);font-size:20px;color:var(--text-main)}
.juego-flujo{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.juego-flujo a{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg-base);color:var(--text-secondary);font-size:10px;font-weight:800}
.juego-flujo a:hover{border-color:var(--gold);color:var(--gold-bright)}
.juegos-relacionados-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.juego-relacionado-card{min-width:0}
.juego-relacionado-card a{display:block;overflow:hidden;height:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg-base);color:inherit;text-decoration:none}
.juego-relacionado-card a:hover{border-color:var(--gold);transform:translateY(-2px)}
.juego-relacionado-imagen{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-panel-alt)}
.juego-relacionado-imagen img{width:100%;height:100%;object-fit:cover}
.juego-relacionado-imagen span{position:absolute;right:6px;bottom:6px;padding:4px 7px;border-radius:999px;background:var(--gold);color:var(--text-on-accent);font-size:8px;font-weight:900}
.juego-relacionado-info{padding:8px}
.juego-relacionado-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-main);font-size:10px}
.juego-relacionado-info small{display:block;margin-top:3px;color:var(--text-muted);font-size:8.5px}
@media(max-width:980px){.juegos-relacionados-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.juego-metricas{grid-template-columns:1fr 1fr}.juego-metricas span:last-child{grid-column:1/-1}.panel-relacionados-cabecera{align-items:flex-start;flex-direction:column}.juego-flujo{justify-content:flex-start}.juegos-relacionados-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}