/* =========================
   THEME VARIABLES
========================= */

:root {
  --bg: #0e1116;
  --panel: #1b1f26;
  --text: #e5e7eb;
  --muted: #9aa4b2;
  --purple: #9146ff;
  --black: #000000;
  --white: #ffffff;
  --layout-width: 1240px;
  --content-width: 1305px; /* ⬅️ un poco más ancho solo abajo */
  --box-bg: #3a3f46; /* dark */
  --btn-secondary-bg: #000000;
  --btn-secondary-text: #ffffff;
  --btn-secondary-bg-disabled: #0e1116;
  --nav-bg: #2b2f36;
  --nav-border: rgba(255,255,255,.08);
  --link: #e5e7eb;        /* blanco suave en dark */
  --link-hover: #ffffff;
}

/* LIGHT MODE OVERRIDES */
html[data-theme="light"] {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --box-bg: #ffffff;
  --btn-secondary-bg: #070707;
  --btn-secondary-text: #ffffff;
  --btn-secondary-bg-disabled: #000000;
  --nav-bg: #ffffff;
  --nav-border: rgba(0,0,0,.08);
  --link: #111827;       /* negro */
  --link-hover: #000000;
}


/* =========================
   GLOBAL
========================= */


a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}



/* =====================================
   PAGE WIDE – SOLO PARA FICHA DE JUEGO
===================================== */

.page-wide {
  max-width: none;        /* rompe el límite global */
  padding-left: 0;
  padding-right: 0;
}


* {
  box-sizing: border-box;
  font-family: Inter, system-ui, sans-serif;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

/* =========================
   HEADER / TOP BAR
========================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #2a2e35;
}

html[data-theme="light"] .topbar {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LEFT */
.left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 26px;
  width: auto;
  display: block;
}

.user-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text); /* ya lo usas */
}

html[data-theme="dark"] .user-link {
  color: #fff;
}

html[data-theme="light"] .user-link {
  color: #000;
}

.user-icon {
  flex-shrink: 0;
}


/* =========================
   LOGO DARK / LIGHT
========================= */

/* Por defecto (dark) */
.logo img {
  content: url("https://noobs.es/img/ndenoobs-blanca.png");
}

/* Light mode */
html[data-theme="light"] .logo img {
  content: url("https://noobs.es/img/ndenoobs-negra.png");
}


/* MENU */
.menu {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
}

/* SEARCH */
.center input {
  width: 360px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #1c1f25;
  border: none;
  color: white;
}

html[data-theme="light"] .center input {
  background: #f3f4f6;
  color: #111827;
}

/* LOGIN */
.login {
  background: var(--purple);
  border: none;
  color: white;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 600;
}

/* PURPLE LINE */
.purple-line {
  height: 4px;
  background: var(--black);
}

/* =========================
   PAGE WRAPPER
========================= */

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* =========================
   SLIDER
========================= */

.slider {
  position: relative;
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.slider-track {
  display: flex;
  height: 100%;
  transition: transform .6s ease;
}

.slide {
  min-width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  transform: translateZ(0);
  transition: transform .5s ease;
}

/* Overlay */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.78),
    rgba(0,0,0,.25),
    transparent
  );
}

html[data-theme="light"] .slide::after {
  background: linear-gradient(
    to right,
    rgba(255,255,255,.88),
    rgba(255,255,255,.45),
    transparent
  );
}

/* Hover fino */
.slide:hover {
  transform: scale(1.015);
}

/* =========================
   CONTENT
========================= */

.slide-content {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 2;
  max-width: 440px;
}

.slide-content h2 {
  font-size: 34px;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* META */
.meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* =========================
   SCORE (BADGE NOTA – GLOBAL)
========================= */

.score {
  min-width: 36px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  border-radius: 8px;

  background: rgba(0,0,0,.5);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #9aa4b2;

  box-sizing: border-box;
  flex-shrink: 0;

  transition:
    border-color .25s ease,
    color .25s ease,
    background-color .25s ease;
}

/* =========================
   ESTADOS DE NOTA
========================= */

.score.green {
  color: #22c55e;
  border-color: #22c55e;
  background: rgba(34,197,94,.12);
}

.score.orange {
  color: #f59e0b;
  border-color: #f59e0b;
  background: rgba(245,158,11,.12);
}

.score.red {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239,68,68,.12);
}

.score.na {
  color: #9aa4b2;
  border-color: #9aa4b2;
  background: rgba(156,163,175,.12);
}

/* =========================
   LIGHT MODE
========================= */

html[data-theme="light"] .score {
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.15);
  color: #6b7280;
}

/* Estados en light */
html[data-theme="light"] .score.green {
  color: #16a34a;
  border-color: #16a34a;
  background: rgba(22,163,74,.12);
}

html[data-theme="light"] .score.orange {
  color: #d97706;
  border-color: #d97706;
  background: rgba(217,119,6,.12);
}

html[data-theme="light"] .score.danger {
  color: #dc2626;
  border-color: #dc2626;
  background: rgba(220,38,38,.12);
}

html[data-theme="light"] .score.na {
  color: #6b7280;
  border-color: #6b7280;
  background: rgba(107,114,128,.12);
}

/* =========================
   AJUSTE FINO EN GRIDS
   (géneros, listados, comunidad)
========================= */

.best-games-grid .score,
.user-review-card .score {
  background: rgba(0,0,0,.45);
}

html[data-theme="light"] .best-games-grid .score,
html[data-theme="light"] .user-review-card .score {
  background: rgba(255,255,255,.95);
}


/* =========================
   SLIDER PLATFORMS
========================= */

.platform-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.platform-pill {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.15);
}

html[data-theme="light"] .platform-pill {
  background: rgba(255,255,255,.85);
  color: #111827;
  border-color: rgba(0,0,0,.1);
}



/* =========================
   NAV
========================= */

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  border: none;
  color: white;
  font-size: 26px;
  cursor: pointer;
  z-index: 3;
}

.prev { left: 10px; }
.next { right: 10px; }



/* =========================
   BLOCKS
========================= */

.block {
  margin-top: 40px;
}

.title {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 16px;
}



/* =========================
   OVERLAY TEXT – COLOR BASE
========================= */

/* Slider */
.slide-content,
.slide-content * {
  color: var(--text);
}

/* Critics */
.critic-overlay,
.critic-overlay * {
  color: var(--text);
}

/* Review cards (percentajes, labels) */
.review-content,
.review-content * {
  color: var(--text);
}

/* =========================
   POPULAR RIGHT NOW
========================= */

.cards {
  display: flex;
  gap: 20px;
  width: 100%;
}

