/* =========================================================================
   Álbum Worlds 26 · Edición Legión Lunari
   Sale del álbum impreso: fondo noche con luz azul por los bordes, títulos
   blancos en grotesca condensada, texto arena, la marca de agua diagonal
   "WORLDS 26" y la banda marina con "LEGIÓNLUNARI".
   ========================================================================= */

:root{
  --noche:     #02040d;
  --noche-2:   #070c22;
  --marino:    #001454;
  --electrico: #2e5bff;
  --hielo:     #b9c9ff;
  --blanco:    #fcfcfc;
  --plata:     #c9cfdc;
  --acero:     #7c86a3;
  --arena:     #d4b49a;

  /* acentos por rareza (los colores reales vienen de album.json) */
  --r-especial:   #e0563f;
  --r-rara:       #8fb7c9;
  --r-epica:      #b06cff;
  --r-legendaria: #f2ce7e;

  --font-display: "Anton", "Impact", sans-serif;
  --font-ui:      "Barlow Condensed", "Arial Narrow", sans-serif;

  --ticker-alto: 24px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-ui);
  font-weight:500;
  color:var(--blanco);
  background:
    radial-gradient(42% 70% at 0% 45%, rgba(46,91,255,.30), transparent 70%),
    radial-gradient(40% 65% at 100% 70%, rgba(46,91,255,.24), transparent 70%),
    radial-gradient(80% 50% at 50% 115%, rgba(0,20,84,.85), transparent 70%),
    var(--noche);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--electrico); outline-offset:3px; }

/* --- Ambiente: marca de agua diagonal y chispas --------------------------- */

.wm{
  position:fixed; inset:-40%; z-index:0; pointer-events:none;
  transform:rotate(-32deg);
  display:flex; flex-direction:column; justify-content:center; gap:.1em;
  font-family:var(--font-display); font-size:clamp(5rem,13vw,11rem); line-height:1;
  white-space:nowrap; color:transparent;
  -webkit-text-stroke:1.5px rgba(120,150,255,.075);
  user-select:none;
}
.wm span:nth-child(even){ margin-left:-1.6em; }

#embers, #dust{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}

/* La banda inferior del álbum impreso */
.ticker{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:var(--ticker-alto); overflow:hidden;
  background:var(--marino);
  border-top:1px solid rgba(46,91,255,.55);
  display:flex; align-items:center;
}
.ticker-track{
  display:flex; flex:0 0 auto; white-space:nowrap;
  font-weight:700; font-size:.66rem; letter-spacing:.62em;
  color:rgba(252,252,252,.78);
  animation:ticker 70s linear infinite;
}
.ticker-track span{ padding-right:.62em; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

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

.login-body{
  min-height:100dvh; position:relative; overscroll-behavior:none;
}
.login3d{
  position:relative; z-index:2; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(32px,7vw,110px); flex-wrap:wrap;
  padding:48px 24px calc(var(--ticker-alto) + 70px);
}

/* libro 3D */
.book3d-scene{
  --bw:300px; --bh:424px; --bd:34px;
  position:relative; flex:0 0 auto;
  width:var(--bw); height:var(--bh);
  perspective:1400px;
}
.book3d-scene:hover .book3d{ transform:rotateY(-8deg) rotateX(4deg); }
.book3d-shadow{
  position:absolute; left:50%; bottom:-46px; width:80%; height:44px;
  transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 50%, rgba(46,91,255,.35), transparent 72%);
  filter:blur(12px);
}
.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:2px 6px 6px 2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.b3d-front{ transform:translateZ(calc(var(--bd) / 2)); }
.b3d-front img, .b3d-back img{ width:100%; height:100%; object-fit:cover; }
.b3d-back{ transform:rotateY(180deg) translateZ(calc(var(--bd) / 2)); background:var(--noche); }
.b3d-pages, .b3d-top, .b3d-bottom{
  background:repeating-linear-gradient(to right, #eef0f6, #eef0f6 1px, #b9bfce 2px, #eef0f6 3px);
}
.b3d-pages{
  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));
}
.b3d-spine{
  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, #000a2e, var(--marino) 55%, #000a2e);
  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);
}
.b3d-top{ transform:rotateX(90deg) translateZ(calc(var(--bh) / 2)); }
.b3d-bottom{ transform:rotateX(-90deg) translateZ(calc(var(--bh) / 2)); }

