/* Wiki MonarchZone · usa los colores de la tienda (styles.css) */
.wiki-nav { background: var(--abyss-2); border-top: 1px solid rgba(255,255,255,.06); }
.wiki-nav__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .5rem 0; }
.wiki-nav__brand { color: var(--glow); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; margin-right: .5rem; }
.wiki-nav a { color: rgba(255,255,255,.8); text-decoration: none; padding: .25rem .5rem; border-radius: .4rem; font-weight: 500; }
.wiki-nav a:hover, .wiki-nav a.active { color: #fff; background: rgba(95,211,255,.15); }
.wiki-nav form { margin-left: auto; min-width: 220px; flex: 0 1 320px; }
@media (max-width: 575.98px) { .wiki-nav form { flex: 1 1 100%; margin-left: 0; } }

.wiki-hero { background: linear-gradient(135deg, var(--abyss), var(--abyss-2)); color: #fff; border-radius: 1rem; padding: 2rem 1.5rem; margin-bottom: 1.5rem; }
.wiki-hero h1 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; letter-spacing: .02em; }
.wiki-stat { font-size: 1.6rem; font-weight: 700; color: var(--glow); line-height: 1; }

.wiki-section-title { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: 1.5rem; margin: 1.5rem 0 .75rem; }

/* Rejilla de tarjetas */
.wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.wiki-card { position: relative; display: block; background: var(--card); border: 1px solid var(--line); border-radius: .75rem;
             overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.wiki-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,42,51,.12); color: var(--ink); }
.wiki-card__img { aspect-ratio: 1; background: var(--surface); }
.wiki-card__img img { width: 100%; height: 100%; object-fit: cover; }
.wiki-card__body { padding: .6rem .7rem; }
.wiki-card__title { font-weight: 600; line-height: 1.2; }
.wiki-card__sub { color: var(--muted); font-size: .8rem; }
/* Colección: lo que tengo resaltado, lo que no, atenuado */
.wiki-card.is-owned { border: 2px solid var(--hazard); box-shadow: 0 0 0 3px rgba(245,183,0,.18); }
.wiki-card.is-missing .wiki-card__img img { filter: grayscale(1); opacity: .45; }
.wiki-card__badge { position: absolute; top: .4rem; right: .4rem; background: var(--hazard); color: var(--hazard-ink);
                    width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }

/* Eras */
.era-card { display: block; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--atomic);
            border-radius: .75rem; padding: 1rem; color: var(--ink); text-decoration: none; height: 100%; }
.era-card:hover { border-left-color: var(--glow); color: var(--ink); }
.era-card__years { color: var(--muted); font-size: .85rem; }

/* Ficha del personaje */
.char-head h1 { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; margin: 0; }
.variant-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.variant-pills a { white-space: nowrap; }
.char-media { background: var(--abyss); border-radius: 1rem; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; }
.char-media img { width: 100%; height: 100%; object-fit: contain; }
.char-media model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.spec-table th { color: var(--muted); font-weight: 500; width: 40%; }
.bio h3 { font-size: 1.2rem; margin-top: 1rem; }
.bio h4 { font-size: 1.05rem; margin-top: .75rem; }

/* Figuras */
.figure-row { display: grid; grid-template-columns: 72px 1fr auto; gap: .75rem; align-items: center;
              background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: .5rem; }