.card {
  position: relative; /* 🔑 para badge absoluto */
  flex: 1 1 calc(100% / 6);
  max-width: calc(100% / 6);
  background: var(--panel);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html[data-theme="light"] .card {
  border: 1px solid #e5e7eb;
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.card:hover img {
  transform: scale(1.05);
}

/* =========================
   INFO
========================= */

.info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.info b {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   META INFERIOR (SOLO PLATAFORMAS)
========================= */

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

/* =========================
   PLATAFORMAS
========================= */

.platform-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.platform-badge {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: #2b2f36;
  color: #e5e7eb;
  line-height: 1;
}

html[data-theme="light"] .platform-badge {
  background: #e5e7eb;
  color: #111827;
}

/* =========================
   NOTA – BADGE FLOTANTE (CLAVE)
========================= */

.card .badge-noobs1 {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0 8px;
  min-width: 34px;
  height: 24px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;

  background: rgba(0,0,0,.75); /* 👈 fondo negro */
  backdrop-filter: blur(4px);

  color: #ffffff;
  border: 1px solid rgba(255,255,255,.25);

  z-index: 2;
}

/* Estados por nota (solo borde) */
.card .badge-noobs1.success {
  border-color: #22c55e;
}

.card .badge-noobs1.warning {
  border-color: #f59e0b;
}

.card .badge-noobs1.danger {
  border-color: #ef4444;
}

/* N/A */
.card .na {
  position: absolute;
  top: 10px;
  right: 10px;

  min-width: 36px;
  height: 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 600;

  color: #cbd5f5;
  background: rgba(0,0,0,.6);
  border-radius: 8px;
}



/* =========================
   USER SCORE BADGE index.php
========================= */

.badge-user {
  min-width: 34px;
  height: 24px;
  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  border-radius: 6px;
  background: #000;
  border: 1px solid rgba(255,255,255,.2);
  color: #e5e7eb;

  flex-shrink: 0;
}

.badge-user.success { border-color: #22c55e; }
.badge-user.warning { border-color: #f59e0b; }
.badge-user.danger  { border-color: #ef4444; }

html[data-theme="light"] .badge-user {
  color: #000;
  background: #fff;
}

/* =========================
   USER REVIEW PILL
========================= */

.pill-user-review {

background-color: #0e1116 !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 4px 10px;
  font-size: 11px;

  border-radius: 999px;

  color: var(--muted);

  white-space: nowrap;
}

html[data-theme="light"] .pill-user-review {
  background: #e5e7eb;
  color: #111827;
}



/* =========================
   RECENTLY REVIEWED
========================= */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.review-card {
  color: #e5e7eb; /* en vez de gris apagado */
  display: flex;
  background: #3a4048;
  border-radius: 6px;
  overflow: hidden;
}

html[data-theme="light"] .review-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.review-cover {
  width: 120px;
  height: 180px;
  object-fit: cover;
}

.review-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-title {
  color: #e6e8ff;
  font-weight: 600;
  text-decoration: none;
}

html[data-theme="light"] .review-title,
html[data-theme="light"] .username {
  color: #000000;
}

.review-title:hover {
  text-decoration: underline;
}

.platform {
  font-size: 12px;
  color: #cbd5f5;
}

html[data-theme="light"] .platform {
  color: #6b7280;
}

.review-text {
  font-size: 14px;
  line-height: 1.4;
  margin: 10px 0;
  color: #e5e7eb;
}

html[data-theme="light"] .review-text {
  color: #374151;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.username {
  font-size: 13px;
}


.review-meta {
  font-size: 13px;
  color: #d1d5db;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;             /* evita empujes raros */

}


html[data-theme="light"] .review-meta {
  color: #6b7280;
}

.review-meta .heart {
  color: #ef4444;
}

.review-meta .star {
  color: #22c55e;
}



/* =========================
   CRITICS REVIEWS GRID
========================= */

.critics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 160px;
  gap: 16px;
}

/* =========================
   CARD BASE
========================= */

.critic-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transform: translateZ(0);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* Grande */
.critic-card.big {
  grid-column: span 2;
  grid-row: span 2;
}

/* =========================
   OVERLAY
========================= */

.critic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88),
    rgba(0,0,0,.35),
    transparent
  );
  transition: opacity .3s ease;
}

html[data-theme="light"] .critic-card::after {
  background: linear-gradient(
    to top,
    rgba(255,255,255,.92),
    rgba(255,255,255,.55),
    transparent
  );
}

/* =========================
   CONTENT
========================= */

.critic-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
}

.critic-overlay h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.critic-overlay span {
  font-size: 13px;
  color: #cbd5f5;
}

html[data-theme="light"] .critic-overlay span {
  color: #374151;
}

/* NOTA */
.critic-overlay .score {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 34px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;

  background: rgba(0,0,0,.65);
  border: 1px solid #22c55e;
  color: #22c55e;
}

/* =========================
   HOVER (FINO, NO EXAGERADO)
========================= */

.critic-card:hover {
  transform: scale(1.015);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.critic-card:hover::after {
  opacity: .9;
}

.critic-card:hover .score {
  background: #22c55e;
  color: #000;
}




/* =========================
   THEME TOGGLE SWITCH
========================= */

.theme-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin-right: 14px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-toggle {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #111827; /* dark */
  border-radius: 999px;
  transition: background .25s ease;
}

.slider-toggle::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform .25s ease;
}

/* CHECKED (LIGHT MODE) */
.theme-switch input:checked + .slider-toggle {
  background: #e5e7eb;
}

.theme-switch input:checked + .slider-toggle::before {
  transform: translateX(22px);
}

/* LIGHT MODE REFINES */
html[data-theme="light"] .slider-toggle {
  background: #d1d5db;
}

html[data-theme="light"] .theme-switch input:checked + .slider-toggle {
  background: #9ca3af;
}


/* =========================
   FOOTER IGDB STYLE
========================= */

.footer-igdb {
  margin-top: 60px;
  padding: 30px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

html[data-theme="light"] .footer-igdb {
  border-top: 1px solid #e5e7eb;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.footer-links {
  font-size: 13px;
  color: var(--muted);
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-links span {
  margin: 0 6px;
}

.footer-copy {
  font-size: 13px;
  color: var(--muted);
}

.footer-copy a {
  color: var(--text);
  text-decoration: none;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}

.footer-social a {
  color: var(--muted);
  font-size: 18px;
  transition: color .2s ease;
}

.footer-social a:hover {
  color: var(--purple);
}

/* =========================
   COOKIE BANNER
========================= */

.cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  color: #e5e7eb;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

.cookie-banner a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 500;
}

.cookie-banner button {
  background: var(--purple);
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}



/* =========================
   TOPBAR ONE-ROW LAYOUT
========================= */

.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

/* =========================
   LEFT
========================= */

.left {
  display: flex;
  align-items: center;
}

.logo img {
  height: 26px;
  width: auto;
  display: block;
}

/* =========================
   CENTER SEARCH
========================= */

.center {
  display: flex;
  justify-content: center;
}

.center input {
  width: 100%;
  max-width: 520px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #1c1f25;
  border: none;
  color: white;
}

/* Light mode */
html[data-theme="light"] .center input {
  background: #f3f4f6;
  color: #111827;
}

/* =========================
   RIGHT (TOGGLE + MENU)
========================= */

.right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================
   MENU BUTTON
========================= */

.menu {
  background: none;
  border: none;
  color: inherit;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

/* =========================
   DROPDOWN MENU
========================= */

.topbar-menu {
  position: absolute;
  top: 100%;
  right: 20px;
  margin-top: 10px;
  background: var(--panel);
  border-radius: 8px;
  padding: 12px;
  min-width: 200px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: none;
  z-index: 999;
}

.topbar-menu.open {
  display: block;
}

/* ITEMS */
.topbar-menu .menu-item {
  display: block;            /* 👈 CLAVE */
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.topbar-menu .menu-item:hover {
  background: rgba(145,70,255,.15);
  border-radius: 6px;
}


/* ==================================================
   AUTH SOLO EN MENÚ HAMBURGUESA (MÓVIL)
================================================== */

/* Desktop: fuera del dropdown */
@media (min-width: 769px) {
  .topbar-menu .menu-auth {
    display: none;
  }
}

/* Móvil: auth solo en menú hamburguesa */
@media (max-width: 768px) {
  .right .btn-header,
  .right .btn-header-outline,
  .right .user-name {
    display: none;
  }
}


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

@media (max-width: 768px) {

  .logo img {
    height: 22px;
  }

  .center input {
    max-width: 100%;
  }
}


@media (max-width: 1200px) {
  .card {
    flex: 1 1 calc(100% / 4);
    max-width: calc(100% / 4);
  }
}

@media (max-width: 900px) {
  .card {
    flex: 1 1 calc(100% / 3);
    max-width: calc(100% / 3);
  }
}

@media (max-width: 600px) {
  .card {
    flex: 1 1 calc(100% / 2);
    max-width: calc(100% / 2);
  }
}


/* ==========================================================
   MOBILE CONTENT FIX (SAFE PATCH)
   NO ROMPE DESKTOP
========================================================== */

@media (max-width: 768px) {

  /* =========================
     POPULAR RIGHT NOW
  ========================= */

  .cards {
    gap: 12px;
  }

  .card img {
    height: 180px; /* menos alta en móvil */
  }

  .info {
    padding: 10px;
  }

  .info b {
    font-size: 14px;
    line-height: 1.2;
    display: block;
    margin-bottom: 4px;
  }

  .info span,
  .info em {
    font-size: 12px;
  }

  /* =========================
     RECENTLY REVIEWED
  ========================= */

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .review-card {
    flex-direction: row;
  }

  .review-cover {
    width: 90px;
    height: 130px;
    flex-shrink: 0;
  }

  .review-content {
    padding: 10px 12px;
  }

  .review-title {
    font-size: 14px;
    line-height: 1.3;
  }

  .review-text {
    font-size: 13px;
    line-height: 1.4;
    margin: 6px 0;
  }

  .review-meta {
    font-size: 11px;
    gap: 8px;
  }

  .username {
    font-size: 12px;
  }
}

@media (max-width: 768px) {

  /* =========================
     POPULAR RIGHT NOW (MOBILE)
  ========================= */

  .cards {
    display: flex;
    flex-wrap: nowrap;          /* clave */
    overflow-x: auto;           /* scroll horizontal */
    gap: 12px;
    padding-bottom: 6px;
  }

  .cards::-webkit-scrollbar {
    display: none;              /* limpio tipo app */
  }

  .card {
    flex: 0 0 140px;            /* ancho fijo móvil */
    max-width: 140px;
  }

  .card img {
    height: 200px;
  }

  .info {
    padding: 8px;
  }

  .info b {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 4px;
    display: block;
  }

  .info span,
  .info em {
    font-size: 12px;
  }
}

/* SIDEBAR */
.game-side {
  background: var(--panel);
  border-radius: 10px;
  padding: 16px;
}

.rating-main {
  font-size: 28px;
  font-weight: 700;
}

.rating-sub {
  margin-top: 10px;
  font-size: 22px;
}


/* =========================
   SIDEBAR – ÚLTIMOS VOTADOS
========================= */

.last-vote-item {
  display: grid;
  grid-template-columns: 1fr auto; /* título | meta */
  align-items: center;

  margin-bottom: 12px;
  padding: 6px 0;
  gap: 12px;
}

/* Título del juego */
.last-vote-item > a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

.last-vote-item > a:hover {
  text-decoration: underline;
}

/* Bloque usuario + nota */
.last-vote-meta {
  display: grid;
  grid-template-columns: auto auto; /* usuario | score */
  align-items: center;
  gap: 10px;

  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Usuario */
.last-vote-meta .user {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* =========================
   SIDEBAR – PATROCINADO
========================= */

.side-sponsored {
  padding: 0;               /* 🔥 rompe el padding del card */
  overflow: hidden;
}

/* Header normal */
.side-sponsored .side-header {
  padding: 14px 16px 10px;
}

/* Card clickable */
.sponsored-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Imagen FULL WIDTH real */
.sponsored-card img {
  width: 100%;
  height: auto;
  display: block;

  object-fit: contain;      /* 🔥 clave */
  background: #0e1116;      /* fondo neutro por si sobra espacio */
}


/* Texto vuelve a tener padding */
.sponsored-info {
  padding: 12px 16px 16px;
}

.sponsored-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.sponsored-meta {
  font-size: 13px;
  color: var(--muted);
}

/* Hover sutil, muy Noobs */
.sponsored-card:hover .sponsored-title {
  text-decoration: underline;
}



/* =========================
   BUTTONS
========================= */


.btn-primary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* Estado disabled */
.btn-secondary.is-disabled,
.btn-secondary:disabled {
  background: var(--btn-secondary-bg-disabled);
  opacity: 1;              /* evita gris lavado feo */
}

.full {
  width: 100%;
}


.report-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.report-link:hover {
  color: var(--text);
}



/* =========================
   REVIEW BUTTON – EDITORIAL
========================= */

.btn-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-weight: 600;
  letter-spacing: .2px;

  background: rgba(255,255,255,.04);
  color: #e5e7eb;

  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

.btn-review i {
  font-size: 13px;
  opacity: .85;
}

/* Hover */
.btn-review:hover:not(.is-disabled) {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Active */
.btn-review:active:not(.is-disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

/* Disabled */
.btn-review.is-disabled,
.btn-review:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* LIGHT MODE */
html[data-theme="light"] .btn-review {
  background: #f9fafb;
  color: #111827;
  border-color: #e5e7eb;
}

html[data-theme="light"] .btn-review:hover:not(.is-disabled) {
  background: #ffffff;
  border-color: #9ca3af;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}










/* TABS */
.game-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.game-tabs button {
  background: #3a4048;
  border: none;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.game-tabs button.active {
  background: var(--purple);
  color: #fff;
}





/* =========================
   HERO
========================= */

.game-hero {
  position: relative;
  width: 100%;
  max-width: var(--layout-width);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;

  background-size: cover;
  background-position: center;
}


.game-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.85),
    rgba(0,0,0,.65),
    rgba(0,0,0,.35)
  );
}

.game-hero-inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: 24px;
  padding: 24px;
  align-items: start;
}


/* =====================================
   ESPACIADO NAV EN FICHA DE JUEGO
===================================== */

.game-hero.is-ficha + .game-nav {
  margin-bottom: 24px; /* ajusta a 16 / 24 / 32 si quieres */
}


/* =========================
   HERO – SOLO FICHA
========================= */

/* En ficha NO queremos carátula */
.game-hero.is-ficha .game-cover {
  display: none;
}


/* Ficha: grid sin columna de carátula */
.game-hero.is-ficha .game-hero-inner {
  grid-template-columns: minmax(0, 1fr) 300px;
}

/* Video protagonista en ficha */
.game-hero.is-ficha .game-video {
  margin-bottom: 0;
}

.game-hero.is-ficha .video-js {
  border-radius: 12px;
}
/* Más altura visual */
.game-hero.is-ficha .video-js {
  aspect-ratio: 16 / 9;
}


/* =========================
    GAME NAV
========================= */

.game-header,
.game-nav {
  width: 100%;
  max-width: var(--layout-width);
  margin-left: auto;
  margin-right: auto;
}

.game-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.game-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.game-nav a {
  position: relative;
  padding: 16px 0;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  font-size: 15px;
}

.game-nav a:hover {
  color: #ffffff;
}

.game-nav a.active {
 color: var(--text);
}

.game-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 100%;
  height: 3px;
  background: #a970ff; /* tu morado */
  border-radius: 2px;
}

/* Botón Edit (derecha) */
.game-nav .edit-btn {
  margin-left: auto;
  padding: 6px 14px;

  border: 1px solid #a970ff;
  border-radius: 6px;

  color: #a970ff;
  font-size: 14px;
}

.game-nav .edit-btn:hover {
  background: rgba(169,112,255,.1);
}




/* =========================
   PAGE BASE (ROMPER LÍMITE GLOBAL)
========================= */

.page.game-page {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}


/* =========================
   CONTENIDO FICHA – MISMO ANCHO VISUAL
========================= */

/* BASE */
.game-content-wide {
  width: 100%;
  max-width: var(--content-width);
  margin: 10px auto 0;
}

/* FICHA (2 columnas) */
.game-content {
  margin: 0 auto;
  padding: 0 32px;

  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
}

/* ANALISIS – CONTENEDOR MÁS ESTRECHO */
.game-content-wide.is-analisis {
  max-width: 1305px; /* prueba 980 / 1040 */
}

/* ANALISIS – UNA SOLA COLUMNA */
.game-content.single-column {
  grid-template-columns: 1fr;
}




/* =========================
   ANALYSIS – CONCLUSION
========================= */

.analysis-conclusion {
  margin-top: 56px;
}

/* Título con más presencia */
.analysis-conclusion h2 {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
}

/* Caja editorial */
.analysis-conclusion-box {
  position: relative;

  padding: 28px 32px;
  border-radius: 14px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02)
  );

  border: 1px solid rgba(255,255,255,.08);

  font-size: 16px;
  line-height: 1.7;
}

/* Acento lateral Noobs (fino, no protagonista) */
.analysis-conclusion-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 4px;
  border-radius: 4px;
  background: var(--purple);
}

/* Separación entre párrafos */
.analysis-conclusion-box p + p {
  margin-top: 14px;
}

/* =========================
   LIGHT MODE
========================= */

html[data-theme="light"] .analysis-conclusion-box {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
}

html[data-theme="light"] .analysis-conclusion-box::before {
  background: var(--purple);
}


/* =========================
   NOOBS VOTE BOX 
========================= */

.noobs-vote-box {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--nav-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 28px 0 48px;
  position: relative;
}

/* solo un acento fino, nada protagonista */
.noobs-vote-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--purple);
  opacity: .85;
}

