/* =========================================================================
   Legion Lunari — MSI 2026  ·  Álbum virtual
   Paleta:  tinta negra + carmesí sangre + oro + hueso
   ========================================================================= */

:root{
  --ink:        #0a0507;
  --ink-2:      #140a0d;
  --ink-3:      #1d1013;
  --blood:      #3a0a10;
  --crimson:    #c01f2a;
  --crimson-lo: #7d121b;
  --gold:       #d4a24a;
  --gold-hi:    #f2ce7e;
  --bone:       #ece7dd;
  --ash:        #b3a49c;
  --ash-dim:    #7d7069;
  --ember:      #ff6a3d;

  /* Acentos por rareza */
  --r-rara:       #8fb7c9;
  --r-especial:   #e0563f;
  --r-epica:      #b06cff;
  --r-legendaria: #f2ce7e;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-hud:     "Rajdhani", "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
  --font-anton:   "Anton", "Oswald", sans-serif;      /* nombre de ficha */
  --font-bebas:   "Bebas Neue", "Oswald", sans-serif; /* rareza */
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-body);
  color:var(--bone);
  background:
    radial-gradient(120% 90% at 50% -10%, #2a0b10 0%, #150609 42%, var(--ink) 100%);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }

/* ===============================  LOGIN  =============================== */

.login-body{
  min-height:100dvh;
  display:grid;
  place-items:center;
  position:relative;
  padding:24px;
}
#embers, #dust{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.login-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%),
    radial-gradient(120% 120% at 50% -20%, rgba(192,31,42,.28), transparent 55%);
}

.login-wrap{ position:relative; z-index:2; width:100%; max-width:460px; }
.login-card{
  position:relative;
  padding:44px 38px 30px;
  border:1px solid rgba(212,162,74,.28);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(29,16,19,.86), rgba(10,5,7,.92));
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(242,206,126,.14);
  backdrop-filter:blur(6px);
  text-align:center;
}
.login-card::before{
  content:""; position:absolute; inset:6px; border-radius:14px;
  border:1px solid rgba(242,206,126,.10); pointer-events:none;
}

.eyebrow{
  font-family:var(--font-hud);
  letter-spacing:.42em; text-transform:uppercase;
  font-size:.66rem; font-weight:600;
  color:var(--gold); margin:0 0 18px;
}
.login-logo{
  display:block; width:88px; height:88px; object-fit:contain;
  margin:0 auto 14px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));
  animation:logoRise .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes logoRise{ from{opacity:0; transform:translateY(10px) scale(.94);} to{opacity:1;} }