.figure-row + .figure-row { margin-top: .5rem; }
.figure-row img { width: 72px; height: 72px; object-fit: cover; border-radius: .5rem; background: var(--surface); }
.figure-row.is-owned { border-color: var(--hazard); background: #fffbea; }

/* Colección */
.profile-head { display: flex; align-items: center; gap: 1rem; }
.profile-head img, .profile-head .avatar-fallback { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--abyss-2);
                    color: #fff; display: grid; place-items: center; font-size: 1.6rem; }
.era-block { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.era-progress { height: .5rem; }
.film-block + .film-block { margin-top: 1rem; }

/* =====================================================================
   Encabezado de la wiki: el mismo de la tienda (misma sesión y login),
   pero sin buscador, secciones, favoritos ni carrito de la tienda.
   ===================================================================== */
body.wiki-page store-header .site-search,
body.wiki-page store-header .site-nav,
body.wiki-page store-header .cart-btn,
body.wiki-page store-header .site-actions > a.icon-btn[href*="favorite"] { display: none !important; }
body.wiki-page store-header .site-header__bar { justify-content: space-between; }
body.wiki-page store-header:not(:defined) { min-height: 130px; }
.brand__wiki { margin-left: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
               background: var(--glow); color: var(--abyss); padding: .15rem .45rem; border-radius: .35rem; vertical-align: middle; }
/* La barra de la wiki se mueve dentro del encabezado para quedar fija junto con él */
store-header .wiki-nav { border-top: 1px solid rgba(255,255,255,.08); }
.wiki-nav__store { margin-left: .5rem; opacity: .75; }

/* Logo de la wiki + enlace "Tienda" lado a lado */
.wiki-brand-group { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.wiki-store-link { color: rgba(255,255,255,.8); text-decoration: none; font-weight: 600; white-space: nowrap;
                   padding: .3rem .7rem; border: 1px solid rgba(255,255,255,.25); border-radius: 2rem; font-size: .9rem; }
.wiki-store-link:hover { color: #fff; border-color: var(--glow); background: rgba(95,211,255,.12); }
@media (max-width: 575.98px) { .wiki-store-link { padding: .25rem .55rem; font-size: .8rem; } }

/* Mi colección (vista compacta): línea por era + cuadritos */
.era-row { margin-bottom: 1.75rem; }
.era-divider { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.era-divider__name { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.era-divider__line { flex: 1; height: 2px; background: var(--line); }
.era-divider__count { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.mini-card { display: block; text-decoration: none; color: var(--ink); text-align: center; }
.mini-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; background: var(--surface);
                 filter: grayscale(1); opacity: .5; transition: filter .15s, opacity .15s, transform .15s; }
.mini-card span { display: block; font-size: .75rem; line-height: 1.15; margin-top: .25rem; color: var(--muted);
                  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-card.is-owned img { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--hazard); }
.mini-card.is-owned span { color: var(--ink); font-weight: 600; }
.mini-card:hover img { transform: translateY(-2px); opacity: 1; }
@media (max-width: 575.98px) { .mini-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } }

/* Biografía: descripción + datos (medidas) + habilidades */
.bio-subtitle { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 .5rem; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.spec-item { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--atomic); border-radius: .6rem; padding: .5rem .75rem; }
.spec-item__label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.spec-item__value { font-size: 1.15rem; font-weight: 700; font-family: "Barlow Condensed", "Barlow", sans-serif; }

/* En la wiki no se muestra el botón "Wiki" de la tienda (ahí está "Tienda") */
body.wiki-page .store-wiki-link { display: none !important; }

/* ===== Rayo atómico en la wiki (mismo lenguaje que la tienda) ===== */
.era-divider__line { height: 2px; background: linear-gradient(90deg, var(--atomic), var(--glow), rgba(95,211,255,0));
                     box-shadow: 0 0 6px rgba(95, 211, 255, .6); }
.wiki-hero { position: relative; overflow: hidden; }
.wiki-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
                    background: linear-gradient(90deg, rgba(95,211,255,0), var(--glow) 30%, var(--atomic) 70%, rgba(95,211,255,0));
                    box-shadow: 0 0 10px rgba(95, 211, 255, .8); }
.wiki-section-title { position: relative; padding-bottom: .35rem; }
.wiki-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px;
                             background: linear-gradient(90deg, var(--atomic), var(--glow)); box-shadow: 0 0 6px rgba(95, 211, 255, .6); }

/* Personajes que tienes (películas, vehículos, búsquedas): contorno azul y palomita.
   Los que no tienes se ven normales, a color. (En "Mi colección" se mantiene el gris para los que faltan.) */
.wiki-card.is-owned { border: 2px solid var(--atomic); box-shadow: 0 0 0 3px rgba(20, 144, 216, .18); }
.wiki-card.is-owned:hover { box-shadow: 0 0 0 3px rgba(20, 144, 216, .3), 0 6px 18px rgba(15, 42, 51, .12); }
.wiki-card__badge { background: var(--atomic); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }

/* Mi colección: destello en el cuadro que acaba de cambiar */
.mini-card.just-changed img { animation: miniFlash 1.2s ease; }
@keyframes miniFlash { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 255, .9); } 100% { box-shadow: 0 0 0 10px rgba(95, 211, 255, 0); } }

/* =====================================================================
   Imágenes de personajes: si hay que recortar, se recorta ABAJO
   (casi todas las fotos tienen la cabeza del personaje en la parte de arriba).
   ===================================================================== */
.wiki-card__img img,
.mini-card img,
.figure-row img,
.fig-modal__img,
.era-card img { object-position: center top; }
/* Ficha del personaje: la imagen grande se muestra completa, sin recortes */
.char-media img { object-fit: contain; object-position: center top; }

/* ===================== Noticias ===================== */
.news-tabs .nav-link { font-weight: 600; }
.news-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; align-items: start; }
.news-card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.news-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem .5rem; }
.news-badge { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; color: var(--prov, var(--atomic));
              background: color-mix(in srgb, var(--prov, var(--atomic)) 10%, transparent); padding: .2rem .6rem; border-radius: 2rem; }