/* ajuste solo para dark */
html:not([data-theme="light"]) .noobs-vote-box {
  background: linear-gradient(
    180deg,
    #1b1f26 0%,
    #171b22 100%
  );
}


/* DARK MODE tweak */
html[data-theme="dark"] .noobs-vote-box {
  border-color: rgba(255,255,255,.08);
}

.noobs-vote-header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text);
}

.noobs-vote-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

/* Base button */
.vote-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.noobs-vote-box {
  border-left: 3px solid var(--purple);
}

/* Dark mode button border */
html[data-theme="dark"] .vote-btn {
  border-color: rgba(255,255,255,.18);
}

/* Hover (neutral) */
.vote-btn:hover {
  background: rgba(0,0,0,.04);
}

/* Dark hover */
html[data-theme="dark"] .vote-btn:hover {
  background: rgba(255,255,255,.06);
}

/* Active feedback */
.vote-btn:active {
  transform: scale(0.98);
}

/* YES – solo un hint, no protagonista */
.vote-btn.yes {
  border-style: solid;
}

/* NO – idéntico, sin color semántico fuerte */
.vote-btn.no {
  opacity: .85;
}

.noobs-vote-footer {
  font-size: 14px;
  color: var(--muted);
}

/* % destacado sin color chillón */
.noobs-vote-footer strong {
  color: var(--text);
  font-weight: 600;
}