.login-title{
  margin:0; line-height:.82;
  font-family:var(--font-anton); font-weight:400; text-transform:uppercase;
  font-size:clamp(3.4rem,13vw,5rem); letter-spacing:.02em; color:var(--bone);
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
.login-title span{
  font-size:.28em; vertical-align:top; letter-spacing:.28em;
  margin-left:.35em; color:var(--gold-hi);
}
.login-album{
  margin:6px 0 0; font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.34em; font-size:clamp(.9rem,2.5vw,1.15rem);
  background:linear-gradient(180deg,var(--gold-hi),#9c6f28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-rule{
  height:1px; margin:18px auto; max-width:200px;
  background:linear-gradient(90deg,transparent,rgba(212,162,74,.6),transparent);
}
.login-sub{
  margin:0 0 24px; color:var(--ash);
  font-size:.92rem; line-height:1.65;
}

.login-actions{ display:grid; gap:12px; text-align:left; }
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:6px; border:1px solid transparent;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; color:var(--bone);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-discord{ background:#5865F2; color:#fff; }
.btn-discord:hover{ background:#4a54d6; }
.btn-primary{
  width:100%; background:var(--crimson); color:#fff;
  border:1px solid rgba(242,206,126,.28);
}
.btn-primary:hover{ background:#d3222e; border-color:rgba(242,206,126,.6); }

.divider{
  display:flex; align-items:center; gap:12px;
  color:var(--ash-dim); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-family:var(--font-hud); margin:4px 0;
}
.divider::before,.divider::after{
  content:""; flex:1; height:1px; background:rgba(255,255,255,.08);
}

.field{ display:block; }
.field-label{
  display:block; font-family:var(--font-hud); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
  margin-bottom:7px;
}
.guest-form input{
  width:100%; padding:13px 15px; margin-bottom:12px;
  border-radius:6px; border:1px solid rgba(212,162,74,.24);
  background:rgba(0,0,0,.35); color:var(--bone);
  font-family:var(--font-display); font-weight:500; font-size:1rem; letter-spacing:.04em;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.guest-form input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,162,74,.18);
}
.guest-form input::placeholder{ color:var(--ash-dim); font-weight:400; }

.toast{
  margin:0 0 20px; padding:12px 14px;
  border-radius:11px; font-size:.85rem; line-height:1.5;
  background:rgba(192,31,42,.14); border:1px solid rgba(212,162,74,.3);
  color:var(--bone);
}
.login-foot{
  margin:26px 0 0; text-align:center;
  font-family:var(--font-display); font-weight:500; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ash-dim);
}

/* =====================  LOGIN 3D (álbum cerrado)  ==================== */
.login3d{
  position:relative; z-index:2; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(30px,6vw,90px); flex-wrap:wrap;
  padding:40px 24px;
}

/* --- escena + libro 3D --- */
.book3d-scene{
  --bw:300px; --bh:424px; --bd:38px;   /* ancho, alto, grosor */
  position:relative; flex:0 0 auto;
  width:var(--bw); height:var(--bh);
  perspective:1400px; cursor:pointer;
}
/* respaldo: si el JS no corre, al menos rota al pasar el mouse */
.book3d-scene:hover .book3d{ transform:rotateY(-8deg) rotateX(4deg); }
@media (max-width:520px){ .book3d-scene{ --bw:230px; --bh:325px; --bd:30px; } }

.book3d-shadow{
  position:absolute; left:50%; bottom:-46px; width:78%; height:44px;
  transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.7), transparent 72%);
  filter:blur(9px);
}
.book3d{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateY(-22deg) rotateX(8deg);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.b3d-face{ position:absolute; top:50%; left:50%; }
.b3d-front, .b3d-back{
  width:var(--bw); height:var(--bh);
  margin:calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
  border-radius:3px 7px 7px 3px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.b3d-front{ transform:translateZ(calc(var(--bd) / 2)); }
.b3d-front img{ width:100%; height:100%; object-fit:cover; display:block; }
.b3d-back{
  transform:rotateY(180deg) translateZ(calc(var(--bd) / 2));
  background:linear-gradient(145deg,#26080d,#100407);
}
.b3d-pages{   /* canto derecho: hojas */
  width:var(--bd); height:var(--bh);
  margin:calc(var(--bh) / -2) 0 0 calc(var(--bd) / -2);
  transform:rotateY(90deg) translateZ(calc(var(--bw) / 2));
  background:repeating-linear-gradient(to right,
    #efe9dc, #efe9dc 1px, #c3baa8 2px, #efe9dc 3px);
  border-radius:0 2px 2px 0;
}
.b3d-spine{   /* lomo izquierdo */
  width:var(--bd); height:var(--bh);
  margin:calc(var(--bh) / -2) 0 0 calc(var(--bd) / -2);
  transform:rotateY(-90deg) translateZ(calc(var(--bw) / 2));
  background:linear-gradient(90deg,#3a0a10,#7d121b 55%,#3a0a10);
  box-shadow:inset 0 0 14px rgba(0,0,0,.6);
}
.b3d-top, .b3d-bottom{
  width:var(--bw); height:var(--bd);
  margin:calc(var(--bd) / -2) 0 0 calc(var(--bw) / -2);
  background:repeating-linear-gradient(to right,
    #efe9dc, #efe9dc 1px, #c3baa8 2px, #efe9dc 3px);
}
.b3d-top{ transform:rotateX(90deg) translateZ(calc(var(--bh) / 2)); }
.b3d-bottom{ transform:rotateX(-90deg) translateZ(calc(var(--bh) / 2)); }

/* --- panel de acceso --- */
.login3d-panel{
  flex:0 1 380px; max-width:400px; text-align:left;
}
.login3d-panel .login-logo{ width:64px; height:64px; margin:0 0 16px; }
.login3d-panel .eyebrow{ margin-bottom:12px; }
.panel-title{
  margin:0 0 12px; font-family:var(--font-anton); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:.9;
  font-size:clamp(2.4rem,6vw,3.2rem); color:var(--bone);
}
.login3d-panel .login-sub{ margin:0 0 24px; }
.login3d-panel .login-actions{ text-align:left; }
.login3d-panel .login-foot{ text-align:left; }

/* ===============================  ÁLBUM  ============================== */

/* overflow oculto permanente: el álbum cabe en pantalla y así la scrollbar nunca
   aparece durante el hojeo (evita que StPageFlip se re-renderice al cambiar el ancho). */
.album-body{ min-height:100dvh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }

.hud{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px clamp(14px,3vw,30px);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, rgba(212,162,74,.5), rgba(192,31,42,.5), transparent) 1;
  background:linear-gradient(180deg, rgba(8,4,6,.94), rgba(8,4,6,.62));
  backdrop-filter:blur(8px);
}
.hud-left{ display:flex; align-items:center; gap:11px; min-width:0; }
.hud-logo{
  width:34px; height:34px; object-fit:contain; flex:0 0 auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.hud-brandwrap{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.hud-brand{
  font-family:var(--font-display); font-weight:600; letter-spacing:.22em;
  font-size:1.02rem; line-height:1; color:var(--bone); text-transform:uppercase;
}
.hud-user{
  font-family:var(--font-display); font-weight:500; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash-dim);
}
.hud-tabs{
  display:flex; gap:4px; flex-wrap:wrap; justify-content:center;
  flex:1; min-width:0;
}
.tab{
  font-family:var(--font-display); font-weight:500; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 13px; border-radius:3px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02); color:var(--ash);
  transition:all .18s ease; white-space:nowrap;
}
.tab:hover{ color:var(--bone); border-color:rgba(212,162,74,.45); background:rgba(212,162,74,.08); }
.tab.active{
  color:var(--ink); background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  border-color:var(--gold-hi); font-weight:600;
}
.hud-right{ display:flex; align-items:center; gap:16px; }
.progress{ display:flex; flex-direction:column; gap:5px; width:132px; }
.progress-count{
  font-family:var(--font-display); font-weight:600; font-size:.82rem;
  letter-spacing:.08em; color:var(--gold-hi); text-align:right;
}
.progress-bar{
  height:4px; border-radius:999px; background:rgba(255,255,255,.09);
  overflow:hidden;
}
.progress-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--crimson),var(--gold));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.hud-logout{
  font-family:var(--font-display); font-weight:500; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--ash); padding:6px 13px; border-radius:3px;
  border:1px solid rgba(255,255,255,.1); transition:all .18s ease;
}
.hud-logout:hover{ color:#fff; border-color:var(--crimson); background:rgba(192,31,42,.16); }

/* ---- Escenario + libro ---- */
.stage{
  position:relative; z-index:10; flex:1;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(6px,2vw,26px);
  padding:clamp(14px,3vw,34px);
}
/* ---- Libro con StPageFlip (páginas = arte real del PDF) ---- */
.book-wrap{
  position:relative;
  /* el 3er término impide que el libro sobrepase el alto de la ventana.
     Las páginas son formato A (relación alto/ancho ~1.414). */
  width:min(1180px, 94vw, calc((100dvh - 130px) * 1.414));
}
.book{ width:100%; margin:0 auto; }
.page{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  background:#0b0507;
}
.page-hard{ background:#0b0507; }
/* imagen de la página del PDF */
.page-bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:fill;
  user-select:none; -webkit-user-drag:none;
}

/* ---- Huecos: donde se "pegan" las figuras ---- */
.slot-hot{
  position:absolute; z-index:2;
}
.slot-hot.r-rara{ --slot-accent:var(--r-rara); }
.slot-hot.r-especial{ --slot-accent:var(--r-especial); }
.slot-hot.r-epica{ --slot-accent:var(--r-epica); }
.slot-hot.r-legendaria{ --slot-accent:var(--r-legendaria); }

/* hueco vacío: un leve pálpito para saber que se puede coleccionar */
.slot-hot.empty{ border-radius:4px; transition:box-shadow .25s ease; }
.slot-hot.empty:hover{
  box-shadow:0 0 0 2px rgba(242,206,126,.45), 0 0 18px -2px rgba(242,206,126,.5);
}

/* figura pegada */
.slot-hot.filled{ cursor:pointer; }
.slot-sticker{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:3%;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.85);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  -webkit-user-drag:none;
}
/* elevación + glow al pasar el mouse (el glow exterior no se recorta) */
.slot-hot.filled:hover .slot-sticker{
  transform:translateY(-4%) scale(1.05);
  box-shadow:0 16px 34px -10px rgba(0,0,0,.95), 0 0 22px -4px var(--slot-accent,var(--gold));
  filter:saturate(1.05);
}
/* barrido holográfico: recortado a la carta para que NO se escape */
.slot-shine{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  overflow:hidden; border-radius:3%;
  transition:transform .22s ease;
}
.slot-shine::before{
  content:""; position:absolute; inset:-12%;
  transform:translateX(-130%); opacity:0; mix-blend-mode:screen;
  transition:transform .6s ease, opacity .25s ease;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 48%,
            var(--slot-accent,rgba(176,108,255,.5)) 52%, transparent 60%);
}
.slot-hot.filled:hover .slot-shine{ transform:translateY(-4%) scale(1.05); }
.slot-hot.filled:hover .slot-shine::before{ transform:translateX(130%); opacity:1; }

.book-hint{
  position:absolute; left:0; right:0; bottom:-28px; margin:0;
  text-align:center; font-family:var(--font-hud); letter-spacing:.16em;
  text-transform:uppercase; font-size:.68rem; color:var(--ash-dim);
  transition:opacity .5s ease; pointer-events:none;
}
.book-hint.gone{ opacity:0; }

/* aspecto de la página (papel del álbum) */
.leaf{
  position:relative; width:100%; height:100%;
  padding:clamp(14px,2.4vw,30px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #1c0e12, #0d0608);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6);
}
.leaf::after{ /* textura sutil */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%, rgba(192,31,42,.14), transparent 55%);
  mix-blend-mode:screen; opacity:.7;
}

.leaf-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:12px; position:relative; z-index:1;
}
.leaf-eyebrow{
  font-family:var(--font-hud); font-weight:600; font-size:.66rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.leaf-pageno{
  font-family:var(--font-mono); font-size:.66rem; color:var(--ash-dim);
}

/* Grid de casillas */
.slot-grid{
  position:relative; z-index:1; flex:1; min-height:0;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:clamp(8px,1.4vw,18px);
}

.slot{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:6px; min-height:0;
  padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; color:inherit;
}
.slot-frame{
  position:relative; flex:1 1 auto; min-height:0; max-width:100%;
  aspect-ratio:1/1.32; border-radius:9px; overflow:hidden;
  padding:4px;
  background:
    linear-gradient(145deg, var(--gold-hi), #8a5f22 45%, var(--gold) 70%, #6e4a1c);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.4);
  transition:transform .22s ease, box-shadow .22s ease;
}
.slot-art{
  position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden;
  background:#0c0608;
}
.slot-art img{ width:100%; height:100%; object-fit:cover; }

/* barrido holográfico al pasar el mouse */
.slot-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(176,108,255,.25) 50%, transparent 62%);
  transform:translateX(-120%); transition:transform .6s ease; opacity:0;
}
.slot.owned:hover .slot-frame{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.95), 0 0 26px -6px var(--slot-accent, var(--gold));
}
.slot.owned:hover .slot-art::after{ transform:translateX(120%); opacity:1; }

