/* ==========================================================================
   Tema de juego: Mahou Shoujo Stars Bullet.
   Se aplica con la clase «e-tema--stars-bullet» (la pone el campo `tema` del proyecto en js/contenido.js):
   cambia los tokens de la marca Inertia.gg por los del libro de marca del juego (versión 2, 3-oct-2026)
   solo dentro de su página y de su tarjeta. La cabecera y el pie siguen siendo de Inertia.gg.
   El juego siempre va de noche: índigo noche con estrellas y oro estrella.
   ========================================================================== */

.e-tema--stars-bullet {
  --ink: #15122B;          /* Índigo noche */
  --surface: #1C1736;
  --surface-2: #262046;
  --line: #3A3160;
  --line-soft: #2A2450;
  --text: #F4EEFF;
  --muted: #B3A9D1;
  --accent: #E3AE3F;       /* Oro estrella */
  --accent-ink: #2A1E00;
  --accent-hover: #FFE9A8; /* Luz de estrella */
  --e-azul: #8CC6EE;       /* Shizuku */
  --e-luz: #FFE9A8;
  --e-magenta: #D6338A;    /* Corrupción: solo para la corrupción */
  --e-sombra: 0 24px 60px -24px rgba(5, 3, 18, .85);
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Segoe UI", system-ui, sans-serif;
  --font-etiqueta: "Cinzel", "Times New Roman", serif;
  color-scheme: dark;
  background-color: var(--ink);
  /* El cielo de la marca: estrellas pequeñas en oro, blanco, lila y azul hielo. */
  background-image:
    radial-gradient(1.2px 1.2px at 9% 14%, rgba(255, 233, 168, .7), transparent 60%),
    radial-gradient(1px 1px at 33% 47%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1.4px 1.4px at 61% 8%, rgba(227, 174, 63, .75), transparent 60%),
    radial-gradient(1px 1px at 86% 31%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.1px 1.1px at 71% 72%, rgba(183, 163, 230, .6), transparent 60%),
    radial-gradient(1px 1px at 19% 83%, rgba(140, 198, 238, .6), transparent 60%);
  background-size: 460px 460px;
  color: var(--text);
  font-family: var(--font-body);
}

/* Playfair Display cursiva para títulos y nombres: sigue la letra del logo. Sin mayúsculas forzadas. */
.e-tema--stars-bullet :is(h1, h2, h3, .e-tarjeta-titulo) {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--e-luz);
}
.e-tema--stars-bullet .e-detalle-cuerpo > section > h2 { font-size: clamp(28px, 3.4vw, 42px); }
.e-tema--stars-bullet .e-prosa h2 { font-size: clamp(24px, 2.6vw, 32px); }

/* Cinzel para etiquetas, estado y datos: siempre en mayúsculas y cortas. */
.e-tema--stars-bullet :is(.e-insignia, .e-estado, .e-ficha dt, .e-tarjeta-kicker, .e-migas, .e-tarjeta-meta, .e-tarjeta-accion) {
  font-family: var(--font-etiqueta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.e-tema--stars-bullet :is(.e-insignia, .e-estado) { font-size: 11px; border-radius: 999px; }
.e-tema--stars-bullet .e-ficha dt { font-size: 11px; }
.e-tema--stars-bullet .e-tarjeta-kicker { color: var(--accent); font-size: 12px; }
.e-tema--stars-bullet .e-migas { font-size: 12px; }
.e-tema--stars-bullet .e-ficha div { border-top-color: var(--accent); border-top-width: 2px; }
.e-tema--stars-bullet .e-prosa p,
.e-tema--stars-bullet .e-prosa ul { color: #DED6F2; }
.e-tema--stars-bullet .e-prosa ul li::marker { color: var(--accent); }
.e-tema--stars-bullet .e-prosa strong { color: var(--e-luz); }
.e-tema--stars-bullet .e-caracteristicas li { border-top: 2px solid var(--accent); border-radius: 0 0 14px 14px; background: var(--surface); line-height: 1.6; }
.e-tema--stars-bullet .e-caracteristicas strong { color: var(--e-luz); font-family: var(--font-display); font-style: italic; font-size: 1.12em; }
.e-tema--stars-bullet .e-galeria img { border-radius: 10px; }
.e-tema--stars-bullet .btn-primary { background: var(--accent); color: var(--accent-ink); }
.e-tema--stars-bullet .btn-primary:hover { background: var(--accent-hover); }
.e-tema--stars-bullet :focus-visible { outline-color: var(--accent); }

/* ---------- Hero con el wallpaper de la azotea: las tres a la derecha, la noche a la izquierda ----------
   Reglas del logo: va sobre índigo noche liso (nunca sobre la foto), sin sombras, brillos ni contornos. */
.e-tema--stars-bullet .e-detalle-hero--arte {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 74vh, 820px);
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, rgba(21, 18, 43, .7) 54%, rgba(21, 18, 43, 0) 72%),
    linear-gradient(0deg, var(--ink) 0, var(--ink) 12%, rgba(21, 18, 43, .75) 22%, rgba(21, 18, 43, 0) 40%),
    var(--e-fondo) right center / cover no-repeat,
    var(--ink);
  border-bottom: 1px solid var(--line);
}
.e-tema--stars-bullet .e-detalle-hero--arte > .wrap { width: 100%; }
.e-tema--stars-bullet .e-detalle-hero--arte .e-detalle-grid > div:first-child { max-width: 540px; }

/* El nombre del juego es el logo (título A2·1, el que tiene fondo transparente): un dibujo, nunca una fuente.
   Se respeta su proporción y se le deja aire alrededor. */
.e-tema--stars-bullet .e-detalle-logo { margin: var(--e-4) 0 var(--e-6); line-height: 0; }
.e-tema--stars-bullet .e-detalle-logo img { display: block; width: min(100%, 460px); min-width: min(100%, 300px); height: auto; }

@media (max-width: 860px) {
  .e-tema--stars-bullet .e-detalle-hero--arte {
    display: block;
    min-height: 0;
    padding-top: 250px;
    background:
      linear-gradient(180deg, rgba(21, 18, 43, 0) 0, rgba(21, 18, 43, .2) 160px, var(--ink) 300px),
      var(--e-fondo) 78% 0 / auto 320px no-repeat,
      var(--ink);
  }
}

/* ---------- Tarjeta en /juegos ---------- */
.e-tarjeta.e-tema--stars-bullet { border-color: var(--line); background-color: var(--surface); }
.e-tarjeta.e-tema--stars-bullet:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.e-tarjeta.e-tema--stars-bullet .e-tarjeta-media { border-bottom-color: var(--line); }
/* El wallpaper es horizontal: en la portada vertical se enfoca a las tres chicas, a la derecha. */
.e-tarjeta.e-tema--stars-bullet .e-tarjeta-media img { object-position: 80% center; }
.e-tarjeta.e-tema--stars-bullet .e-tarjeta-titulo { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; }
.e-tarjeta.e-tema--stars-bullet .e-tarjeta-texto { color: var(--muted); }
.e-tarjeta.e-tema--stars-bullet .e-tarjeta-accion { color: var(--accent); font-size: 12px; }