/* MAIN PANEL */
.game-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.game-page {
  margin-top: 0px;
}


.game-main h1 {
  margin: 0 0 8px;
  font-size: 32px;
}

.game-meta {
  display: flex;
  gap: 14px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

.game-video {
  margin-bottom: 16px;
  align-self: start;
}

.game-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: none;
}

.game-description {
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}


.game-section {
  max-width: 900px;
  margin-bottom: 40px;
}

.game-section h2 {
  margin-bottom: 10px;
}


/*
.game-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: none;
}
*/


/* =========================
   COVER
========================= */

.game-cover {
  align-self: start;
}

.game-cover img {
  display: block;
  width: 100%;
  border-radius: 8px;
}


/* =========================
   FICHA – RATING CARD
========================= */

.rating-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rating-header strong {
  font-size: 15px;
  font-weight: 700;
}

/* GRID DE NOTAS */
.rating-scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* CAJA BASE */
.rating-box {
  background:  rgba(22, 29, 41, 0.85);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
  margin-bottom: 14px;
}


.rating-box:hover {
  transform: translateY(-1px);
}

/* VALOR */
.rating-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

/* LABEL */
.rating-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* COLORES (reutilizamos tu lógica global) */
.rating-box.success {
  border: 1.5px solid rgba(34,197,94,.65);
  color: #ffffff;
}

.rating-box.warning {
  border-color: #f59e0b;
  color: #ffffff;
}

.rating-box.danger {
  border-color: #ef4444;
  color: #ffffff;
}

/* LIGHT MODE */
html[data-theme="light"] .rating-box {
  background: #f3f4f6;
  color: #000000;
}

html[data-theme="light"] .rating-label {
  color: #6b7280;
}

/* CTA */
.rating-action {
  margin-top: 6px;
}




/* =========================
   NOTICIAS GENERALES noticias.php imagenes
========================= */
.news-cover {
  display: block;        /* 🔑 CLAVE */
  width: 100%;           /* 🔑 CLAVE */
  max-width: 100%;
  height: auto;
}


.news-card + .news-card {
  margin-top: 32px;
}


.news-content {
  padding-bottom: 8px;
}


/* =========================
   NOTICIA – CONTENIDO noticia.php
========================= */

.story-box {
  max-width: 1240px;
  margin: 32px auto 0; /* 👈 aire entre nav y noticia */
}


/* Imagen principal noticia */
.news-hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px auto;
  border-radius: 8px;
}

/* Texto noticia */
.news-text {
  line-height: 1.7;
  font-size: 16px;
}

/* Meta superior */
.news-meta-line {
  display: flex;
  gap: 12px;
  margin: 8px 0 20px;
  color: var(--muted);
}

/* Enlaces dentro del texto */
.news-text a {
  color: inherit;
  text-decoration: underline;
}


/* Solo cuando hay cards de noticias */
.game-main:has(.news-card) {
  min-width: 0;
}

/* Asegurar que las cards no fuerzan ancho */
.game-main:has(.news-card) .news-card {
  max-width: 100%;
  overflow: hidden;
}

/* Blindaje extra por si alguna imagen/texto empuja */
.game-main:has(.news-card) .news-content {
  min-width: 0;
}
/* =========================
   META INFERIOR NOTICIA
========================= */

.analysis-meta {
  display: flex;
  justify-content: space-between; /* 👈 izquierda / derecha */
  align-items: center;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
  color: var(--muted);
}

/* Light mode */
html[data-theme="light"] .analysis-meta {
  border-top: 1px solid #e5e7eb;
}

.analysis-meta a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.analysis-meta a:hover {
  text-decoration: underline;
}


@media (max-width: 640px) {
  .analysis-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}



/* =========================
   USER REVIEWS – RESUMEN
========================= */

.reviews-summary-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
}

.summary-left .score-big {
  font-size: 48px;
  font-weight: 700;
}

.summary-left .score-text {
  font-weight: 600;
  margin-top: 4px;
}

.summary-left .score-count {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.summary-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row span {
  font-size: 13px;
  color: var(--muted);
}

.bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.fill {
  height: 100%;
  border-radius: 999px;
}

.fill.positive { background: #22c55e; }
.fill.mixed   { background: #f59e0b; }
.fill.negative{ background: #ef4444; }

/* =========================
   USER REVIEW CARD
========================= */

.user-review-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-review-text {
  margin: 12px 0;
  line-height: 1.6;
  font-size: 14px;
}

/* Colapsado a 3 líneas */
.user-review-text.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 8px 0 0;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;

  color: #cbd5e1;           /* gris claro, no compite con el texto */
  cursor: pointer;

  text-decoration: underline;
  text-decoration-color: rgba(203,213,225,.35);
  text-underline-offset: 3px;

  transition: 
    color .15s ease,
    text-decoration-color .15s ease,
    transform .15s ease;
}

/* Hover – se “afila” */
.read-more-btn:hover {
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,.75);
  transform: translateX(2px); /* micro movimiento editorial */
}

/* Active – feedback físico */
.read-more-btn:active {
  transform: translateX(1px);
}

/* LIGHT MODE */
html[data-theme="light"] .read-more-btn {
  color: #374151;
  text-decoration-color: rgba(55,65,81,.35);
}

html[data-theme="light"] .read-more-btn:hover {
  color: #111827;
  text-decoration-color: rgba(17,24,39,.7);
}


.user-review-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Botón reportar */
.user-review-card .btn-outline {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  opacity: 0.85;
}

.user-review-card .btn-outline:hover {
  opacity: 1;
}


.report-form select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.1);
}






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

@media (max-width: 1024px) {
  .game-hero-inner {
    grid-template-columns: 180px 1fr;
  }

  .game-sidebar {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .game-hero-inner {
    grid-template-columns: 1fr;
  }

  .game-cover {
    max-width: 160px;
  }

  .game-video iframe {
    height: 220px;
  }
}

@media (max-width: 768px) {
  .game-hero-inner {
    grid-template-columns: 1fr;
  }

  .game-main h1 {
    font-size: 26px;
  }
}
















/* =========================
   SIDEBAR
========================= */

.game-sidebar {
  background: var(--panel);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.score-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score {
  background: rgba(0,0,0,.35);
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
}

.score small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.status-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  font-size: 13px;
}




/* =========================
   TABS
========================= */

.game-tabs {
  display: flex;
  gap: 10px;
  margin: 24px 0;
}

.game-tabs button {
  background: var(--panel);
  border: none;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
}

.game-tabs button.active {
  background: var(--purple);
  color: #fff;
}



/* =========================
   SIDEBAR
========================= */

.game-sidebar {
  align-self: start;
  background: var(--panel);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.score-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score {
  background: rgba(0,0,0,.35);
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
}

.score small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.status-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  font-size: 13px;
}


/* Info grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: var(--box-bg);
  padding: 24px;
  border-radius: 8px;
}

.info-grid h4 {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--text);
}

.info-grid a {
  display: block;
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 4px;

  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.5);
  text-underline-offset: 3px;

  transition:
    color .2s ease,
    text-decoration-color .2s ease,
    transform .15s ease;
}

.info-grid a:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
  transform: translateX(2px); /* 👈 micro movimiento */
}