.slot.locked{ cursor:default; }
.slot.locked .slot-frame{
  background:linear-gradient(145deg,#3a3230,#181312 60%,#2a2422);
  filter:saturate(.2);
}
.slot.locked .slot-art{
  display:grid; place-items:center;
  background:repeating-linear-gradient(45deg,#120c0d,#120c0d 10px,#180f10 10px,#180f10 20px);
}
.lock-mark{
  font-family:var(--font-display); font-weight:700; font-size:2.4rem;
  color:rgba(255,255,255,.12);
}

.slot-label{
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.slot-code{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em;
  color:var(--ash); text-transform:uppercase;
}
.slot.owned .slot-code{ color:var(--gold-hi); }
.rarity-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--slot-accent,var(--gold)); box-shadow:0 0 8px var(--slot-accent,var(--gold));
}

/* acentos por rareza */
.slot.r-rara{ --slot-accent:var(--r-rara); }
.slot.r-especial{ --slot-accent:var(--r-especial); }
.slot.r-epica{ --slot-accent:var(--r-epica); }
.slot.r-legendaria{ --slot-accent:var(--r-legendaria); }

/* ---- Página portada de sección ---- */
.leaf-section{ justify-content:center; align-items:flex-start; text-align:left; }
.section-icon{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,4vw,3rem); color:var(--slot-accent,var(--gold));
  opacity:.9; margin-bottom:10px;
}
.section-title{
  position:relative; z-index:1;
  margin:0; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; line-height:.9;
  font-size:clamp(2.4rem,6.4vw,4.6rem); letter-spacing:.02em;
  color:var(--bone);
}
.section-sub{
  font-family:var(--font-display); font-weight:300;
  text-transform:uppercase; letter-spacing:.3em;
  font-size:clamp(.9rem,2vw,1.3rem); color:var(--slot-accent,var(--gold));
  margin:4px 0 18px;
}
.section-desc{
  position:relative; z-index:1; max-width:34ch;
  color:var(--ash); line-height:1.65; font-size:.9rem; margin:0 0 20px;
}
.section-meta{ display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
.chip{
  font-family:var(--font-hud); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px; border-radius:999px;
  border:1px solid var(--slot-accent,var(--gold));
  color:var(--slot-accent,var(--gold)); background:rgba(0,0,0,.3);
}

/* ---- Portada interior / índice ---- */
.leaf-cover{ justify-content:center; align-items:center; text-align:center; }
.cover-mark{
  font-family:var(--font-hud); letter-spacing:.4em; text-transform:uppercase;
  font-size:.66rem; color:var(--gold); margin-bottom:14px;
}
.cover-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  line-height:.85; margin:0;
}
.cover-title span:first-child{ display:block; font-size:clamp(2rem,7vw,3.4rem); color:var(--bone); }
.cover-title span:last-child{
  display:block; font-size:clamp(2rem,7vw,3.4rem);
  background:linear-gradient(180deg,var(--gold-hi),#9c6f28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cover-index{ margin-top:26px; width:100%; max-width:280px; }
.index-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 2px; border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--font-hud); font-size:.86rem;
}
.index-row b{ color:var(--bone); font-weight:600; letter-spacing:.04em; }
.index-row span{ font-family:var(--font-mono); font-size:.72rem; color:var(--gold-hi); }
.cover-hint{
  margin-top:22px; font-size:.78rem; color:var(--ash-dim);
  font-family:var(--font-hud); letter-spacing:.06em;
}

