html, body { overflow: auto !important; height: auto !important; min-height: 100vh; font-size: 15px; }
/* ── Nav fijo ─────────────────────────────────────────────────────── */
#hn {
position: sticky; top: 0; z-index: 500;
display: flex; align-items: center; gap: .7rem;
padding: .35rem 1rem;
background: rgba(0,3,0,.97);
border-bottom: 1px solid var(--green-dim);
}
#hn-back {
background: none; border: 1px solid var(--green-dim);
color: var(--dim); font-family: var(--font); font-size: .66rem;
padding: .13rem .5rem; cursor: pointer; letter-spacing: .06em;
text-decoration: none; transition: border-color .15s, color .15s;
}
#hn-back:hover { border-color: var(--green); color: var(--green); }
#hn-title {
font-family: var(--font-title); font-size: 1.05rem;
color: var(--green-bright); letter-spacing: .1em;
}
#hn-stamp {
margin-left: auto; font-size: .58rem; letter-spacing: .16em;
color: var(--red); opacity: .5;
border: 1px solid rgba(255,51,51,.28); padding: .08rem .45rem;
}
#hn-dir-btn {
display: none;
background: none; border: 1px solid var(--green-dim);
color: var(--dim); font-family: var(--font); font-size: .62rem;
padding: .13rem .5rem; cursor: pointer; letter-spacing: .05em;
}
@media (max-width:640px) { #hn-dir-btn { display:block; } }
/* ── Layout ────────────────────────────────────────────────────────── */
#hm { max-width: 900px; margin: 0 auto; padding: 1.8rem 1.2rem 4rem; }
/* ── Hero ──────────────────────────────────────────────────────────── */
#hh {
text-align: center; margin-bottom: 2rem;
padding: 1.2rem .8rem 1.4rem;
border: 1px solid var(--green-dim);
background: rgba(0,8,0,.6);
position: relative;
}
.hh-class {
font-size: .58rem; letter-spacing: .22em; color: var(--red);
opacity: .55; margin-bottom: .4rem;
}
.hh-title {
font-family: var(--font-title); font-size: clamp(1.5rem,5vw,2.8rem);
color: var(--green-bright); letter-spacing: .12em;
text-shadow: 0 0 18px var(--green-glow), 0 0 50px rgba(57,255,20,.1);
margin-bottom: .25rem;
}
.hh-sub { font-size: .7rem; color: var(--dim); letter-spacing: .14em; }
.hh-corners { position: absolute; inset: 5px; pointer-events: none; }
.hh-corners::before, .hh-corners::after {
content: ''; position: absolute; width: 14px; height: 14px;
border-color: rgba(57,255,20,.35); border-style: solid;
}
.hh-corners::before { top:0; left:0; border-width: 1px 0 0 1px; }
.hh-corners::after { bottom:0; right:0; border-width: 0 1px 1px 0; }
.hh-stamp {
display: inline-block; margin-top: .8rem;
font-size: .55rem; letter-spacing: .18em;
color: rgba(255,51,51,.45); border: 1px solid rgba(255,51,51,.2);
padding: .14rem .7rem; transform: rotate(-1.2deg);
}
.hh-lore {
margin-top: 1rem; padding-top: .8rem;
border-top: 1px solid rgba(32,194,14,.1);
font-size: .78rem; color: var(--white); line-height: 1.75;
}
.hh-lore em { color: var(--dim); font-style: normal; }
/* ── Directorio ────────────────────────────────────────────────────── */
#hdir {
margin-bottom: 2rem;
border: 1px solid var(--green-dim);
background: rgba(0,6,0,.5);
}
#hdir-hdr {
padding: .38rem .9rem; font-size: .6rem; letter-spacing: .16em;
color: var(--dim); background: rgba(6,22,6,.7);
border-bottom: 1px solid var(--green-dim);
display: flex; justify-content: space-between; align-items: center;
}
#hdir-list { padding: .3rem 0; }
.dir-row {
display: grid;
grid-template-columns: 2.2rem 1fr auto;
align-items: center;
padding: .28rem .9rem;
font-size: .72rem; color: var(--green-dim);
text-decoration: none; cursor: pointer;
border-bottom: 1px solid rgba(32,194,14,.04);
transition: color .1s, background .1s;
gap: .5rem;
}
.dir-row:last-child { border-bottom: none; }
.dir-row:hover { color: var(--green); background: rgba(32,194,14,.03); }
.dir-idx { color: var(--green-dim); font-size: .6rem; }
.dir-name { letter-spacing: .03em; }
.dir-badge {
font-size: .55rem; letter-spacing: .1em; padding: .06rem .38rem;
border: 1px solid; white-space: nowrap;
}
.badge-ok { color: var(--green); border-color: rgba(32,194,14,.3); }
.badge-partial { color: var(--amber); border-color: rgba(255,176,0,.3); }
.badge-locked { color: var(--red); border-color: rgba(255,51,51,.3); }
.badge-rec { color: var(--cyan); border-color: rgba(0,232,255,.3); }
.badge-anom { color: #666; border-color: rgba(100,100,100,.2); letter-spacing: .02em; }
/* ── Archivos (acordeón) ───────────────────────────────────────────── */
.file-block {
margin-bottom: 1.6rem;
scroll-margin-top: 3.5rem;
}
.file-hdr {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center; gap: .7rem;
padding: .52rem .9rem;
background: rgba(6,22,6,.7);
border: 1px solid var(--green-dim);
cursor: pointer; user-select: none;
transition: background .12s;
}
.file-hdr:hover { background: rgba(8,28,8,.9); }
.file-hdr.open { border-bottom-color: transparent; }
.file-chevron {
color: var(--green-dim); font-size: .7rem; transition: transform .2s;
flex-shrink: 0;
}
.file-hdr.open .file-chevron { transform: rotate(90deg); color: var(--green); }
.file-hdr-left { display: flex; align-items: baseline; gap: .6rem; }
.file-num { font-family: var(--font-title); font-size: 1.1rem; color: var(--green-dim); }
.file-name { font-family: var(--font-title); font-size: 1.15rem; color: var(--green-bright); letter-spacing: .09em; }
.file-tag { font-size: .58rem; letter-spacing: .14em; color: var(--dim); margin-left: auto; }
.file-body {
max-height: 0; overflow: hidden;
/* Apertura rápida (ease-out), cierre suave (ease-in) */
transition: max-height .28s ease-out;
border: 1px solid var(--green-dim); border-top: none;
background: rgba(0,4,0,.55);
}
.file-body.open {
max-height: 2400px; /* suficiente para el archivo más largo */
transition-duration: .38s;
transition-timing-function: ease-in;
}
.file-inner { padding: 1rem 1.1rem 1.2rem; line-height: 1.75; }
/* ── Tipografía de contenido ────────────────────────────────────────── */
.fi p { margin-bottom: .75rem; color: var(--white); font-size: .87rem; }
.fi p:last-child { margin-bottom: 0; }
.fi strong { color: var(--green); }
.fi em { color: var(--dim); font-style: normal; }
.hl-cyan { color: var(--cyan); }
.hl-gold { color: var(--gold,#ffd700); }
.hl-dim { color: var(--dim); font-size: .82rem; }
.hl-red { color: var(--red); }
.hl-amber{ color: var(--amber); }
/* ── Separadores de contenido ──────────────────────────────────────── */
.fi-sep {
display: block; margin: 1.1rem 0 .85rem;
font-size: .6rem; letter-spacing: .2em; color: var(--green-dim);
border-bottom: 1px solid rgba(32,194,14,.1);
padding-bottom: .35rem;
}
/* ── Lore / documentos ─────────────────────────────────────────────── */
.lore-doc {
border-left: 2px solid rgba(32,194,14,.25);
padding: .65rem .95rem;
margin-bottom: .85rem;
background: rgba(0,6,0,.5);
}
.lore-doc-id { font-size: .58rem; color: var(--dim); letter-spacing: .16em; margin-bottom: .4rem; }
.lore-doc p { color: var(--white); font-size: .84rem; line-height: 1.7; margin-bottom: .45rem; }
.lore-doc p:last-child { margin-bottom: 0; }
.lore-redacted {
display: inline-block; background: var(--green-dim);
color: var(--green-dim); min-width: 60px; user-select: none;
}
/* ── Terminal de práctica ──────────────────────────────────────────── */
#demo-terminal {
background: var(--bg-term);
border: 1px solid var(--green);
box-shadow: 0 0 20px rgba(32,194,14,.15);
margin-bottom: 1rem;
}
#demo-term-hdr {
display: flex; align-items: center; gap: .6rem;
padding: .35rem .9rem;
background: rgba(32,194,14,.06);
border-bottom: 1px solid var(--green-dim);
font-size: .6rem; color: var(--dim); letter-spacing: .12em;
}
.demo-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--green-dim);
}
.demo-dot.on { background: var(--green); box-shadow: 0 0 4px var(--green-glow2); }
#demo-term-hdr span:last-child { margin-left: auto; }
#demo-log {
padding: .65rem .9rem .45rem;
min-height: 140px; max-height: 260px;
overflow-y: auto; font-size: .8rem; line-height: 1.7;
}
#demo-log::-webkit-scrollbar { width: 3px; }
#demo-log::-webkit-scrollbar-thumb { background: var(--green-dim); }
.dl-prompt { color: var(--green-bright); }
.dl-cmd { color: var(--green-bright); }
.dl-resp { color: var(--white); }
.dl-room { color: var(--cyan); font-weight: bold; margin-top: .3rem; display: block; }
.dl-item { color: var(--gold,#ffd700); }
.dl-dim { color: var(--dim); }
.dl-cursor { display: inline-block; width: 7px; height: 13px;
background: var(--green-bright); vertical-align: middle;
animation: cursor-blink 1s step-end infinite; }
#demo-input-row {
display: flex; align-items: center; gap: .5rem;
padding: .4rem .9rem;
border-top: 1px solid var(--green-dim);
background: rgba(0,3,0,.7);
}
#demo-prompt-sym { color: var(--green-bright); font-size: .88rem; flex-shrink: 0; }
#demo-input {
flex: 1; background: none; border: none; outline: none;
color: var(--green-bright); font-family: var(--font); font-size: .83rem;
caret-color: var(--green-bright);
}
#demo-input::placeholder { color: var(--green-dim); }
#demo-replay {
background: none; border: 1px solid var(--green-dim);
color: var(--dim); font-family: var(--font); font-size: .6rem;
padding: .1rem .45rem; cursor: pointer; letter-spacing: .05em;
transition: all .15s; flex-shrink: 0;
}
#demo-replay:hover { border-color: var(--green); color: var(--green); }
/* ── Tablas ─────────────────────────────────────────────────────────── */
.ctab {
width: 100%; border-collapse: collapse;
font-size: .8rem; margin-bottom: .6rem;
}
.ctab th {
font-size: .6rem; color: var(--dim); font-weight: normal;
letter-spacing: .12em; text-transform: uppercase;
padding: .28rem .65rem; text-align: left;
border-bottom: 1px solid var(--green-dim);
}
.ctab td { padding: .42rem .65rem; border-bottom: 1px solid rgba(32,194,14,.06); vertical-align: top; }
.ctab tr:last-child td { border-bottom: none; }
.ctab td:first-child { color: var(--green-bright); min-width: 110px; white-space: nowrap; }
.ctab td:nth-child(2) { color: var(--white); font-size: .76rem; }
.ctab td:nth-child(3) { color: var(--dim); font-size: .7rem; }
.ctab tr:hover td { background: rgba(32,194,14,.025); }
@media (max-width:560px) {
.ctab td:nth-child(3) { display: none; }
.ctab { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ── Canales BBS ──────────────────────────────────────────────────── */
.ch-row {
display: flex; align-items: baseline; gap: .7rem;
padding: .45rem .8rem; margin-bottom: .3rem;
border: 1px solid rgba(32,194,14,.08);
background: rgba(0,5,0,.5);
}
.ch-name { font-family: var(--font-title); font-size: 1rem; letter-spacing: .07em; min-width: 90px; }
.ch-desc { font-size: .8rem; color: var(--white); }
.ch-dim { font-size: .72rem; color: var(--dim); }
/* ── Mapa ───────────────────────────────────────────────────────────── */
.compass-grid {
display: inline-grid;
grid-template-columns: repeat(3, 36px);
grid-template-rows: repeat(3, 30px);
gap: 2px; margin: .5rem 0;
}
.comp-cell {
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--green-dim); font-size: .74rem;
color: var(--dim); background: rgba(0,8,0,.6);
}
.comp-cell.on { border-color: var(--green); color: var(--green); background: rgba(32,194,14,.07); }
.comp-cell.ctr { border-color: rgba(0,232,255,.3); color: var(--cyan); font-size: .58rem; background: rgba(0,18,22,.5); }
/* ── Guardado ─────────────────────────────────────────────────────── */
.save-row {
display: flex; align-items: flex-start; gap: .8rem;
padding: .65rem .8rem; margin-bottom: .4rem;
border: 1px solid rgba(32,194,14,.1);
background: rgba(0,5,0,.5);
}
.save-ic { font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem; }
.save-t { color: var(--green); font-size: .84rem; margin-bottom: .18rem; }
.save-d { color: var(--white); font-size: .77rem; line-height: 1.55; }
.save-row.cloud { border-color: rgba(0,232,255,.15); }
.save-row.cloud .save-t { color: var(--cyan); }
/* ── Rangos ─────────────────────────────────────────────────────────── */
.rank-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: .45rem; margin-bottom: .9rem;
}
.rank-card {
border: 1px solid rgba(32,194,14,.14);
padding: .5rem .75rem;
background: rgba(0,5,0,.5);
}
.rank-name { font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .09em; line-height: 1; margin-bottom: .15rem; }
.rank-cond { font-size: .66rem; color: var(--dim); margin-bottom: .2rem; }
.rank-msg { font-size: .72rem; color: var(--white); line-height: 1.45; }
.r-dsc { color: #2a522a; } .r-obs { color: #2a8a2a; }
.r-con { color: #20c20e; } .r-sob { color: #90cc60; }
.r-ope { color: #39ff14; } .r-esp { color: #aaaaaa; }
/* ── Facciones ──────────────────────────────────────────────────────── */
.fac-card {
border: 1px solid rgba(32,194,14,.18);
padding: .65rem .85rem; margin-bottom: .6rem;
background: rgba(0,5,0,.6);
}
.fac-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.fac-glyph { font-size: 1.2rem; }
.fac-name { font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .08em; }
.fac-lore { color: var(--white); font-size: .8rem; line-height: 1.55; margin-bottom: .3rem; }
.fac-meta { font-size: .66rem; color: var(--dim); }
.fac-redacted { font-size: .66rem; color: var(--dim); font-style: italic; }
/* ── Morocota ───────────────────────────────────────────────────────── */
.mrc-row {
display: flex; align-items: flex-start; gap: .7rem;
padding: .5rem .75rem; margin-bottom: .35rem;
border: 1px solid rgba(255,176,0,.1);
background: rgba(18,10,0,.6);
}
.mrc-sym { color: var(--amber); font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }
.mrc-t { color: var(--amber); font-size: .82rem; margin-bottom: .12rem; }
.mrc-d { color: var(--white); font-size: .76rem; line-height: 1.5; }
/* ── Misiones ───────────────────────────────────────────────────────── */
.mis-row {
display: flex; align-items: flex-start; gap: .6rem;
padding: .45rem .7rem; margin-bottom: .3rem;
border-left: 2px solid rgba(32,194,14,.2);
background: rgba(0,5,0,.4);
}
.mis-sym { color: var(--green-bright); font-size: .85rem; flex-shrink:0; margin-top:.08rem; }
.mis-t { color: var(--green); font-size: .82rem; margin-bottom: .1rem; }
.mis-d { color: var(--white); font-size: .75rem; line-height: 1.5; }
/* ── Instalación ────────────────────────────────────────────────────── */
.inst-card {
border: 1px solid rgba(32,194,14,.15);
padding: .65rem .85rem; margin-bottom: .5rem;
background: rgba(0,5,0,.5);
}
.inst-t { color: var(--green-bright); font-size: .88rem; margin-bottom: .2rem; font-family: var(--font-title); letter-spacing: .07em; }
.inst-d { color: var(--white); font-size: .78rem; line-height: 1.6; }
.inst-d strong { color: var(--green); }
/* ── Glosario ───────────────────────────────────────────────────────── */
.glos-row {
display: grid; grid-template-columns: 130px 1fr;
align-items: baseline; gap: .5rem;
padding: .38rem .5rem;
border-bottom: 1px solid rgba(32,194,14,.05);
font-size: .82rem;
}
.glos-row:last-child { border-bottom: none; }
.glos-t { color: var(--green-bright); font-size: .76rem; letter-spacing: .05em; }
.glos-d { color: var(--white); }
@media (max-width:480px) { .glos-row { grid-template-columns: 1fr; gap: .1rem; } }
/* ── Estado ─────────────────────────────────────────────────────────── */
.st-row {
display: flex; align-items: flex-start; gap: .8rem;
padding: .55rem .75rem; margin-bottom: .35rem;
border: 1px solid rgba(32,194,14,.08);
}
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink:0; margin-top:.38rem; }
.st-dot.g { background: var(--green); box-shadow: 0 0 5px var(--green-glow2); }
.st-dot.y { background: var(--amber); box-shadow: 0 0 5px rgba(255,176,0,.35); }
.st-dot.c { background: var(--cyan); box-shadow: 0 0 5px var(--cyan-glow); }
.st-t { color: var(--green); font-size: .84rem; margin-bottom: .15rem; }
.st-d { color: var(--white); font-size: .76rem; line-height: 1.5; }
/* ── Anomalías / secretos ───────────────────────────────────────────── */
.anom-box {
border: 1px dashed rgba(255,215,0,.18);
background: rgba(18,12,0,.65); padding: .9rem 1rem;
text-align: center; margin-bottom: .8rem;
}
.anom-glyph {
font-family: var(--font-title); font-size: 1.6rem;
color: rgba(255,215,0,.18); letter-spacing: .2em;
display: block; margin-bottom: .45rem;
}
.anom-box p { color: var(--dim); font-size: .8rem; line-height: 1.7; }
/* ARG: este contenido existe. Solo necesitas saber dónde mirar. */
.arg-classified {
border: 1px solid rgba(255,51,51,.2);
background: rgba(15,0,0,.7); padding: .6rem .9rem;
margin-bottom: .6rem;
}
.arg-classified p { color: rgba(255,51,51,.4); font-size: .76rem; letter-spacing: .06em; }
/* ── Footer ─────────────────────────────────────────────────────────── */
#hfooter {
margin-top: 3rem; padding: .85rem 1rem;
border-top: 1px solid var(--green-dim);
font-size: .62rem; color: var(--dim); letter-spacing: .06em;
text-align: center; line-height: 1.7;
}
/* ── CTA ─────────────────────────────────────────────────────────────── */
.cta-link {
display: inline-block; font-family: var(--font-title); font-size: 1.3rem;
color: var(--green-bright); border: 1px solid var(--green);
padding: .55rem 2rem; letter-spacing: .11em; text-decoration: none;
text-shadow: 0 0 10px var(--green-glow2);
transition: background .15s, box-shadow .15s;
box-shadow: 0 0 10px rgba(32,194,14,.15);
}
.cta-link:hover { background: rgba(32,194,14,.08); box-shadow: 0 0 20px rgba(32,194,14,.25); }
/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:600px) {
#hm { padding: 1rem .65rem 3rem; }
.file-inner { padding: .85rem .75rem 1rem; }
.rank-grid { grid-template-columns: 1fr; }
.hh-title { font-size: 1.55rem; }
}
/* ── Directorio mobile overlay ─────────────────────────────────────── */
#dir-overlay {
display: none; position: fixed; inset: 0; z-index: 400;
background: rgba(0,3,0,.96);
overflow-y: auto; padding: 1rem;
}
#dir-overlay.show { display: block; }
#dir-overlay-close {
display: block; margin-bottom: .8rem;
background: none; border: 1px solid var(--green-dim);
color: var(--dim); font-family: var(--font); font-size: .7rem;
padding: .2rem .6rem; cursor: pointer;
}
/* ── Redacción ARG sutil ─────────────────────────────────────────────── */
.redact {
display: inline-block; background: var(--green-dim);
color: var(--green-dim); user-select: none;
}
/* ── Utilidades extraídas de atributos style= (Sprint 5 / CSP) ── */
/* ── Utilidades extraídas de atributos style= (CSP sprint5) ── */
._u1 { color:var(--green-dim);font-size:.56rem; }
._u2 { color:var(--green-dim) }
._u3 { color:#1a3a1a }
._u4 { color:var(--dim) }
._u5 { color:var(--green) }
._u6 { color:var(--cyan) }
._u7 { color:rgba(180,100,255,.9) }
._u8 { color:var(--amber) }
._u9 { color:#39ff14 }
._u10 { color:#00e8ff }
._u11 { margin-bottom:.7rem; }
._u12 { padding:.3rem .5rem; border-bottom:1px solid rgba(32,194,14,.06); font-size:.82rem; display:grid; grid-template-columns:110px 1fr; gap:.5rem; }
._u13 { color:var(--green-bright) }
._u14 { color:var(--white) }
._u15 { padding:.3rem .5rem; font-size:.82rem; display:grid; grid-template-columns:110px 1fr; gap:.5rem; }
._u16 { border-color:rgba(170,170,170,.15) }
._u17 { color:#aaaaaa }
._u18 { color:#ffb000 }
._u19 { color:#20c20e }
._u20 { border-color:rgba(0,232,255,.2) }
._u21 { border-color:rgba(255,176,0,.2) }
._u22 { margin:.5rem 0 .5rem 1.2rem; color:var(--white); font-size:.77rem; line-height:1.8; }
._u23 { text-align:center; margin-top:1rem; }
._u24 { font-size:1rem; padding:.45rem 1.5rem; }
._u25 { margin-top:.7rem; }
._u26 { color:var(--red) }
._u27 { color:var(--dim);text-decoration:underline dotted; }
._u28 { margin-top:.6rem; }
._u29 { color:var(--dim);font-size:.72rem;margin-top:.7rem; }
._u30 { text-align:center; margin: 2.5rem 0 1.2rem; }
._u31 { text-align:center; margin:.7rem 0 2rem; font-size:.7rem; color:var(--dim); display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; }
._u32 { color:var(--dim); letter-spacing:.07em; }
._u33 { color:var(--dim);text-decoration:none; }
._u34 { color:rgba(32,194,14,.2);font-size:.54rem; }