/* LIGHT MODE */
html[data-theme="light"] .info-grid a {
  color: #111827;
  text-decoration-color: #111827;
}

html[data-theme="light"] .info-grid a:hover {
  color: #000000;
  text-decoration-color: #111827;
}



/* Boxes */
.story-box,
.info-box {
  background: var(--box-bg);
  padding: 24px;
  border-radius: 8px;
}

.story-box h4,
.info-box h4 {
  margin-bottom: 12px;
}

.story-box .more {
  color: #a970ff;
  font-weight: 500;
}

/* SIDEBAR */
.game-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.side-card {
  background: var(--box-bg);
  padding: 20px;
  border-radius: 8px;
}

.side-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.side-header a {
  color: #ffffff;
  font-size: 13px;
  text-decoration: none;
  position: relative;
  opacity: 0.85;
  transition: opacity .2s ease;
}

.side-header a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity .2s ease, transform .2s ease;
}

.side-header a:hover {
  opacity: 1;
}

.side-header a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

html[data-theme="light"] .side-header a {
  color: #111827;
}

html[data-theme="light"] .side-header a:hover {
  opacity: .75;
}


.release-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.release-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.time-grid div {
  background: #2b2f36;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}

.time-grid b {
  display: block;
  font-size: 16px;
}



/* =========================
   BADGE NOTA – USER REVIEWS (pequeña)
========================= */

.badge-noobs {
  min-width: 36px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 700;

  border-radius: 8px;

  background: rgba(255,255,255,.04);
  border: 1.5px solid transparent;
  color: #e5e7eb;
}

/* estados */
.badge-noobs.success {
  color: #22c55e;
  border-color: rgba(34,197,94,.55);
}

.badge-noobs.warning {
  color: #f59e0b;
  border-color: rgba(245,158,11,.5);
}

.badge-noobs.danger {
  color: #ef4444;
  border-color: rgba(239,68,68,.5);
}

/* =========================
   SCORE PRINCIPAL – RESUMEN
========================= */

.summary-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.summary-left .score-big {
  width: 72px;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  font-weight: 800;

  border-radius: 14px;

  background: rgba(255,255,255,.04);
  border: 2px solid transparent;
  color: #e5e7eb;

  margin-bottom: 8px;
}

/* estados */
.score-big.success {
  color: #22c55e;
  border-color: rgba(34,197,94,.55);
}

.score-big.warning {
  color: #f59e0b;
  border-color: rgba(245,158,11,.5);
}

.score-big.danger {
  color: #ef4444;
  border-color: rgba(239,68,68,.5);
}

.score-big.neutral {
  color: #9aa4b2;
  border-color: rgba(154,164,178,.45);
}



/* =========================
   BADGES – GAME PAGE
========================= */

.game-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  background: #2b2f36;
  color: #e5e7eb;
  transition: all .15s ease;
}

a.game-badge {
  text-decoration: none;
}


.game-badge:hover {
  background: #000000;
  color: #ffffff;
}

/* Light mode */
html[data-theme="light"] .game-badge {
  background: #e5e7eb;
  color: #111827;
}

html[data-theme="light"] .game-badge:hover {
  background: #e5e7eb;
  color: #ffffff;
}



/* =========================
   BEST GAMES GRID (CARDS)
========================= */

/* =========================
   BEST GAMES GRID (CARDS)
========================= */

.best-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.best-game-card {
  display: block;
  background: var(--panel);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative; /* CLAVE para la nota */
}

.best-game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.best-game-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* =========================
   SCORE (UNIFICADO NOOBS)
========================= */

.best-game-card .score,
.best-game-card .na {
  position: absolute;
  top: 10px;
  right: 10px;

  min-width: 36px;
  height: 28px;
  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 700;

  border-radius: 8px;

  background: rgba(0,0,0,.6);
  border: 1.5px solid var(--score-color, rgba(255,255,255,.25));
  color: var(--score-color, #9aa4b2);

  backdrop-filter: blur(4px);
  box-sizing: border-box;
  transition: border-color .25s ease, color .25s ease;
}

/* Estados por nota (solo borde + texto) */
.best-game-card .score.success {
  --score-color: #22c55e;
}

.best-game-card .score.warning {
  --score-color: #f59e0b;
}

.best-game-card .score.danger {
  --score-color: #ef4444;
}

/* N/A */
.best-game-card .na {
  --score-color: #9aa4b2;
}

/* =========================
   LIGHT MODE
========================= */

html[data-theme="light"] .best-game-card .score,
html[data-theme="light"] .best-game-card .na {
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.2);
}


/* =========================
   SCORE – LIGHT MODE (COLORES VISIBLES)
========================= */

html[data-theme="light"] .best-game-card .score {
  background: rgba(255,255,255,.95);
  border-color: var(--score-color);
  color: var(--score-color);
}

/* Ajustes de color en light (un pelín más oscuros) */
html[data-theme="light"] .best-game-card .score.success {
  --score-color: #16a34a;
}

html[data-theme="light"] .best-game-card .score.warning {
  --score-color: #d97706;
}

html[data-theme="light"] .best-game-card .score.danger {
  --score-color: #dc2626;
}

html[data-theme="light"] .best-game-card .na {
  --score-color: #6b7280;
}


/* =========================
   BEST GAME CARD – INFO
========================= */

.best-game-card .card-info {
  padding: 10px 12px 14px;
  text-align: center;           /* 👈 centrado */
}

.best-game-card .card-info b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;

  /* Máx 2 líneas, elegante */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.best-game-card .card-info span {
  display: none; /* “Video Game” sobra visualmente */
}