/* panel: compuesto como el título de la portada */
.login3d-panel{ flex:0 1 420px; max-width:440px; }
.panel-title{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(3.6rem,9vw,5.6rem); line-height:.86; letter-spacing:.005em;
  text-transform:uppercase; color:var(--blanco);
}
.panel-logo{ width:100%; max-width:420px; margin:.18em 0 0; }
.panel-edicion{
  display:flex; align-items:center; gap:14px; margin:18px 0 26px;
  font-weight:400; font-size:1.15rem; color:var(--plata);
}
.panel-edicion::before{ content:""; flex:1; height:1.5px; background:var(--plata); opacity:.8; }
.login-sub{
  margin:0 0 26px; max-width:38ch;
  font-size:1.1rem; line-height:1.45; color:var(--arena);
}
.login-sub b{ color:var(--blanco); font-weight:600; }
.pasos{
  margin:0 0 24px; padding:0; list-style:none; counter-reset:paso;
  display:grid; gap:12px; max-width:38ch;
}
.pasos li{
  counter-increment:paso; position:relative; padding-left:42px;
  font-size:1.05rem; line-height:1.4; color:var(--arena);
}
.pasos li::before{
  content:counter(paso); position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:.95rem; line-height:1;
  background:var(--blanco); color:var(--marino);
}
.pasos b{ color:var(--blanco); font-weight:600; }
.pasos code{
  font-family:var(--font-ui); font-weight:700; font-size:1.02em; letter-spacing:.02em;
  padding:1px 7px; border-radius:3px;
  color:var(--blanco); background:rgba(46,91,255,.28); border:1px solid rgba(46,91,255,.6);
  white-space:nowrap;
}
.login-actions{ display:grid; gap:12px; }
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; border-radius:4px; border:0;
  font-family:var(--font-ui); font-weight:700; font-size:1.08rem;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:background .18s ease, box-shadow .18s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-discord{ background:var(--blanco); color:var(--marino); }
.btn-discord:hover{ background:#fff; box-shadow:0 0 0 3px rgba(46,91,255,.45), 0 0 34px -4px var(--electrico); }

.toast{
  margin:0 0 20px; padding:12px 14px; border-radius:4px;
  font-size:1rem; line-height:1.4; color:var(--blanco);
  background:rgba(0,20,84,.7); border-left:3px solid var(--electrico);
}

.lema{
  position:fixed; left:0; right:0; bottom:calc(var(--ticker-alto) + 18px); z-index:2;
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin:0; padding:0 24px; pointer-events:none;
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--blanco);
}
.lema::before, .lema::after{ content:""; width:min(18vw,180px); height:1px; background:rgba(252,252,252,.6); }

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

.album-body{
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  padding-bottom:var(--ticker-alto);
}

.hud{
  position:relative; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px clamp(14px,3vw,30px);
  background:linear-gradient(180deg, rgba(2,4,13,.96), rgba(2,4,13,.75));
}
.hud-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.hud-logo{ width:32px; height:32px; object-fit:contain; flex:0 0 auto; }
.hud-brandwrap{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hud-brand{ height:20px; width:auto; max-width:100%; object-fit:contain; object-position:left; }
.hud-user{
  font-size:.82rem; color:var(--acero);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hud-right{ display:flex; align-items:center; gap:14px; }

/* el disco blanco de "230 fichas" de la portada, convertido en progreso */
.progress{
  --p:0;
  position:relative; width:54px; height:54px; flex:0 0 auto; border-radius:50%;
  display:grid; place-content:center; text-align:center;
  background:
    radial-gradient(closest-side, var(--blanco) 82%, transparent 83%),
    conic-gradient(var(--electrico) calc(var(--p) * 1%), rgba(255,255,255,.14) 0);
  color:var(--marino);
  box-shadow:0 0 22px -6px rgba(46,91,255,.8);
}
.progress-count{ font-family:var(--font-display); font-size:1.15rem; line-height:.9; }
.progress-total{ font-weight:700; font-size:.6rem; line-height:1; letter-spacing:.04em; text-transform:uppercase; }
.progress-bar{ display:none; }

.hud-packs{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-weight:700; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blanco); padding:8px 12px 8px 14px; border-radius:4px;
  background:var(--marino); border:1px solid var(--pack-accent, var(--electrico));
  transition:background .18s ease, transform .18s ease;
}
.hud-packs:hover{ background:#00207a; transform:translateY(-1px); }
.hud-packs[hidden]{ display:none; }
.hud-packs-count{
  min-width:1.6em; padding:1px 6px; border-radius:999px; text-align:center;
  background:var(--blanco); color:var(--marino);
}
.hud-packs.pulse{ animation:packsPulse 2.4s ease-in-out infinite; }
@keyframes packsPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(46,91,255,0); }
  50%{ box-shadow:0 0 22px 2px rgba(46,91,255,.6); }
}
.hud-logout{
  font-weight:600; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--acero); padding:6px 4px;
  border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.hud-logout:hover{ color:var(--blanco); border-color:var(--electrico); }