.leaf-end{ justify-content:center; align-items:center; text-align:center; }
.end-star{ font-size:2rem; color:var(--gold); margin-bottom:12px; }
.end-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,2.6rem); margin:0; color:var(--bone);
}
.end-note{ color:var(--ash); margin:12px 0 0; font-size:.86rem; line-height:1.6; max-width:30ch; }

/* ---- Botones pasar página ---- */
.pager{
  position:relative; z-index:15; flex:0 0 auto;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:var(--gold-hi);
  background:linear-gradient(180deg, rgba(30,16,19,.9), rgba(10,5,7,.9));
  border:1px solid rgba(212,162,74,.35);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
  transition:transform .18s ease, box-shadow .2s ease, opacity .2s ease;
}
.pager:hover:not(:disabled){ transform:scale(1.08); box-shadow:0 0 24px -6px var(--gold); }
.pager:active:not(:disabled){ transform:scale(.96); }
.pager:disabled{ opacity:.28; cursor:default; }

/* ---- Loading ---- */
.loading{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:var(--ink); transition:opacity .5s ease;
}
.loading.hide{ opacity:0; pointer-events:none; }
.loading span{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.3em;
  color:var(--gold); font-size:.9rem; animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* ============================  LIGHTBOX  ============================= */
.lightbox{
  position:fixed; inset:0; z-index:60; display:none;
  place-items:center; padding:24px;
  background:rgba(4,2,3,.86); backdrop-filter:blur(10px);
}
.lightbox.open{ display:grid; animation:fade .3s ease; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.lightbox-inner{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  max-width:min(440px,92vw);
}
.holo-card{
  position:relative; width:min(360px,80vw); border-radius:14px; overflow:hidden;
  transform-style:preserve-3d; transition:transform .1s ease;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 40px -8px var(--lb-accent,var(--gold));
}
.holo-card img{ width:100%; display:block; border-radius:14px; }
.holo-shine{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge;
  opacity:.55;
  background:
    linear-gradient(115deg, transparent 20%, rgba(255,0,128,.5), rgba(0,200,255,.5), rgba(120,255,0,.4), transparent 80%);
  background-size:220% 220%;
  transition:background-position .1s ease;
}
.holo-glare{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.7), transparent 45%);
}
.lightbox-meta{ text-align:center; }
.lb-code{
  font-family:var(--font-anton); color:var(--gold-hi);
  font-size:1.5rem; letter-spacing:.04em; text-transform:uppercase;
  line-height:1; margin:0 0 8px;
}
.lb-rarity{
  font-family:var(--font-bebas); text-transform:uppercase;
  letter-spacing:.22em; font-size:1.05rem; line-height:1;
  color:var(--lb-accent,var(--gold));
}
.lightbox-close{
  position:fixed; top:20px; right:22px; z-index:61;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.4);
  color:var(--bone); font-size:1.1rem;
  transition:transform .15s ease, background .2s ease;
}
.lightbox-close:hover{ transform:rotate(90deg); background:var(--crimson); }

/* ============================  RESPONSIVE  ========================== */
@media (max-width:820px){
  .hud{ flex-wrap:wrap; }
  .hud-tabs{ order:3; width:100%; }
  .book-wrap{ width:min(94vw, calc((100dvh - 180px) * 0.72)); }
  .pager{ width:44px; height:44px; }
  .section-desc{ display:none; }
}
@media (max-width:560px){
  .slot-grid{ gap:8px; }
  .lock-mark{ font-size:1.6rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; }
}