html[data-theme="light"] .best-game-card {
  color: #374151;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

html[data-theme="light"] .best-game-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

html[data-theme="light"] .best-game-card b {
  color: #111827;
}




/* =========================
   PAGINATION – NOOBS STYLE
========================= */

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.pagination .page-btn {
  min-width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;

  color: var(--text);
  background: var(--panel);

  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}

.pagination .page-btn:hover {
  background: rgba(145,70,255,.15);
  transform: translateY(-1px);
}

.pagination .page-btn.active {
  background: var(--purple);
  color: #fff;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.page-btn {
  padding: 6px 10px;
  font-size: 14px;
  color: var(--purple);
  text-decoration: none;
}

.page-btn.active {
  font-weight: 600;
  text-decoration: underline;
}


/* =========================
   SUBMENUS – BASE
========================= */

.submenu {
  display: none;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 8px;
}

/* Visible SOLO con .open */
.submenu.open {
  display: block;
}

/* =========================
   GÉNEROS – GRID DESKTOP
========================= */

@media (min-width: 769px) {
  .submenu.grid.open {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* =========================
   GÉNEROS – MÓVIL (LISTA)
========================= */

@media (max-width: 768px) {
  .submenu.grid.open {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}

/* =========================
   PLATAFORMAS – LISTA
========================= */

.submenu.list.open {
  display: flex;
  flex-direction: column;
}


/* =========================
   PROFILE CARD
========================= */

.profile-card {
  background: var(--panel);
  border-radius: 14px;
  padding: 24px;
}

/* Header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

/* Avatar */
.profile-avatar {
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.review-footer a.user img {
  width: 28px;
  height: 28px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Meta */
.profile-meta h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.profile-role {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.profile-role.admin {
  color: #22c55e;
  border: 1px solid #22c55e;
}

.profile-role.user {
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.2);
}

.profile-date {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* About */
.profile-about {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);

  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

/* Light mode ajustes */
html[data-theme="light"] .profile-card {
  background: #fff;
}

html[data-theme="light"] .profile-about {
  border-top-color: rgba(0,0,0,.08);
}

html[data-theme="light"] .profile-role.user {
  border-color: rgba(0,0,0,.2);
}


/* =========================
   PERFIL – ÚLTIMAS REVIEWS
========================= */

.user-reviews {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.user-review-card {
  margin: 0; /* importante */
}


.user-reviews-box {
  margin-top: 24px;
  flex-direction: column;
  gap: 18px; /* ⬅️ separación entre comentarios */
}



.user-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.user-review-card {
  position: relative;
  display: block;
  background: var(--panel);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.user-review-card:last-child {
  margin-bottom: 0;
}

.user-review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.user-review-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Score reutilizando sistema global */
.user-review-card .score {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Info */
.user-review-info {
  padding: 10px 12px;
}

.user-review-info b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.user-review-info small {
  font-size: 12px;
  color: var(--muted);
}

.user-reviews-box .box-header {
  margin-bottom: 14px; /* ⬅️ aire entre título y cards */
}

.user-reviews-box .box-header strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* =========================
   MODAL EDITAR PERFIL
========================= */

.profile-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.profile-modal-overlay.open {
  display: flex;
}

.profile-modal {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border-radius: 10px;
  padding: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
}

.modal-label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--muted);
}

.profile-modal textarea {
  width: 100%;
  resize: vertical;
  min-height: 90px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.modal-success {
  background: rgba(0,255,0,.08);
  color: #6ee7b7;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 10px;
}

.profile-edit-btn {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;

  font-size: 13px;
  font-weight: 500;
  color: var(--purple);

  cursor: pointer;
}

.profile-edit-btn:hover {
  text-decoration: underline;
}



/* =========================
   HEADER USER
========================= */

/* =========================
   DARK MODE
========================= */

/* Nombre de usuario */
html[data-theme="dark"] .user-name {
  color: #e5e7eb; /* blanco suave */
}

/* Botón Cerrar sesión */
html[data-theme="dark"] .btn-header-outline {
  color: #e5e7eb;
  border-color: #374151;
  background: transparent;
}

/* Hover en dark */
html[data-theme="dark"] .btn-header-outline:hover {
  color: #ffffff;
  border-color: var(--purple);
  background: rgba(145,70,255,.15);
}


/* =========================
   LIGHT MODE
========================= */

/* Nombre de usuario */
html[data-theme="light"] .user-name {
  color: #111827; /* negro */
}

/* Botón Cerrar sesión */
html[data-theme="light"] .btn-header-outline {
  color: #111827;
  border-color: #d1d5db;
  background: transparent;
}

/* Hover en light */
html[data-theme="light"] .btn-header-outline:hover {
  color: #ffffff;
  border-color: var(--purple);
  background: var(--purple);
}


/* =========================
   MODALES (OCULTOS POR DEFECTO)
========================= */

/* ==================================================
   REGISTER / EMBED MODAL – MISMO LOOK QUE REGISTRO
================================================== */

/* Overlay genérico (registro + embed) */
.embed-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.embed-modal.open {
  display: flex;
}

/* Caja del modal de registro */
.register-modal-box {
  width: 100%;
  max-width: 520px;
  padding: 24px;
}

/* Reusar estilos existentes */
.register-modal-box input[type="text"],
.register-modal-box input[type="email"],
.register-modal-box input[type="password"] {
  width: 100%;
}

/* Header común */
.embed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.embed-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text);
}

/* Accesibilidad */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   REGISTER MODAL – ESPACIADO
========================= */

/* Separación antes del checkbox */
.register-modal-box .terms {
  display: block;
  margin-top: 14px;
  margin-bottom: 18px;
  font-size: 14px;
}

/* Aire entre checkbox y botón */
.register-modal-box .btn-secondary {
  margin-top: 6px;
}


/* ==================================================
   MODAL REVIEW – DEFINITIVO (CORREGIDO)
================================================== */

/*
  🔥 CAMBIO CLAVE:
  - Se elimina la lógica por ID para display
  - Se reutiliza .modal-overlay + .open
  - #reviewModal SOLO se usa como identificador
*/

/* Overlay del modal de reviews */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;                 /* oculto por defecto */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay.open {
  display: flex;                 /* única forma de abrir */
}

/* Caja del modal de review */
.modal-overlay .modal-box {
  background: var(--panel);
  color: var(--text);
  width: 100%;
  max-width: 450px;
  max-height: 90vh;
  border-radius: 12px;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* Header */
.modal-overlay .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.modal-overlay .modal-header h3 {
  margin: 0;
  font-size: 18px;
}

/* Body */
.modal-overlay .modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Footer */
.modal-overlay .modal-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Botón cerrar */
.modal-overlay .modal-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}

/* Layout superior */
.modal-overlay .modal-top {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: start;
}

.modal-overlay .modal-cover {
  width: 100%;
  border-radius: 8px;
}

/* Score */
.modal-overlay .score-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Textarea */
.modal-overlay textarea {
  width: 100%;
  resize: vertical;
}

/* Responsive */
@media (max-width: 640px) {
  .modal-overlay .modal-box {
    max-width: 95%;
    max-height: 95vh;
  }

  .modal-overlay .modal-top {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .modal-overlay .modal-cover {
    max-width: 160px;
    margin: 0 auto;
  }
}

/* Slider ocupa todo el ancho disponible */
#reviewModal .score-row input[type="range"] {
  flex: 1;              /* 🔥 clave */
  width: 100%;
}

/* Badge de nota */
#reviewModal .score-badge {
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  transition: background-color .2s ease;
}

/* Colores según nota */
#reviewModal .badge-success {
  background: #2ecc71; /* verde */
}

#reviewModal .badge-warning {
  background: #f1c40f; /* amarillo */
  color: #111;
}

#reviewModal .badge-danger {
  background: #e74c3c; /* rojo */
}


/* =========================
  MOVIL
========================= */

/* =========================
   OCULTAR SIDEBAR EN MÓVIL
   NO AFECTA DESKTOP
========================= */



@media (max-width: 768px) {

  /* SOLO análisis */
  .game-content-wide[data-section="analisis"] {
    max-width: 100%;
    margin-top: 0;
  }

  .game-content-wide[data-section="analisis"] .game-content {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  overflow-x: hidden;
  }

  .game-content-wide[data-section="analisis"] .story-box {
    padding: 16px;
    border-radius: 6px;
    background: var(--box-bg);
    max-width: 860px;   /* ajusta aquí a tu gusto */
    margin: 0 auto;
    overflow-x: hidden;   /* 👈 CLAVE */
  }

  /* Texto legible */
  .game-content-wide[data-section="analisis"] .story-box p {
    font-size: 15px;
    line-height: 1.65;
  }

  /* Imágenes dentro del análisis */
/* =========================
   ANÁLISIS – IMÁGENES CONTROLADAS
========================= */

.game-content-wide[data-section="analisis"] .story-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
}




    /* 1️⃣ El grid pasa a 1 sola columna */
  .game-page .game-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 2️⃣ Sidebar fuera COMPLETAMENTE */
  .game-page .game-sidebar-right {
    display: none;
  }

  /* 3️⃣ El contenido principal ocupa todo */
  .game-page .game-main {
    width: 100%;
    max-width: 100%;
  }

  /* 4️⃣ Ajuste fino de padding */
  .game-page .game-content {
    padding-left: 16px;
    padding-right: 16px;
  }
    .game-page .info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
    /* Hero cover (ficha y análisis) */
  .game-cover {
    display: none;
  }

  /* Carátula grande en info-grid (ficha) */
  .info-cover,
  .game-cover-big {
    display: none;
  }






  /* Contenedor general */
  .game-content-wide {
    display: block;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Sidebar fuera */
  .game-content-wide .game-sidebar-right {
    display: none;
  }

  /* La columna principal SÍ se estira */
  .game-content-wide .game-main {
    width: 100%;
    max-width: 100%;
    margin: 0;              /* 🔑 clave */
  }

  /* Cada card de noticia ocupa todo el ancho */
  .game-content-wide .news-card {
    width: 100%;
    max-width: 100%;        /* 🔑 esta era la que faltaba */
  }

  /* Imagen de la noticia */
  .game-content-wide .news-card img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* El grid pasa a una sola columna */
  .game-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Sidebar fuera completamente */
  .game-sidebar-right {
    display: none;
  }

  /* 🔴 CLAVE: la info-box que envuelve noticias NO puede ser caja */
  .game-main > .info-box {
    padding: 0;                /* quita efecto “tarjeta” */
    background: transparent;
    border-radius: 0;
    max-width: 100%;
  }

  /* Las noticias ocupan todo el ancho */
  .news-card {
    width: 100%;
    max-width: 100%;
  }

  /* Aire lateral correcto */
  .game-content-wide {
    padding-left: 16px;
    padding-right: 16px;
  }




  /* Títulos principales */
  .game-header h1,
  main.page h1 {
    text-align: center;
  }

  /* Párrafos introductorios bajo títulos */
  .game-header p,
  .page > p,
  .page .page-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Ocultar captcha */
.grecaptcha-badge {
  visibility: hidden;
}











/* ==========================================================
   ADMIN – BASE
   Aislado y compatible con la web principal
========================================================== */

.admin-page {
  padding-bottom: 60px;
}

/* Caja principal del admin (más ancha que el contenido normal) */
.admin-box {
  max-width: 1380px; /* ⬅️ más aire horizontal */
  margin: 0 auto;
  padding: 32px 20px;
}



/* ADMIN NAV */
.admin-nav {
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  margin-bottom: 24px;
  background: var(--panel);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-nav a {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}

.admin-nav a:hover {
  color: var(--text);
}

/* Activo */
.admin-nav a.active {
  color: var(--purple);
}


.admin-breadcrumbs {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

.admin-breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.admin-breadcrumbs a:hover {
  color: var(--text);
}

.admin-breadcrumbs strong {
  color: var(--text);
  font-weight: 500;
}

.admin-breadcrumbs span {
  margin: 0 6px;
}



/* ==========================================================
   CABECERA ADMIN
========================================================== */

.admin-header {
  margin-bottom: 32px;
}

.admin-header h1 {
  margin: 0 0 6px 0;
  font-size: 28px;
}

.admin-header .muted {
  color: var(--muted);
  font-size: 14px;
}

/* ==========================================================
   TÍTULOS DE SECCIÓN
========================================================== */

.admin-section-title {
  margin: 48px 0 16px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ==========================================================
   GRID DE TARJETAS
========================================================== */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ==========================================================
   TARJETA ADMIN
========================================================== */

.admin-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;

  padding: 22px 20px;
  min-height: 140px;

  background: var(--panel);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);

  color: var(--text);
  text-decoration: none;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}

/* Hover elegante, sin exagerar */
.admin-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  /* ⬅️ micro highlight */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0)
  );
}

/* Icono */
.admin-icon {
  font-size: 26px;
  line-height: 1;
}

/* Título tarjeta */
.admin-card b {
  font-size: 15px;
  font-weight: 600;
}

/* Descripción */
.admin-card small {
  font-size: 13px;
  color: var(--muted);
}

/* ==========================================================
   LIGHT MODE
========================================================== */

html[data-theme="light"] .admin-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

html[data-theme="light"] .admin-card:hover {
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

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

@media (max-width: 600px) {
  .admin-box {
    padding: 24px 16px;
  }

  .admin-card {
    min-height: 120px;
    padding: 18px;
  }

  .admin-icon {
    font-size: 22px;
  }
}


/* =========================
   FORMULARIOS ADMIN
========================= */

.admin-form {
  max-width: 1280px;
  margin: 40px auto 0;
}


/* =========================
   ADMIN FORM – 2 COLUMNAS
========================= */

.admin-form-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr; /* izquierda más ancha */
  gap: 40px;
  align-items: start;
}


/* columnas */
.admin-col {
  display: flex;
  flex-direction: column;
}

/* en móvil vuelve a 1 columna */
@media (max-width: 900px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}


.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

/* Alerts */
.admin-alert {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.admin-alert.success {
  background: rgba(34,197,94,.12);
  color: #22c55e;
}

.admin-alert.error {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}

/* =========================
   CHECKBOX GRID (PLATAFORMAS)
========================= */

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 24px;
  margin-top: 6px;
}


.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
}

.checkbox-item input {
  margin: 0;
  flex-shrink: 0;
}

.checkbox-item span {
  line-height: 1.2;
}

/* =========================
   TEXTAREA ADMIN
========================= */

.admin-form textarea {
  width: 100%;
  min-height: 160px;      /* ⬅️ aquí lo agrandas */
  resize: vertical;      /* permite al admin estirarlo */
  padding: 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  line-height: 1.5;
}

/* =========================
   ADMIN TABLE
========================= */

.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.admin-table th,
.admin-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.admin-table th {
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.admin-table td small {
  font-size: 12px;
}

.admin-table .actions {
  white-space: nowrap;
}

.btn-link {
  color: var(--text);
  text-decoration: none;
  margin-right: 10px;
}

.btn-link.danger {
  color: #ef4444;
}

/* =========================
   editar imagenes ficha ADMIN
========================= */


/* =========================
   IMAGE PREVIEW ADMIN
========================= */

.admin-image-preview {
  width: 100%;
  max-width: 520px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.admin-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Ratios */
.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.ratio-3-4 {
  aspect-ratio: 3 / 4;
  max-width: 260px;
}

/* Avisos */
.image-hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.image-hint.error {
  color: #ef4444;
}

.image-hint.ok {
  color: #22c55e;
}



/* =========================
   SELECT MULTIPLE (GÉNEROS)
========================= */

.select-multiple {
  width: 100%;
  min-height: 160px;      /* 👈 más aire */
  padding: 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
}

/* Hover / focus como inputs */
.select-multiple:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px rgba(145,70,255,.35);
}

/* Opciones */
.select-multiple option {
  padding: 8px 10px;
  background: var(--panel);
  color: var(--text);
}

/* Selección */
.select-multiple option:checked {
  background: var(--purple);
  color: #fff;
}




/* Botón que se comporta visualmente como link */
.btn-reset {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}


.requirements-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .requirements-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   Contiene spoilers
================================================== */
.spoiler-warning {
  background: rgba(255, 180, 0, 0.12);
  border: 1px solid rgba(255, 180, 0, 0.35);
  color: #ffcc66;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spoiler-warning button {
  font-size: 13px;
  padding: 4px 8px;
}

/* SPOILER – tema light */
html[data-theme="light"] .spoiler-warning {
  color: #c0392b;               /* rojo legible */
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.35);
}

html[data-theme="light"] .spoiler-warning button {
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.45);
}