/* pestañas: una tira marina, como las bandas del álbum */
.tabstrip{
  position:relative; z-index:19;
  background:rgba(0,20,84,.55);
  border-top:1px solid rgba(46,91,255,.35);
  border-bottom:1px solid rgba(46,91,255,.35);
}
.hud-tabs{
  display:flex; gap:2px; justify-content:center;
  overflow-x:auto; scrollbar-width:none; padding:0 12px;
}
.hud-tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto; position:relative; cursor:pointer;
  padding:9px 13px 8px; border:0; background:none;
  font-weight:600; font-size:.95rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--hielo); white-space:nowrap; transition:color .18s ease, background .18s ease;
}
.tab:hover{ color:var(--blanco); }
.tab.active{ background:var(--blanco); color:var(--marino); }

/* escenario + libro */
.stage{
  position:relative; z-index:10; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(6px,2vw,26px);
  padding:clamp(12px,2.4vw,28px) clamp(12px,3vw,34px) 34px;
}
.book-wrap{
  position:relative;
  /* páginas formato A (alto/ancho ~1.414); el tercer término evita que el
     libro pase del alto disponible (cabecera + pestañas + banda) */
  width:min(1180px, 92vw, calc((100dvh - 200px) * 1.414));
}
.book{ width:100%; margin:0 auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.65)); }
.page{ position:relative; width:100%; height:100%; overflow:hidden; background:var(--noche); }
.page-hard{ background:var(--noche); }
.page-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:fill;
  user-select:none; -webkit-user-drag:none;
}

/* huecos */
.slot-hot{ position:absolute; z-index:2; }
.slot-hot.r-especial{ --slot-accent:var(--r-especial); }
.slot-hot.r-rara{ --slot-accent:var(--r-rara); }
.slot-hot.r-epica{ --slot-accent:var(--r-epica); }
.slot-hot.r-legendaria{ --slot-accent:var(--r-legendaria); }
.slot-hot.empty{ transition:box-shadow .25s ease; }
.slot-hot.empty:hover{ box-shadow:0 0 0 2px var(--electrico), 0 0 22px -2px var(--electrico); }

