/* ═══════════════════════════════════════════════════════════════════════
   TIGRE NINJA · UI.CSS
   Estilos comunes a todas las páginas: paleta, reset, nav, footer, modal,
   botones, secciones genéricas, lore pills, mobile base.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── PALETA Y VARIABLES GLOBALES ─────────────────────────────────────── */
:root{
  /* Colores base */
  --void:#030305;
  --abyss:#07070c;
  --crimson:#e8001c;
  --blood:#8b0000;
  --neon:#00ff5c;
  --violet:#9b30ff;
  --violet2:#6600cc;
  --gold:#d4a017;
  --sakura:#ff5d8f;
  --paper:#ede4ce;
  --smoke:rgba(255,255,255,.06);

  /* Acento dinámico (lo modifican páginas concretas: p. ej. music al cambiar de lista) */
  --accent:var(--crimson);

  /* Glow */
  --glow-r:0 0 40px rgba(232,0,28,.35);
  --glow-n:0 0 30px rgba(0,255,92,.25);
  --glow-v:0 0 30px rgba(155,48,255,.3);
  --glow-g:0 0 30px rgba(212,160,23,.3);
  --glow-s:0 0 30px rgba(255,93,143,.3);

  /* Layout */
  --nav-h:60px;
  /* Cada página redefine --header-h si añade ticker u otra barra. */
  --header-h:var(--nav-h);
}


/* ── RESET / BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--paper);
  font-family:'Crimson Text',Georgia,serif;
  overflow-x:hidden;
  cursor:none;                            /* el cursor real lo dibuja effects.css */
  padding-top:var(--header-h);
}


/* ── HEADER FIJO ──────────────────────────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:180;
  height:var(--header-h);
  background:rgba(3,3,5,.88);
  backdrop-filter:blur(12px);
}

/* Nav */
nav{
  position:relative;z-index:2;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;
  background:rgba(3,3,5,.92);
  border-bottom:1px solid rgba(232,0,28,.22);
}
nav::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--crimson),var(--violet),transparent);
}
.nav-logo{
  font-family:'Cinzel Decorative',serif;font-size:1.15rem;letter-spacing:4px;
  color:var(--paper);text-decoration:none;text-transform:uppercase;
  display:flex;align-items:center;gap:.8rem;
}
.nav-logo-kanji{
  font-family:serif;font-size:1.6rem;color:var(--crimson);
  text-shadow:var(--glow-r);line-height:1;
}
.nav-logo-sub{color:var(--neon);}

.nav-links{display:flex;gap:0;}
.nav-links a{
  padding:.4rem 1.3rem;
  font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:3px;
  color:rgba(237,228,206,.45);text-decoration:none;text-transform:uppercase;
  border-left:1px solid rgba(255,255,255,.05);
  transition:color .25s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:1.3rem;right:1.3rem;height:1px;
  background:var(--neon);transform:scaleX(0);transition:transform .25s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--paper);}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);}

.nav-user{
  font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:2px;
  color:var(--neon);
  padding:.3rem .9rem;background:transparent;
  border:1px solid rgba(0,255,92,.25);
  cursor:pointer;text-transform:uppercase;white-space:nowrap;
  transition:all .25s;
}
.nav-user:hover{
  background:rgba(0,255,92,.08);
  border-color:var(--neon);
  box-shadow:var(--glow-n);
}


/* ── SECCIONES GENÉRICAS ──────────────────────────────────────────────── */
.section{padding:5rem 3rem;position:relative;}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:3rem;padding-bottom:1.2rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;flex-wrap:wrap;gap:1rem;
}
.section-head::after{
  content:'';position:absolute;bottom:0;left:0;width:80px;height:1px;
  background:var(--crimson);
}
.section-kicker{
  font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:5px;
  color:var(--crimson);text-transform:uppercase;margin-bottom:.5rem;
}
.section-title{
  font-family:'Cinzel',serif;font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:3px;color:var(--paper);text-transform:uppercase;
}
.section-title em{color:var(--neon);font-style:normal;}
.section-link{
  font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:3px;
  color:var(--violet);text-decoration:none;
  border-bottom:1px solid rgba(155,48,255,.3);
  text-transform:uppercase;transition:color .2s,border-color .2s;
}
.section-link:hover{color:var(--neon);border-color:var(--neon);}


/* ── BOTONES Y PÍLDORAS ───────────────────────────────────────────────── */
.btn-fire{
  font-family:'Space Mono',monospace;font-size:.75rem;letter-spacing:3px;
  text-transform:uppercase;padding:.85rem 2.2rem;
  background:var(--crimson);color:#fff;text-decoration:none;cursor:pointer;
  border:none;display:inline-block;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  box-shadow:var(--glow-r);
  transition:transform .15s,box-shadow .15s;
}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(232,0,28,.55);}