/* ==================================================
   Destacar review al ir desde index
================================================== */
.highlight-review {
  outline: 2px solid #9146ff;
  box-shadow: 0 0 0 4px rgba(145, 70, 255, 0.15);
  transition: box-shadow .3s ease;
}


/* ==================================================
   contador caracteres review usuarios
================================================== */
.spoiler-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.review-counter {
  font-size: 13px;
  color: var(--muted);
}

.review-counter.limit {
  color: #e5533d;
  font-weight: 600;
}




/* ==================================================
   sentimiento fichas
================================================== */

.rating-sentiment {
  margin: 10px 0 14px;
  text-align: center;
  text-align: center;
}

.rating-sentiment-main {
  font-size: 14px;
  line-height: 1.3;
}

.rating-sentiment-sub {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.8;
}

/* Colores según sentimiento */
.rating-sentiment.success strong {
  color: #3ccf7a;
}

.rating-sentiment.warning strong {
  color: #f0ad4e;
}

.rating-sentiment.danger strong {
  color: #e5533d;
}


/* ==================================================
   NUEVO ANALISIS nuevo-analisis.php
================================================== */
/* ==================================================
   VIEWPORT – CENTRADO GENERAL
================================================== */

.analisis-admin-viewport {
  min-height: calc(100vh - 120px); /* descuenta header */
  display: flex;
  align-items: center;             /* centrado vertical */
  justify-content: center;         /* centrado horizontal */
  padding: 40px 0;
}