.slot-hot.filled{ cursor:pointer; }
.slot-sticker{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:2%;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.9);
  transition:transform .22s ease, box-shadow .22s ease;
  -webkit-user-drag:none;
}
.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(--electrico));
}
.slot-shine{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  overflow:hidden; border-radius:2%; 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,.5) 48%,
            var(--slot-accent, rgba(46,91,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; }

/* el sello de la última página: anillo de progreso y, al completar, el sello */
.seal{
  --p:0;
  position:absolute; z-index:2; border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(var(--electrico) calc(var(--p) * 1%), transparent 0);
  -webkit-mask:radial-gradient(closest-side, transparent 90%, #000 91%);
          mask:radial-gradient(closest-side, transparent 90%, #000 91%);
  pointer-events:none;
}
.seal-stamp{
  position:absolute; z-index:3; border-radius:50%;
  container-type:inline-size;   /* el texto se mide contra el círculo, no la ventana */
  display:grid; place-content:center; justify-items:center; gap:3cqw;
  background:radial-gradient(circle at 35% 30%, #12309a, var(--marino) 70%);
  box-shadow:inset 0 0 0 3px var(--blanco), inset 0 0 0 7px var(--marino), inset 0 0 0 8.5px rgba(252,252,252,.7),
             0 0 40px -6px var(--electrico);
  transform:rotate(-12deg) scale(.4); opacity:0;
  transition:transform .5s cubic-bezier(.2,1.6,.4,1), opacity .25s ease;
  pointer-events:none;
}
.seal-stamp img{ width:58cqw; }
.seal-stamp span{
  max-width:64cqw; text-align:center;
  font-family:var(--font-display); font-size:12cqw; line-height:.95;
  letter-spacing:.04em; text-transform:uppercase; color:var(--blanco);
}
.seal-stamp.earned{ transform:rotate(-12deg) scale(1); opacity:1; }

.book-hint{
  position:absolute; left:0; right:0; bottom:-26px; margin:0;
  text-align:center; font-size:.85rem; color:var(--acero);
  transition:opacity .5s ease; pointer-events:none;
}
.book-hint.gone{ opacity:0; }

/* pasar página */
.pager{
  position:relative; z-index:15; flex:0 0 auto;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:var(--blanco); background:rgba(0,20,84,.75);
  border:1px solid rgba(46,91,255,.6);
  transition:transform .18s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
.pager:hover:not(:disabled){ transform:scale(1.07); background:var(--marino); box-shadow:0 0 26px -6px var(--electrico); }
.pager:active:not(:disabled){ transform:scale(.96); }
.pager:disabled{ opacity:.25; cursor:default; }

/* cargando */
.loading{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:var(--noche); transition:opacity .5s ease;
}
.loading.hide{ opacity:0; pointer-events:none; }
.loading-inner{ display:grid; justify-items:center; gap:18px; padding:0 24px; text-align:center; }
.loading-inner img{ width:min(360px,70vw); }
.loading-inner span{ font-size:1.05rem; color:var(--hielo); }
.loading-bar{ width:min(260px,60vw); height:2px; overflow:hidden; background:rgba(255,255,255,.1); }
.loading-bar::after{
  content:""; display:block; width:40%; height:100%; background:var(--electrico);
  animation:cargando 1.1s ease-in-out infinite;
}
@keyframes cargando{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }

/* aviso flotante */
.album-toast{
  position:fixed; left:50%; bottom:calc(var(--ticker-alto) + 24px); transform:translateX(-50%); z-index:60;
  max-width:min(92vw,420px); margin:0;
}

/* ============================  LIGHTBOX  ============================= */
.lightbox{
  position:fixed; inset:0; z-index:60; display:none;
  place-items:center; padding:24px;
  background:rgba(2,4,13,.9); backdrop-filter:blur(10px);
}
.lightbox.open{ display:grid; animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; } }
.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:10px; overflow:hidden;
  transform-style:preserve-3d; transition:transform .1s ease;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 44px -8px var(--lb-accent, var(--electrico));
}
.holo-card img{ width:100%; display:block; }
.holo-shine{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:.5;
  background:linear-gradient(115deg, transparent 20%, rgba(46,91,255,.55), rgba(185,201,255,.5), rgba(255,255,255,.35), 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{ margin:0 0 6px; font-family:var(--font-display); font-size:1.7rem; line-height:1; text-transform:uppercase; }
.lb-copias{ color:var(--hielo); margin-left:.3em; }
.lb-rarity{ margin:0; font-weight:700; font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lb-accent, var(--hielo)); }
.lb-seccion{ margin:.35rem 0 0; font-size:1rem; color:var(--arena); }
.lightbox-close{
  position:fixed; top:20px; right:22px; z-index:61;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(46,91,255,.6); background:rgba(0,20,84,.6);
  color:var(--blanco); font-size:1.1rem;
  transition:transform .15s ease, background .2s ease;
}
.lightbox-close:hover{ transform:rotate(90deg); background:var(--marino); }

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

@media (max-width:760px){
  .login3d{
    flex-direction:column; gap:22px;
    padding:calc(env(safe-area-inset-top, 0px) + 22px) 20px calc(var(--ticker-alto) + 64px);
  }
  /* en columna, flex-basis mediría el alto: el ancho se fija a mano */
  .login3d-panel{ flex:none; width:100%; max-width:380px; }
  .panel-title{ font-size:3.2rem; }
  .panel-edicion{ margin:14px 0 18px; font-size:1rem; }
  .login-sub{ font-size:1rem; margin-bottom:18px; }
  .book3d-scene{ --bw:180px; --bh:255px; --bd:22px; }
  .lema{ font-size:.9rem; gap:14px; }
}

@media (max-width:820px){
  .hud{ gap:10px; padding:8px 12px; }
  .hud-logo{ width:26px; height:26px; }
  .hud-brand{ height:15px; }
  .hud-user{ font-size:.72rem; }
  .hud-right{ gap:10px; }
  .progress{ width:46px; height:46px; }
  .progress-count{ font-size:.98rem; }
  .hud-packs-label{ display:none; }
  .hud-packs{ padding:7px 9px; }
  .hud-tabs{ justify-content:flex-start; }
  .tab{ padding:8px 11px 7px; font-size:.88rem; }

  /* el libro a todo lo ancho; las flechas flotan abajo, al alcance del pulgar */
  .stage{ padding:8px 8px calc(var(--ticker-alto) + 74px); gap:0; }
  .book-wrap{ width:min(92vw, calc((100dvh - 260px) * 0.707)); }
  .pager{ position:fixed; bottom:calc(var(--ticker-alto) + 12px); z-index:25; width:50px; height:50px; background:rgba(0,20,84,.92); }
  .pager-prev{ left:14px; }
  .pager-next{ right:14px; }
  .book-hint{ bottom:-22px; font-size:.75rem; }
  .lightbox{ padding:16px; }
  .lightbox-close{ top:12px; right:14px; width:40px; height:40px; }
}

@media (max-width:420px){
  .hud-user{ display:none; }
  .panel-title{ font-size:2.8rem; }
}

@media (prefers-reduced-motion:reduce){
  /* El sobre es un efecto que la usuaria abre a propósito: se deja animar.
     El resto calma sus animaciones. */
  *:not(.pack-overlay):not(.pack-overlay *){ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .ticker-track{ animation:none; }
}