.btn-ghost{
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:3px;
  text-transform:uppercase;padding:.8rem 1.8rem;
  background:transparent;color:var(--violet);
  border:1px solid rgba(155,48,255,.4);cursor:pointer;text-decoration:none;
  display:inline-block;transition:all .25s;
}
.btn-ghost:hover{border-color:var(--violet);box-shadow:var(--glow-v);color:var(--paper);}

.lore-pill{
  font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:2px;
  text-transform:uppercase;padding:.3rem .8rem;
  border:1px solid rgba(255,255,255,.1);
  color:rgba(237,228,206,.4);cursor:default;
}
.lore-pill.neon{border-color:rgba(0,255,92,.3);color:var(--neon);}
.lore-pill.vio {border-color:rgba(155,48,255,.3);color:var(--violet);}
.lore-pill.red {border-color:rgba(232,0,28,.3);color:var(--crimson);}
.lore-pill.gold{border-color:rgba(212,160,23,.3);color:var(--gold);}


/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer{
  padding:3rem;background:#020204;
  border-top:1px solid rgba(232,0,28,.15);
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;
}
.foot-brand{
  font-family:'Cinzel Decorative',serif;font-size:1.1rem;letter-spacing:3px;
  color:var(--paper);
}
.foot-brand .kanji{
  color:var(--crimson);font-size:2rem;display:block;margin-top:.4rem;
}
.foot-desc{
  margin-top:.8rem;font-size:.9rem;line-height:1.65;
  color:rgba(237,228,206,.25);
}
.foot-col h4{
  font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:4px;
  text-transform:uppercase;color:rgba(237,228,206,.25);
  margin-bottom:1rem;padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.foot-col a{
  display:block;font-size:.9rem;
  color:rgba(237,228,206,.35);text-decoration:none;
  padding:.3rem 0;transition:color .2s;
}
.foot-col a:hover{color:var(--neon);}
.foot-copy{
  grid-column:1/-1;margin-top:1.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.04);
  font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:2px;
  color:rgba(237,228,206,.15);text-align:center;
}


/* ── MODAL DE LOGIN (componente reutilizable) ─────────────────────────── */
.modal-ov{
  position:fixed;inset:0;z-index:500;
  background:rgba(3,3,5,.88);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.modal-ov.on{opacity:1;pointer-events:all;}
.modal{
  background:var(--abyss);border:1px solid rgba(232,0,28,.3);
  padding:2.5rem;width:min(90vw,420px);position:relative;
}
.modal::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--crimson),var(--violet));
}
.modal-kanji{
  font-family:serif;font-size:2.5rem;color:var(--crimson);
  text-shadow:var(--glow-r);margin-bottom:.5rem;
}
.modal-title{
  font-family:'Cinzel',serif;font-size:1.3rem;letter-spacing:3px;
  text-transform:uppercase;margin-bottom:.5rem;
}
.modal-sub{
  font-size:.9rem;color:rgba(237,228,206,.45);
  margin-bottom:1.5rem;line-height:1.5;
}
.modal-input{
  width:100%;font-family:'Space Mono',monospace;font-size:.85rem;letter-spacing:1px;
  padding:.7rem 1rem;
  background:rgba(255,255,255,.04);color:var(--paper);
  border:1px solid rgba(255,255,255,.1);outline:none;
  margin-bottom:1rem;transition:border-color .2s;
}
.modal-input:focus{border-color:var(--crimson);}
.modal-btn{
  width:100%;font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:3px;
  text-transform:uppercase;padding:.8rem;
  background:var(--crimson);color:#fff;border:none;cursor:pointer;
  box-shadow:var(--glow-r);transition:box-shadow .2s;
}
.modal-btn:hover{box-shadow:0 0 50px rgba(232,0,28,.55);}
.modal-close{
  position:absolute;top:1rem;right:1rem;
  background:none;border:none;color:rgba(237,228,206,.4);
  cursor:pointer;font-size:1.2rem;
}
.modal-note{
  font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:1px;
  color:rgba(237,228,206,.25);margin-top:1rem;text-align:center;
}


/* ── MOBILE BASE ──────────────────────────────────────────────────────── */
@media(max-width:760px){
  nav{padding:0 1rem;}
  .nav-links a{padding:.4rem .7rem;font-size:.6rem;letter-spacing:2px;}
  .nav-logo{font-size:.9rem;letter-spacing:2px;}
  .section{padding:3rem 1.5rem;}
  footer{grid-template-columns:1fr;}
}