/* ============================================================
   THE MALVENTURE STORIES — Sistema de diseño
   Estética: Minecraft retro-cómic + neones azul / verde / rojo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400..700&family=Outfit:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  /* base */
  --bg:        #080b13;
  --bg2:       #0b0f1b;
  --panel:     #131a2b;
  --panel-2:   #1a2336;
  --panel-3:   #222d45;
  --stone:     #313c58;
  --stone-hi:  #46537a;
  --ink:       #eef1fb;
  --muted:     #98a3c4;
  --muted-2:   #6c769a;

  /* neones */
  --blue:   #36ccff;
  --blue-d: #0e8fc4;
  --green:  #4af08c;
  --green-d:#1da85a;
  --red:    #ff4d63;
  --red-d:  #c41f38;
  --gold:   #ffc63c;
  --purple: #b16bff;

  /* fuentes */
  --pixel: 'Press Start 2P', monospace;
  --pixel-2: 'Pixelify Sans', sans-serif;
  --body: 'Outfit', system-ui, sans-serif;
  --serif: 'Lora', Georgia, serif;

  --maxw: 1180px;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.pixelated{ image-rendering:pixelated; image-rendering:crisp-edges; }

/* ---------- fondo: cuadrícula + cubos flotantes ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(54,204,255,.10), transparent 60%),
    radial-gradient(800px 600px at 10% 110%, rgba(74,240,140,.08), transparent 60%),
    radial-gradient(700px 500px at 50% 50%, rgba(255,77,99,.05), transparent 70%),
    var(--bg);
}
body::after{ /* cuadrícula tipo bloque */
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(70,83,122,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,83,122,.06) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 95%);
}
#cube-field{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.cube{
  position:absolute; width:18px; height:18px; opacity:.5;
  border:2px solid currentColor;
  background:linear-gradient(135deg, currentColor 0 40%, transparent 41%);
  background-blend-mode:overlay;
  animation:float-up linear infinite;
  filter:drop-shadow(0 0 6px currentColor);
  border-radius:2px;
}
@keyframes float-up{
  0%{ transform:translateY(110vh) rotate(0deg); opacity:0; }
  10%{ opacity:.55; }
  90%{ opacity:.55; }
  100%{ transform:translateY(-15vh) rotate(220deg); opacity:0; }
}
/* prefers-reduced-motion: cubos seguirán visibles; JS reduce cantidad y velocidad */

/* ============================================================
   PANELES Y BOTONES estilo GUI de Minecraft
   ============================================================ */
.mc-panel{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10)),
    var(--panel);
  border:3px solid #05070d;
  box-shadow:
    inset 3px 3px 0 0 rgba(255,255,255,.07),
    inset -3px -4px 0 0 rgba(0,0,0,.5),
    0 0 0 3px var(--stone),
    0 14px 30px rgba(0,0,0,.45);
  padding:1.6rem;
}
.mc-panel.tight{ padding:1.1rem; }

.mc-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--pixel); font-size:.62rem; letter-spacing:.5px;
  color:var(--ink); text-transform:uppercase;
  background:var(--panel-2);
  border:3px solid #05070d;
  box-shadow:
    inset 2px 2px 0 0 rgba(255,255,255,.12),
    inset -2px -3px 0 0 rgba(0,0,0,.55),
    0 0 0 3px var(--stone);
  padding:.85rem 1.1rem; cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, color .15s;
}
.mc-btn:hover{ color:var(--blue); }
.mc-btn:active{
  transform:translateY(3px);
  box-shadow:
    inset 2px 2px 0 0 rgba(0,0,0,.4),
    0 0 0 3px var(--stone);
}
.mc-btn.blue:hover{ color:var(--blue); box-shadow:inset 2px 2px 0 0 rgba(255,255,255,.12),inset -2px -3px 0 0 rgba(0,0,0,.55),0 0 0 3px var(--blue-d),0 0 18px rgba(54,204,255,.4); }
.mc-btn.green:hover{ color:var(--green); box-shadow:inset 2px 2px 0 0 rgba(255,255,255,.12),inset -2px -3px 0 0 rgba(0,0,0,.55),0 0 0 3px var(--green-d),0 0 18px rgba(74,240,140,.4); }
.mc-btn.red:hover{ color:var(--red); box-shadow:inset 2px 2px 0 0 rgba(255,255,255,.12),inset -2px -3px 0 0 rgba(0,0,0,.55),0 0 0 3px var(--red-d),0 0 18px rgba(255,77,99,.4); }