.news-badge--own { color: var(--hazard-ink); background: #fff3cd; }
.news-date { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.news-card__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.3; }
.news-card__img { width: 100%; max-height: 420px; object-fit: cover; object-position: center top; }
.news-card__body { padding: .75rem 1rem 1rem; }
.news-card__text { font-size: .92rem; }
.news-card__text p:last-child { margin-bottom: .5rem; }
.news-card__go { border-radius: 2rem; }
/* YouTube: miniatura con botón de reproducir; el video se carga sólo al tocarla */
.news-yt { position: relative; display: block; width: 100%; border: 0; padding: 0; background: #000; aspect-ratio: 16 / 9; cursor: pointer; }
.news-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.news-yt__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 14px; background: #ff0000; color: #fff;
                 display: grid; place-items: center; font-size: 2rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.news-video { aspect-ratio: 16 / 9; background: #000; }
.news-video iframe { width: 100%; height: 100%; border: 0; }
/* X, Reddit y Facebook: el sitio dibuja la publicación; mientras tanto (o si no se puede) se ve la vista previa */
.news-embed { padding: 0 .75rem; }
.news-embed .twitter-tweet, .news-embed .reddit-embed-bq { margin: 0 auto !important; }
.news-embed.is-loaded .news-preview--fallback { display: none; }
.news-fb { width: 100%; min-height: 520px; border: 0; }
/* Vista previa de cualquier sitio */
.news-preview { display: block; margin: 0 .75rem; border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; color: var(--ink); text-decoration: none; }
.news-preview:hover { border-color: var(--atomic); color: var(--ink); }
.news-preview img { width: 100%; max-height: 300px; object-fit: cover; object-position: center top; background: var(--surface); }
.news-preview__text { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .8rem; }
.news-preview__text span { font-size: .85rem; color: var(--muted); }
.news-preview__text small { font-size: .75rem; color: var(--muted); text-transform: lowercase; }
@media (max-width: 575.98px) { .news-feed { grid-template-columns: 1fr; } }

/* ===== Noticias en computadora: una columna central (como en celular) + barra lateral ===== */
.news-feed { grid-template-columns: 1fr; }                 /* siempre una sola columna, sin huecos */
.news-layout { display: block; }
.news-side { display: none; }
@media (min-width: 992px) {
    .news-layout { display: grid; grid-template-columns: minmax(0, 660px) 300px; gap: 2.5rem; justify-content: center; align-items: start; }
    .news-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 150px; }
}
@media (min-width: 576px) and (max-width: 991.98px) { .news-main { max-width: 660px; margin: 0 auto; } }
.news-card--flash { animation: newsFlash 1.2s ease; }
@keyframes newsFlash { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 255, .9); } 100% { box-shadow: 0 0 0 14px rgba(95, 211, 255, 0); } }
.news-side__box { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }
.news-side__title { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.news-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.news-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2rem; padding: .25rem .7rem; font-size: .85rem; font-weight: 600; }
.news-chip:hover { border-color: var(--atomic); }
.news-chip.active { background: var(--abyss); border-color: var(--abyss); color: #fff; }
.news-recent { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.news-recent li + li { border-top: 1px solid var(--line); }
.news-recent button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: .5rem .1rem; color: var(--ink); }
.news-recent button:hover span { color: var(--atomic); }
.news-recent span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; font-weight: 600; line-height: 1.25; }
.news-recent small { color: var(--muted); font-size: .75rem; }
.news-side__shop a { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; color: var(--ink); text-decoration: none; font-weight: 600; }
.news-side__shop a + a { border-top: 1px solid var(--line); }
.news-side__shop a:hover { color: var(--atomic); }
.news-side__shop i { color: var(--atomic); }