/* ==================================================
   CONTENEDOR PRINCIPAL
================================================== */

.analisis-admin-wrap {
  width: 100%;
  max-width: 2100px;
  padding: 0 40px;
}

/* ==================================================
   HEADER
================================================== */

.analisis-admin-header {
  margin-bottom: 32px;
}

.analisis-admin-header h1 {
  margin: 0;
  font-size: 28px;
}

.analisis-admin-header .muted {
  font-size: 14px;
  color: var(--muted);
}

/* ==================================================
   GRID PRINCIPAL
================================================== */

.analisis-layout {
  display: grid;
  grid-template-columns: 760px 1240px; /* editor | preview real */
  gap: 64px;
  align-items: start;
}

/* ==================================================
   FORMULARIO / EDITOR
================================================== */

.analisis-form .form-group {
  margin-bottom: 20px;
}

/* 🔥 TEXTAREAS GRANDES (LO QUE PEDÍAS) */
.analisis-form textarea {
  width: 100%;
  min-height: 220px;      /* ⬅️ más espacio */
  resize: vertical;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  line-height: 1.5;
}

/* Título algo más compacto */
.analisis-form input[type="text"],
.analisis-form input[type="number"],
.analisis-form select {
  width: 100%;
}

.img-center {
  text-align: center;
  margin: 32px 0;
}

.img-center img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}


/* ==================================================
   PREVIEW REAL
================================================== */

.analisis-preview {
  display: flex;
  flex-direction: column;
}

.preview-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Caja con scroll */
.preview-box {
  height: 800px;
  overflow-y: auto;
}

/* EXACTAMENTE COMO PRODUCCIÓN */
.preview-box .story-box {
  max-width: 1240px;
  background: var(--box-bg);
  padding: 24px;
  border-radius: 8px;
  line-height: 1.7;
  font-size: 16px;
  word-wrap: break-word;
  
}

/* Imágenes como en producción */
.preview-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
  border-radius: 8px;
}

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

@media (max-width: 2100px) {
  .analisis-layout {
    grid-template-columns: 700px 1fr;
  }
}

@media (max-width: 1400px) {
  .analisis-layout {
    grid-template-columns: 1fr;
  }

  .preview-box {
    height: auto;
    max-height: 480px;
  }
}


/* ==================================================
   buscador header tipo steam
================================================== */

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1b1f26;
  border-radius: 8px;
  margin-top: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  z-index: 9999;
  overflow: hidden;
  display: none;
}

.search-results.open {
  display: block;
}

.search-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  cursor: pointer;
  transition: background .15s;
}

.search-item:hover {
  background: #252a33;
}

@media (hover: hover) {
  .search-item:hover {
    background: #252a33;
  }
}

.search-cover {
  width: 40px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
  background: #000;
}

.search-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;                /* ⬅️ CLAVE */
  min-width: 0;
}

.search-item .score {
  margin-left: auto;      /* ⬅️ CLAVE */
  flex-shrink: 0;
}


.search-title {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}

.search-meta {
  font-size: 12px;
  color: #9aa4b2;
}


.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
}



/* ==================================================
   SEARCH – LIGHT MODE
================================================== */

html[data-theme="light"] .search-wrapper input {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

html[data-theme="light"] .search-wrapper input::placeholder {
  color: #6b7280;
}

html[data-theme="light"] .search-results {
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

html[data-theme="light"] .search-item {
  color: #111827;
}

html[data-theme="light"] .search-item:hover {
  background: #f3f4f6;
}

html[data-theme="light"] .search-title {
  color: #111827;
}

html[data-theme="light"] .search-meta {
  color: #6b7280;
}

html[data-theme="light"] .search-cover {
  background: #e5e7eb;
}

/* Badge notas */
html[data-theme="light"] .search-item .score.green {
  background: #16a34a;
  color: #ffffff;
}

html[data-theme="light"] .search-item .score.orange {
  background: #f59e0b;
  color: #ffffff;
}

html[data-theme="light"] .search-item .score.red {
  background: #dc2626;
  color: #ffffff;
}

html[data-theme="light"] .search-item .score.na {
  background: #9ca3af;
  color: #ffffff;
}


/* =========================
   SEARCH – FIX MOBILE
   (sin mover el buscador)
========================= */

@media (max-width: 768px) {

  /* El contenedor central ocupa bien */
  .center {
    width: 100%;
    padding: 0 12px;
  }

  /* El wrapper ya no limita ancho en móvil */
  .search-wrapper {
    max-width: none;
    width: 100%;
  }

  /* Input más usable */
  .center input {
    max-width: none;
    width: 100%;
    font-size: 16px;       /* evita zoom iOS */
    padding: 10px 14px;
  }

  /* Resultados alineados al input */
  .search-results {
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 10px;
  }

  /* Ítems más respirables */
  .search-item {
    padding: 12px;
  }

  .search-title {
    font-size: 15px;
  }

  .search-meta {
    font-size: 13px;
  }

  /* Evita desbordes raros */
  .search-info {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .right .theme-switch {
    display: none;
  }
}

@media (min-width: 769px) {
  .topbar-menu .theme-toggle-mobile {
    display: none;
  }
}


.theme-toggle-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Quitar subrayado SOLO en resultados del buscador */
.search-results a,
.search-results a:hover {
  text-decoration: none;
}


/* =========================
   FICHA – COVER
========================= */

/* contenedor de la cover en la ficha */
.info-cover {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* imagen cover */
.info-cover img,
.game-cover-big {
  max-width: 260px;       /* ⬅️ clave */
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}



/* PREVIEW ADMIN – imágenes NO centradas por defecto */
.analisis-preview .story-box img {
  display: inline-block;
  margin: 20px 0;
  max-width: 100%;
  height: auto;
}

/* PREVIEW ADMIN – solo centrar si hay img-center */
.analisis-preview .img-center {
  text-align: center;
  margin: 32px 0;
}

.analisis-preview .img-center img {
  display: inline-block;
  margin: 0 auto;
}


.game-video-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.game-video-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================
   HERO + VIDEO – FIX MÓVIL (FICHA)
========================================= */

@media (max-width: 768px) {

  /* El hero debe ocupar todo el ancho real */
  .game-hero.is-ficha {
    border-radius: 0;            /* look más app */
  }

  /* Grid a una sola columna REAL */
  .game-hero.is-ficha .game-hero-inner {
    grid-template-columns: 1fr;  /* 🔥 clave */
    padding: 16px;
  }

  /* El vídeo ocupa todo el ancho */
  .game-hero.is-ficha .game-video {
    width: 100%;
    margin-bottom: 0;
  }

  /* VideoJS full width real */
  .game-hero.is-ficha .video-js {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
  }

  /* Evitar que el hero se quede bajito */
  .game-hero.is-ficha {
    min-height: unset;
    background-position: center;
  }

  /* Overlay correcto en móvil */
  .game-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.55),
      rgba(0,0,0,.75)
    );
  }
}
@media (max-width: 768px) {
  .game-hero.is-ficha .video-js {
    aspect-ratio: 18 / 9;
  }
}


/* =========================================
   FICHA – INFO GRID ULTRA COMPACT (MÓVIL)
========================================= */

@media (max-width: 768px) {

  .info-grid {
    grid-template-columns: 1fr;
    gap: 6px;                 /* ⬅️ mínimo sin verse roto */
    padding: 12px 14px;       /* ⬅️ más apretado */
  }

  .info-grid > div {
    padding: 0;               /* ⬅️ elimina aire interno */
  }

  .info-grid h4 {
    margin: 0 0 2px;          /* ⬅️ casi inline */
    font-size: 13px;
    line-height: 1.2;
  }

  .info-grid p,
  .info-grid span,
  .info-grid a {
    margin: 0;                /* ⬅️ CLAVE */
    font-size: 14px;
    line-height: 1.3;
  }
}


/* =========================
   ANALISIS – IMÁGENES (FIX REAL)
========================= */

.game-content-wide[data-section="analisis"] .info-box img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
}