/* etiquetas / chips pixel */
.tag{
  display:inline-block; font-family:var(--pixel); font-size:.5rem;
  letter-spacing:1px; text-transform:uppercase;
  padding:.45rem .6rem; color:var(--bg);
  background:var(--blue); border-radius:3px;
  box-shadow:0 0 12px rgba(54,204,255,.45);
}
.tag.green{ background:var(--green); box-shadow:0 0 12px rgba(74,240,140,.45); }
.tag.red{ background:var(--red); box-shadow:0 0 12px rgba(255,77,99,.45); color:#fff; }
.tag.gold{ background:var(--gold); box-shadow:0 0 12px rgba(255,198,60,.45); }
.tag.muted{ background:var(--stone); color:var(--ink); box-shadow:none; }

/* ---------- texto neón ---------- */
.neon-blue{ color:var(--blue); text-shadow:0 0 8px rgba(54,204,255,.7),0 0 22px rgba(54,204,255,.35); }
.neon-green{ color:var(--green); text-shadow:0 0 8px rgba(74,240,140,.7),0 0 22px rgba(74,240,140,.35); }
.neon-red{ color:var(--red); text-shadow:0 0 8px rgba(255,77,99,.7),0 0 22px rgba(255,77,99,.35); }
.neon-gold{ color:var(--gold); text-shadow:0 0 8px rgba(255,198,60,.7),0 0 22px rgba(255,198,60,.35); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.section{ padding:4rem 0; }
.section.tight{ padding:2.5rem 0; }

h1,h2,h3{ font-family:var(--pixel-2); font-weight:700; line-height:1.1; letter-spacing:.5px; }
.eyebrow{
  font-family:var(--pixel); font-size:.58rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted-2);
  display:inline-block; margin-bottom:1rem;
}
.section-title{ font-size:clamp(1.6rem,4vw,2.6rem); margin-bottom:.4rem; }
.section-sub{ color:var(--muted); max-width:60ch; margin-bottom:2.2rem; }

/* ============================================================
   NAVBAR  (inyectada por site.js)
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,11,19,.82);
  backdrop-filter:blur(10px);
  border-bottom:3px solid #05070d;
  box-shadow:0 3px 0 0 var(--stone), 0 10px 30px rgba(0,0,0,.5);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:.6rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
}
.nav-brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.nav-brand img{ height:42px; width:auto; border-radius:4px; }
.nav-brand b{ font-family:var(--pixel); font-size:.6rem; line-height:1.4; color:var(--ink); }
.nav-brand b span{ color:var(--blue); }
.nav-links{ display:flex; gap:.25rem; margin-left:auto; flex-wrap:wrap; }
.nav-links a{
  font-family:var(--pixel); font-size:.55rem; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted);
  padding:.65rem .7rem; border-radius:4px; transition:.15s; white-space:nowrap;
}
.nav-links a:hover{ color:var(--ink); background:rgba(70,83,122,.25); }
.nav-links a.active{ color:var(--blue); text-shadow:0 0 10px rgba(54,204,255,.6); }
.nav-toggle{ display:none; margin-left:auto; }

@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    background:rgba(8,11,19,.97); border-bottom:3px solid var(--stone);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{ max-height:560px; }
  .nav-links a{ padding:1rem 1.25rem; border-top:1px solid rgba(70,83,122,.2); }
}

/* ============================================================
   HERO portada
   ============================================================ */
.hero{ position:relative; padding:3.5rem 0 1rem; text-align:center; }
.hero-logo{
  max-width:560px; width:90%; margin:0 auto 1.4rem;
  border-radius:10px;
  filter:drop-shadow(0 0 40px rgba(54,204,255,.25));
  animation:logo-in .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes logo-in{ from{ opacity:0; transform:translateY(20px) scale(.96);} to{opacity:1;transform:none;} }
.hero h1{
  font-family:var(--pixel); font-size:clamp(.9rem,2.6vw,1.5rem);
  line-height:1.7; letter-spacing:1px; margin-bottom:1.1rem;
}
.hero p.lead{ color:var(--muted); max-width:58ch; margin:0 auto 1.8rem; font-size:1.05rem; }
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

.server-meta{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem;
}
.server-meta .chip{
  font-family:var(--pixel); font-size:.52rem; color:var(--muted);
  background:var(--panel); border:2px solid var(--stone);
  padding:.55rem .7rem; border-radius:4px;
}
.server-meta .chip b{ color:var(--ink); }

/* ============================================================
   GRID DE SECCIONES (portada)
   ============================================================ */
.tile-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.1rem;
}
.tile{
  display:block; position:relative; overflow:hidden;
  text-decoration:none; min-height:170px;
  transition:transform .12s ease;
}
.tile:hover{ transform:translateY(-4px); }
.tile .tile-body{ height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.tile h3{ font-family:var(--pixel-2); font-size:1.45rem; margin-bottom:.2rem; }
.tile p{ color:var(--muted); font-size:.92rem; }
.tile .tile-ico{ font-size:1.6rem; margin-bottom:auto; }
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 0 transparent; transition:.2s;
}
.tile:hover.accent-blue::after{ box-shadow:inset 0 -4px 0 0 var(--blue), 0 0 26px rgba(54,204,255,.25); }
.tile:hover.accent-green::after{ box-shadow:inset 0 -4px 0 0 var(--green), 0 0 26px rgba(74,240,140,.25); }
.tile:hover.accent-red::after{ box-shadow:inset 0 -4px 0 0 var(--red), 0 0 26px rgba(255,77,99,.25); }
.tile:hover.accent-gold::after{ box-shadow:inset 0 -4px 0 0 var(--gold), 0 0 26px rgba(255,198,60,.25); }

/* ============================================================
   GALERÍA DE PERSONAJES
   ============================================================ */
.char-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.3rem;
}
.char-card{
  position:relative; overflow:hidden; cursor:pointer;
  padding:0; transition:transform .14s ease;
}
.char-card:hover{ transform:translateY(-5px); }
.char-card .portrait{
  aspect-ratio:1/1.18; overflow:hidden; background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  border-bottom:3px solid #05070d;
}
.char-card .portrait img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.char-card .portrait.placeholder{ position:relative; }
.char-card .info{ padding:1rem 1.1rem 1.2rem; }
.char-card .info h3{ font-size:1.4rem; }
.char-card .info .role{
  font-family:var(--pixel); font-size:.5rem; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted-2); margin:.4rem 0 .7rem;
}
.char-card .info .quote{ font-style:italic; color:var(--muted); font-size:.9rem; }
.char-card .bar{ height:5px; }

/* ============================================================
   PERFIL DE PERSONAJE
   ============================================================ */
.char-hero{ padding:3rem 0 1rem; }
.char-hero .eyebrow a{ color:var(--muted-2); }
.char-hero .eyebrow a:hover{ color:var(--ink); }
.char-name{ font-family:var(--pixel); font-size:clamp(1.4rem,5vw,2.6rem); margin:.6rem 0 .8rem; }
.char-quote{
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  color:var(--muted); border-left:4px solid var(--stone); padding-left:1rem; max-width:50ch;
}
.profile-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:2rem; align-items:start; }
@media (max-width:880px){ .profile-grid{ grid-template-columns:1fr; } }
.ficha-frame img{ width:100%; border-radius:6px; }
.ficha-frame.placeholder{
  aspect-ratio:1/1.2; display:flex; flex-direction:column; gap:1rem;
  align-items:center; justify-content:center; color:var(--muted-2); text-align:center;
}
.stat-list{ list-style:none; display:grid; gap:.1rem; }
.stat-list li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem .2rem; border-bottom:1px dashed rgba(108,118,154,.25);
}
.stat-list .k{ font-family:var(--pixel); font-size:.52rem; letter-spacing:.5px; color:var(--muted-2); text-transform:uppercase; }
.stat-list .v{ font-weight:600; text-align:right; }
.lore-block h3{ font-size:1.5rem; margin:2rem 0 .8rem; }
.lore-block p{ color:#d4dbef; margin-bottom:1rem; }
.lore-block .filler{
  border-left:3px solid var(--gold); background:rgba(255,198,60,.06);
  padding:.9rem 1rem; font-size:.92rem; color:var(--muted);
}

/* ============================================================
   GALERÍA DE IMÁGENES (modpack, builds)
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.1rem; }
.shot{ position:relative; overflow:hidden; border:3px solid #05070d; box-shadow:0 0 0 3px var(--stone); border-radius:4px; }
.shot img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .3s; }
.shot:hover img{ transform:scale(1.05); }
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(5,7,13,.92));
  padding:1.4rem .9rem .7rem; font-family:var(--pixel); font-size:.5rem;
  letter-spacing:.5px; text-transform:uppercase;
}

/* mod list */
.mod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.9rem; }
.mod{ display:flex; gap:.8rem; align-items:flex-start; }
.mod .dot{ width:12px; height:12px; flex-shrink:0; margin-top:5px; border-radius:2px; box-shadow:0 0 10px currentColor; }
.mod h4{ font-family:var(--pixel-2); font-size:1.1rem; }
.mod p{ color:var(--muted); font-size:.88rem; }

/* ============================================================
   TIMELINE eventos / roadmap
   ============================================================ */
.timeline{ position:relative; padding-left:2rem; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:3px; background:var(--stone); }
.tl-item{ position:relative; margin-bottom:1.6rem; }
.tl-item::before{
  content:""; position:absolute; left:-2rem; top:4px; width:17px; height:17px;
  background:var(--blue); border:3px solid var(--bg);
  box-shadow:0 0 12px rgba(54,204,255,.6); border-radius:3px;
}
.tl-item.green::before{ background:var(--green); box-shadow:0 0 12px rgba(74,240,140,.6); }
.tl-item.red::before{ background:var(--red); box-shadow:0 0 12px rgba(255,77,99,.6); }
.tl-item.gold::before{ background:var(--gold); box-shadow:0 0 12px rgba(255,198,60,.6); }
.tl-date{ font-family:var(--pixel); font-size:.5rem; letter-spacing:1px; color:var(--muted-2); text-transform:uppercase; }
.tl-item h4{ font-family:var(--pixel-2); font-size:1.25rem; margin:.3rem 0; }
.tl-item p{ color:var(--muted); font-size:.95rem; }

/* roadmap status badges */
.status{ font-family:var(--pixel); font-size:.45rem; padding:.3rem .5rem; border-radius:3px; letter-spacing:.5px; text-transform:uppercase; }
.status.done{ background:var(--green-d); color:#fff; }
.status.wip{ background:var(--gold); color:#1a1205; }
.status.plan{ background:var(--stone); color:var(--ink); }

/* ============================================================
   NOVELA
   ============================================================ */
.novel-wrap{ max-width:760px; margin:0 auto; }
.novel-chapter{ margin-bottom:3.5rem; }
.novel-chapter .ch-num{ font-family:var(--pixel); font-size:.55rem; letter-spacing:2px; color:var(--blue); text-transform:uppercase; }
.novel-chapter h2{ font-family:var(--serif); font-weight:600; font-size:2rem; margin:.5rem 0 1.6rem; }
.novel-chapter p{ font-family:var(--serif); font-size:1.1rem; line-height:1.85; color:#dfe4f3; margin-bottom:1.2rem; }
.novel-chapter .sep{ text-align:center; color:var(--stone-hi); margin:1.8rem 0; letter-spacing:.6rem; }
.novel-chapter p.firstline:first-letter{
  font-family:var(--pixel-2); font-size:3.2rem; float:left; line-height:.8;
  padding:.1em .12em 0 0; color:var(--blue);
}
.novel-toc{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }

/* ============================================================
   FOOTER  (inyectado)
   ============================================================ */
.footer{
  border-top:3px solid #05070d; box-shadow:0 -3px 0 0 var(--stone);
  margin-top:3rem; padding:2.4rem 0; background:rgba(8,11,19,.6);
}
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.footer-inner .f-brand{ display:flex; align-items:center; gap:.7rem; }
.footer-inner img{ height:46px; border-radius:4px; }
.footer-inner b{ font-family:var(--pixel); font-size:.6rem; color:var(--ink); }
.footer small{ color:var(--muted-2); font-size:.82rem; display:block; margin-top:.3rem; }
.footer-links{ display:flex; gap:1rem; flex-wrap:wrap; }
.footer-links a{ font-family:var(--pixel); font-size:.5rem; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; }
.footer-links a:hover{ color:var(--blue); }
.footer-disclaimer{
  max-width:var(--maxw); margin:1rem auto 0; padding:.9rem 1.25rem 0;
  border-top:1px solid rgba(70,83,122,.25);
  font-size:.8rem; color:var(--muted-2); line-height:1.6; text-align:center;
}

/* ============================================================
   COMICS
   ============================================================ */
.comic-index{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1rem; margin-top:1.4rem;
}
.comic-chip{
  display:flex; flex-direction:column; gap:.4rem;
  text-decoration:none; color:inherit;
  transition:transform .13s ease;
  min-height:140px;
}
.comic-chip:hover{ transform:translateY(-5px); }
.comic-chip .chip-num{ font-family:var(--pixel); font-size:.5rem; letter-spacing:2px; color:var(--acc,var(--blue)); }
.comic-chip h3{ font-family:var(--pixel-2); font-size:1.15rem; line-height:1.2; }
.comic-chip .chip-desc{ color:var(--muted); font-size:.88rem; flex:1; }
.comic-chip .chip-footer{ margin-top:.7rem; }
.comic-chip-soon{ opacity:.4; cursor:default; }
.comic-chip-soon:hover{ transform:none; }

.comic-divider{
  display:flex; align-items:center; gap:1.2rem;
  justify-content:space-between; flex-wrap:wrap;
  padding:1.2rem 0 1.4rem;
  border-bottom:3px solid var(--stone);
  margin-bottom:1.8rem;
  scroll-margin-top:80px;
}
.comic-divider .left{ flex:1; min-width:0; }
.comic-divider .left h2{ font-size:clamp(1.4rem,3.5vw,2rem); margin:.3rem 0 .5rem; }
.comic-divider .left p{ color:var(--muted); font-size:.95rem; }

.comic-pages{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1.1rem;
}
.comic-page{
  position:relative; overflow:hidden;
  border:3px solid #05070d;
  box-shadow:0 0 0 3px var(--stone), 0 8px 20px rgba(0,0,0,.4);
  border-radius:4px; aspect-ratio:3/4;
  background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  transition:transform .13s ease, box-shadow .13s ease;
}
.comic-page img{ width:100%; height:100%; object-fit:cover; display:block; }
.comic-page:hover{ transform:translateY(-4px); box-shadow:0 0 0 3px var(--stone),0 16px 36px rgba(0,0,0,.55); }
.comic-page .page-label{
  position:absolute; bottom:.5rem; right:.55rem;
  font-family:var(--pixel); font-size:.42rem; letter-spacing:.5px;
  background:rgba(5,7,13,.82); color:var(--muted-2);
  padding:.3rem .45rem; border-radius:3px;
}
.comic-page-placeholder{
  text-align:center; color:var(--muted-2);
  font-family:var(--pixel); font-size:.55rem; line-height:2.2;
  pointer-events:none;
}
.comic-back{
  margin-top:1.4rem; display:flex; align-items:center; gap:.5rem;
  font-family:var(--pixel); font-size:.5rem; letter-spacing:.5px;
  color:var(--muted-2); cursor:pointer; width:fit-content;
  text-decoration:none; transition:color .15s;
}
.comic-back:hover{ color:var(--ink); }

/* páginas landscape (horizontales) apiladas */
.comic-pages-wide{
  display:flex; flex-direction:column; gap:1.2rem;
}
.comic-pages-wide .comic-page{
  aspect-ratio:unset; width:100%; height:auto;
}
.comic-pages-wide .comic-page img{
  width:100%; height:auto; object-fit:unset;
}

/* portada del cómic */
.comic-cover{
  max-width:380px; margin:0 auto 2.8rem;
  border:3px solid #05070d;
  box-shadow:0 0 0 3px var(--stone), 0 28px 70px rgba(0,0,0,.75);
  border-radius:4px; overflow:hidden; cursor:zoom-in;
}
.comic-cover img{ width:100%; display:block; }

/* capítulos dentro de un cómic */
.comic-chapter{ margin-top:2.4rem; }
.comic-chapter-header{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.6rem 0 1rem; border-bottom:2px solid var(--stone);
  margin-bottom:1.4rem;
}
.comic-chapter-header .ch-num{
  font-family:var(--pixel); font-size:.52rem; letter-spacing:1.5px;
  color:var(--acc,var(--blue)); text-transform:uppercase;
}
.comic-chapter-header h3{ font-family:var(--pixel-2); font-size:1.3rem; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
#lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,7,13,.93);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
#lightbox.open{ opacity:1; pointer-events:all; }
#lightbox img{
  max-width:min(92vw,1080px); max-height:88vh;
  image-rendering:pixelated; image-rendering:crisp-edges;
  border:3px solid #05070d;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.07),
    inset -3px -4px 0 rgba(0,0,0,.5),
    0 0 0 3px var(--stone),
    0 24px 70px rgba(0,0,0,.85);
  border-radius:4px;
  transform:scale(.94); transition:transform .22s ease;
}
#lightbox.open img{ transform:scale(1); }
#lb-close{
  position:fixed; top:1.1rem; right:1.1rem;
  font-family:var(--pixel); font-size:.62rem; letter-spacing:.5px;
  color:var(--ink); text-transform:uppercase;
  background:var(--panel-2);
  border:3px solid #05070d;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.12),
    inset -2px -3px 0 rgba(0,0,0,.55),
    0 0 0 3px var(--stone);
  padding:.7rem .95rem; cursor:pointer; transition:color .15s;
  z-index:2;
}
#lb-close:hover{ color:var(--red); box-shadow:inset 2px 2px 0 rgba(255,255,255,.12),inset -2px -3px 0 rgba(0,0,0,.55),0 0 0 3px var(--red-d),0 0 14px rgba(255,77,99,.35); }
#lb-prev, #lb-next{
  position:fixed; top:50%; transform:translateY(-50%);
  font-family:var(--pixel); font-size:.8rem; line-height:1;
  color:var(--ink);
  background:var(--panel-2);
  border:3px solid #05070d;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.12),
    inset -2px -3px 0 rgba(0,0,0,.55),
    0 0 0 3px var(--stone);
  padding:.8rem .9rem; cursor:pointer;
  transition:color .15s, opacity .15s, box-shadow .15s;
  z-index:2;
}
#lb-prev{ left:1.1rem; }
#lb-next{ right:1.1rem; }
#lb-prev:hover, #lb-next:hover{ color:var(--blue); box-shadow:inset 2px 2px 0 rgba(255,255,255,.12),inset -2px -3px 0 rgba(0,0,0,.55),0 0 0 3px var(--blue-d),0 0 14px rgba(54,204,255,.35); }
#lb-prev:disabled, #lb-next:disabled{ opacity:.2; cursor:default; pointer-events:none; }
#lb-counter{
  position:fixed; bottom:1.3rem; left:50%; transform:translateX(-50%);
  font-family:var(--pixel); font-size:.5rem; letter-spacing:1px;
  color:var(--muted); background:rgba(5,7,13,.78);
  padding:.45rem .9rem; border-radius:4px;
  border:2px solid var(--stone); z-index:2;
}
#lightbox img{ transition:transform .22s ease, opacity .18s ease; }
.lb-trigger{ cursor:zoom-in !important; }

/* reveal on load */
.reveal{ opacity:0; transform:translateY(18px); animation:reveal .6s ease forwards; }
@keyframes reveal{ to{ opacity:1; transform:none; } }

/* accent helpers for character theming */
.acc-blue{ --acc:var(--blue); --acc-d:var(--blue-d); }
.acc-green{ --acc:var(--green); --acc-d:var(--green-d); }
.acc-red{ --acc:var(--red); --acc-d:var(--red-d); }
.acc-gold{ --acc:var(--gold); --acc-d:#b88407; }
.acc-purple{ --acc:var(--purple); --acc-d:#7d33d6; }
.themed-name{ color:var(--acc); text-shadow:0 0 10px color-mix(in srgb, var(--acc) 60%, transparent); }
.themed-bar{ background:var(--acc); box-shadow:0 0 14px var(--acc); }

/* ============================================================
   ANIMACIONES SUTILES — neón + fondo
   ============================================================ */

/* --- fondo: los orbs de gradiente respiran suavemente --- */
@keyframes bg-breathe{
  0%,100%{ opacity:.72; }
  50%{     opacity:1;   }
}

/* --- fondo: la cuadrícula de bloques deriva lentamente --- */
@keyframes grid-drift{
  to{ background-position:38px 38px, 38px 38px; }
}

/* --- barra de color en tarjetas: brillo pulsante --- */
@keyframes bar-pulse{
  0%,100%{ filter:brightness(1)   blur(0px);  }
  50%{     filter:brightness(1.6) blur(.8px); }
}

/* --- glow de panel por color (incluye las sombras base íntegras) --- */
@keyframes glow-blue{
  0%,100%{ box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 0px rgba(54,204,255,0); }
  50%{     box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 24px rgba(54,204,255,.22); }
}
@keyframes glow-green{
  0%,100%{ box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 0px rgba(74,240,140,0); }
  50%{     box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 24px rgba(74,240,140,.22); }
}
@keyframes glow-red{
  0%,100%{ box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 0px rgba(255,77,99,0); }
  50%{     box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 24px rgba(255,77,99,.22); }
}
@keyframes glow-gold{
  0%,100%{ box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 0px rgba(255,198,60,0); }
  50%{     box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 24px rgba(255,198,60,.22); }
}
@keyframes glow-purple{
  0%,100%{ box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 0px rgba(177,107,255,0); }
  50%{     box-shadow:inset 3px 3px 0 0 rgba(255,255,255,.07),inset -3px -4px 0 0 rgba(0,0,0,.5),0 0 0 3px var(--stone),0 14px 30px rgba(0,0,0,.45),0 0 24px rgba(177,107,255,.22); }
}

@keyframes glow-gold-dot{
  0%,100%{ box-shadow:0 0 6px var(--gold);  opacity:.7; }
  50%{     box-shadow:0 0 14px var(--gold); opacity:1;  }
}

/* ---- Animaciones: se aplican a todos los usuarios ---- */

/* fondo */
body::before{ animation: bg-breathe 14s ease-in-out infinite; }
body::after { animation: grid-drift 55s linear infinite; }

/* barra de color en tarjetas de personaje */
.char-card .themed-bar{ animation: bar-pulse 5s ease-in-out infinite; }

/* tarjetas de la galería — glow según acento, delays escalonados */
.char-card.acc-blue  { animation: glow-blue   6s ease-in-out infinite; }
.char-card.acc-green { animation: glow-green  6s ease-in-out infinite  .8s; }
.char-card.acc-red   { animation: glow-red    6s ease-in-out infinite  1.6s; }
.char-card.acc-gold  { animation: glow-gold   6s ease-in-out infinite  2.4s; }
.char-card.acc-purple{ animation: glow-purple 6s ease-in-out infinite  3.2s; }

/* tiles de la portada — glow sincronizado (misma velocidad, sin escalonado) */
.tile.accent-blue  { animation: glow-blue   6s ease-in-out infinite; }
.tile.accent-green { animation: glow-green  6s ease-in-out infinite; }
.tile.accent-red   { animation: glow-red    6s ease-in-out infinite; }
.tile.accent-gold  { animation: glow-gold   6s ease-in-out infinite; }

/* paneles en la página de perfil de personaje */
#char-profile.acc-blue   .mc-panel{ animation: glow-blue   5.5s ease-in-out infinite; }
#char-profile.acc-green  .mc-panel{ animation: glow-green  5.5s ease-in-out infinite; }
#char-profile.acc-red    .mc-panel{ animation: glow-red    5.5s ease-in-out infinite; }
#char-profile.acc-gold   .mc-panel{ animation: glow-gold   5.5s ease-in-out infinite; }
#char-profile.acc-purple .mc-panel{ animation: glow-purple 5.5s ease-in-out infinite; }

/* el segundo panel del perfil arranca desfasado */
#char-profile .mc-panel:last-child{ animation-delay: 1.2s; }

/* ---- Reducción de movimiento: animaciones más lentas y suaves ---- */
@media (prefers-reduced-motion: reduce){
  body::before{ animation-duration: 45s; }
  body::after { animation-duration: 130s; }

  .char-card .themed-bar{ animation-duration: 18s; }

  .char-card.acc-blue,
  .char-card.acc-green,
  .char-card.acc-red,
  .char-card.acc-gold,
  .char-card.acc-purple{ animation-duration: 22s; }

  .tile.accent-blue,
  .tile.accent-green,
  .tile.accent-red,
  .tile.accent-gold{ animation-duration: 22s; }

  #char-profile.acc-blue   .mc-panel,
  #char-profile.acc-green  .mc-panel,
  #char-profile.acc-red    .mc-panel,
  #char-profile.acc-gold   .mc-panel,
  #char-profile.acc-purple .mc-panel{ animation-duration: 20s; }
}