/* ═══════════════════════════════════════════════════════════════
   nahs.wtf · pantalla de carga, modos (juego / landing) y landing.
   app.css tiene el cuarto 3D; aquí va todo lo demás.
   ═══════════════════════════════════════════════════════════════ */

html{scroll-behavior:smooth;scroll-padding-top:72px}
body.booting{overflow:hidden}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--bone);color:var(--ink);padding:8px 12px;border-radius:6px}
.skip:focus{left:8px}

/* ───────────── PANTALLA DE CARGA ───────────── */
.gate{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:18px 16px;
  padding-top:calc(18px + env(safe-area-inset-top,0px));
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
  background:var(--ink);
  overflow-y:auto;
  transition:clip-path .7s cubic-bezier(.76,0,.24,1), opacity .7s ease;
  clip-path:inset(0 0 0 0);
}
/* líneas de barrido de tele vieja, muy suaves */
.gate::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(237,233,240,.028) 0 1px, transparent 1px 3px);
}
.gate.out{clip-path:inset(0 0 100% 0);pointer-events:none}
.gate[hidden]{display:none!important}

.g-top,.g-foot{
  position:relative;
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.g-mid{position:relative;width:100%;max-width:980px;margin:0 auto;padding:28px 0}

.g-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin:0 0 6px;
  animation:gUp .6s cubic-bezier(.22,1,.3,1) .05s both;
}
.g-word{
  font-family:var(--display);font-weight:400;
  font-size:clamp(78px,21vw,236px);line-height:.84;letter-spacing:.005em;
  margin:0;display:flex;flex-wrap:wrap;
}
.g-word em{font-style:normal;color:var(--rose)}
.g-l{display:inline-block;animation:gDrop .75s cubic-bezier(.22,1,.3,1) both}
.g-l:nth-child(2){animation-delay:.12s}
@keyframes gDrop{from{transform:translateY(38%) skewY(6deg);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
@keyframes gUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* la barra de carga es el tachón rosa del titular, a lo ancho */
.g-load{margin-top:22px;animation:gUp .6s ease .25s both}
.g-bar{height:6px;background:rgba(237,233,240,.08);border-radius:3px;overflow:hidden;transform:rotate(-.6deg)}
.g-bar i{
  display:block;height:100%;width:100%;background:var(--rose);
  transform-origin:left center;transform:scaleX(0);
  box-shadow:0 0 16px rgba(255,46,126,.9);
}
.g-row{
  display:flex;justify-content:space-between;gap:12px;margin-top:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
#gPct{color:var(--bone);font-variant-numeric:tabular-nums}

.g-load.done{opacity:.5}

.g-ask{
  grid-column:1/-1;margin:0 0 2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
}
.g-opts{display:grid;gap:12px;margin-top:26px}
.g-opts[hidden]{display:none}
@media (min-width:760px){ .g-opts{grid-template-columns:1fr 1fr;gap:16px} }

.g-opt{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  text-align:left;padding:20px 20px 16px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--ink-2);color:var(--bone);
  animation:gUp .55s cubic-bezier(.22,1,.3,1) both;
  transition:border-color .25s,color .25s,transform .25s cubic-bezier(.34,1.5,.5,1);
  --c:var(--rose);
}
.g-land{--c:var(--cyan);animation-delay:.08s}
.g-opt::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--c);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.76,0,.24,1);
}
.g-opt:hover,.g-opt:focus-visible{border-color:var(--c);color:var(--ink);transform:translateY(-3px)}
.g-opt:hover::before,.g-opt:focus-visible::before{transform:translateY(0)}
.g-opt:hover .g-d,.g-opt:focus-visible .g-d,
.g-opt:hover .g-f,.g-opt:focus-visible .g-f,
.g-opt:hover .g-n,.g-opt:focus-visible .g-n{color:var(--ink)}
.g-opt:active{transform:translateY(0) scale(.99)}
.g-opt[aria-busy="true"]{cursor:progress}
.g-opt:disabled{opacity:.45;cursor:not-allowed;transform:none}
.g-opt:disabled::before{display:none}

.g-n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--c);transition:color .25s}
.g-t{font-family:var(--display);font-size:clamp(34px,6vw,54px);line-height:.95;text-transform:uppercase}
.g-d{font-size:14px;color:#C9C4D4;max-width:40ch;transition:color .25s}
.g-f{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  transition:color .25s;
}
.g-f kbd{
  display:inline-grid;place-items:center;min-width:24px;height:24px;
  border:1px solid currentColor;border-radius:5px;font-family:var(--mono);font-size:11px;
}

/* ───────────── MODOS ───────────── */
.landing{display:none}
body.mode-landing .landing{display:block}
.landing{overflow-x:clip}
body.booting .landing{display:none}

/* en el teléfono la barra del cuarto lleva 4 botones: que bajen de línea en vez de salirse */
.topbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){
  .topbar{align-items:flex-start}
  .topbtns{max-width:62%;gap:6px}
  .topbtns .snd,.topbtns .enter{padding:6px 10px;font-size:9px}
}

/* ───────────── LANDING ───────────── */
.l-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:rgba(10,10,15,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.l-head .wordmark{text-decoration:none}
.l-nav{display:none;gap:22px}
.l-nav a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;transition:color .2s;
}
.l-nav a:hover{color:var(--bone)}
@media (min-width:860px){ .l-nav{display:flex} }

.l-hero{
  display:grid;gap:34px;align-items:end;
  max-width:1180px;margin:0 auto;padding:56px 16px 48px;
}
@media (min-width:960px){ .l-hero{grid-template-columns:1.35fr 1fr;padding:92px 26px 70px} }
.l-ch{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--rose);margin:0 0 14px;text-transform:uppercase}
.l-h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(46px,10.5vw,118px);line-height:.9;margin:0;text-wrap:balance;
}
.l-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:18px 0 0}
.l-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);
  border:1px solid rgba(237,233,240,.26);border-radius:999px;padding:11px 18px;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn:hover{background:var(--bone);color:var(--ink);transform:translateY(-2px)}
.btn-rose{background:var(--rose);border-color:var(--rose);color:var(--ink)}
.btn-rose:hover{background:var(--bone);border-color:var(--bone)}
.btn-kick{border-color:#53FC18;color:#53FC18}
.btn-kick:hover{background:#53FC18;border-color:#53FC18;color:var(--ink)}
.btn-big{font-size:13px;padding:15px 26px}

/* chat de la portada: los mismos del cuarto, en texto de verdad */
.l-chat{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#09080e;font-family:var(--mono);font-size:12.5px;
  display:flex;flex-direction:column;height:340px;
}
.l-chat-h{
  display:flex;justify-content:space-between;padding:11px 14px;
  background:#100e18;border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.16em;color:var(--mute);
}
.l-chat-h span:first-child{color:var(--rose)}
.l-chat-list{list-style:none;margin:0;padding:10px 14px;flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.l-chat-list li{color:rgba(201,196,212,.92);line-height:1.35;animation:chatIn .35s cubic-bezier(.22,1,.3,1) both}
.l-chat-list b{font-weight:700;margin-right:6px}
@keyframes chatIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.l-chat-in{padding:11px 14px;border-top:1px solid var(--line);background:#100e18;color:#5c5870}


.l-sec{max-width:1100px;margin:0 auto;padding:62px 16px;border-top:1px solid var(--line)}
@media (min-width:960px){ .l-sec{padding:86px 26px} }
.l-sec h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,64px);line-height:.95;margin:0 0 16px;
}
.l-sec p{color:#C9C4D4;margin:0 0 14px;max-width:62ch;font-size:16px}
.l-sec .links{margin-top:20px}

.num{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--mute);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.num i{flex:1;height:1px;background:var(--line)}
[data-c="rose"] .num span:first-child,[data-c="rose"] .eyebrow{color:var(--rose)}
[data-c="amber"] .num span:first-child,[data-c="amber"] .eyebrow{color:var(--amber)}
[data-c="cyan"] .num span:first-child,[data-c="cyan"] .eyebrow{color:var(--cyan)}
[data-c="bone"] .num span:first-child,[data-c="bone"] .eyebrow{color:var(--bone)}

.l-split{display:grid;gap:28px;align-items:center}
@media (min-width:860px){ .l-split{grid-template-columns:1fr 1.15fr;gap:44px} }
.l-thumb{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--ink-2)}
.l-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.3,1),filter .3s}
.l-thumb:hover img{transform:scale(1.045);filter:brightness(.8)}
.l-playbtn{
  position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px;border-radius:50%;
  background:var(--rose);box-shadow:0 10px 30px -6px rgba(255,46,126,.8);
  transition:transform .3s cubic-bezier(.34,1.7,.5,1);
}
.l-playbtn::after{
  content:"";position:absolute;left:29px;top:23px;
  border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--ink);
}
.l-thumb:hover .l-playbtn{transform:scale(1.14)}

.l-live{display:grid;gap:12px;margin-top:26px}
@media (min-width:700px){ .l-live{grid-template-columns:1fr 1fr} }
.l-live-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:6px;padding:24px 22px;
  border:1px solid var(--line);border-left:5px solid var(--b);border-radius:12px;
  text-decoration:none;color:var(--bone);background:var(--ink-2);
  transition:color .25s;
}
.l-live-card::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--b);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.76,0,.24,1);
}
.l-live-card:hover{color:var(--ink)}
.l-live-card:hover::before{transform:scaleX(1)}
.l-live-n{font-family:var(--display);font-size:clamp(40px,7vw,64px);line-height:.9;text-transform:uppercase}
.l-live-u{font-family:var(--mono);font-size:11px;letter-spacing:.12em;opacity:.75}

/* el podcast sin nombre: tachado de censura que titila de vez en cuando */
.redact{
  display:inline-block;color:transparent;background:var(--bone);border-radius:3px;
  line-height:.8;vertical-align:.04em;user-select:none;
  animation:redact 4.5s steps(1) infinite;
}
@keyframes redact{0%,88%,100%{background:var(--bone)}90%{background:var(--amber)}93%{background:var(--rose)}96%{background:var(--bone)}}
.l-mystery{position:relative}
.l-stamp{
  position:absolute;right:16px;top:74px;margin:0!important;
  font-family:var(--display);font-size:clamp(26px,4.4vw,42px);letter-spacing:.06em;
  color:var(--amber)!important;border:3px solid var(--amber);border-radius:8px;padding:2px 14px;
  transform:rotate(9deg);opacity:.85;pointer-events:none;
}
@media (max-width:640px){ .l-stamp{position:static;display:inline-block;margin-top:10px!important;transform:rotate(-4deg)} }

#lApps .apps{grid-template-columns:repeat(4,1fr);max-width:560px;margin-top:22px;padding:22px 16px}
@media (min-width:700px){ #lApps .apps{grid-template-columns:repeat(8,1fr);max-width:none} }
.app.soon{cursor:help;opacity:.62}
.app.soon .ico{background:transparent;border:2px dashed var(--b);color:var(--b);box-shadow:none}

.l-board{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;max-width:760px}
.l-board li{
  display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;
  padding:14px 2px;border-bottom:1px solid var(--line);
}
.l-board .bx{
  width:24px;height:24px;border:2px solid var(--mute);border-radius:4px;
  display:grid;place-items:center;font-family:var(--display);font-size:16px;
}
.l-board .nm{font-size:17px;font-weight:500}
.l-board small{font-family:var(--mono);font-size:11px;color:var(--cyan);font-weight:400;margin-left:6px}
.l-board .tg{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  border:1.5px solid currentColor;border-radius:999px;padding:4px 11px;white-space:nowrap;
}
.st-done .bx{border-color:var(--rose)}
.st-done .bx::after{content:"";width:6px;height:12px;border:solid var(--rose);border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.st-done .tg{color:var(--rose)}
.st-done:nth-child(odd) .tg{color:var(--amber)}
.st-mystery .bx{border-color:var(--cyan);color:var(--cyan)}
.st-mystery .tg{color:var(--cyan)}
.st-mystery .nm,.st-maybe .nm{color:rgba(237,233,240,.62)}
.st-maybe .bx{border-style:dashed}
.st-maybe .tg{color:var(--mute);border-style:dashed}

.l-end{
  max-width:1100px;margin:0 auto;padding:90px 16px 100px;
  display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;
  border-top:1px solid var(--line);
}
.l-neon{
  margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(40px,9vw,104px);line-height:.95;color:#FFD9E7;
  text-shadow:0 0 6px #FF2E7E,0 0 22px #FF2E7E,0 0 52px rgba(255,46,126,.7);
}

.foot{
  border-top:1px solid var(--line);
  padding:26px 16px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--mute);text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
}

/* aparición al hacer scroll (landing.js pone .rv y luego .in) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,1,.3,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .gate{transition:opacity .2s}
  .gate.out{clip-path:none;opacity:0}
}

/* Tachón de la landing: el titular grande parte "un trabajo normal" en dos líneas y el
   ::after de app.css (una sola raya al 52% del bloque) caía entre ambas. Aquí la raya
   es un fondo clonado por línea: cada renglón lleva la suya. */
.l-h1 .strike{
  display:inline;color:var(--mute);
  background:linear-gradient(var(--rose),var(--rose)) no-repeat 0 58% / 0% .085em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:strikeBg .55s cubic-bezier(.6,0,.2,1) .9s forwards;
}
.l-h1 .strike::after{display:none}
@keyframes strikeBg{to{background-size:100% .085em}}
@media (prefers-reduced-motion:reduce){ .l-h1 .strike{background-size:100% .085em;animation:none} }

/* el cursor circular es del cuarto 3D; en la landing y la carga, el del sistema */
body:not(.mode-game) #cur{display:none!important}

/* dentro del cuarto solo queda una salida arriba (sentarse): los botones de la barra
   se montaban con ella, sobre todo en el teléfono donde bajan a dos líneas */
body.fps .topbtns{display:none}

/* crédito del footer: último elemento, el corazón late suave al pasar */
.credit{
  flex-basis:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  margin-top:10px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--mute);text-decoration:none;transition:color .2s;
}
.credit b{color:var(--bone);font-weight:700;transition:color .2s}
.credit .heart{width:14px;height:14px;fill:var(--rose);flex:none;transition:transform .2s}
.credit:hover{color:var(--bone)}
.credit:hover b{color:var(--rose)}
.credit:hover .heart{animation:beat .9s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){ .credit:hover .heart{animation:none} }

/* ───────────── FIRMA (logo) ─────────────
   Un solo <symbol id="firma"> en el HTML; cada uso hereda color con currentColor. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wordmark .firma{display:block;height:46px;width:auto;color:var(--rose);filter:drop-shadow(0 0 10px rgba(255,46,126,.35))}
.g-word{display:block;filter:drop-shadow(0 0 22px rgba(255,46,126,.45))}  /* sombra fuera del clip-path de la firma */
.g-firma{
  display:block;width:auto;height:clamp(150px,34vw,300px);max-width:100%;
  color:var(--rose);
  animation:gSign 1.15s cubic-bezier(.65,0,.35,1) .1s both;
}
/* se "escribe" de izquierda a derecha, como una firma */
@keyframes gSign{from{clip-path:inset(0 100% 0 0);transform:rotate(-4deg) scale(.96)}to{clip-path:inset(0 0 0 0);transform:none}}
.foot-brand{display:inline-flex;align-items:center;gap:12px}
.foot-brand .firma{height:26px;width:auto;color:var(--bone);opacity:.85}
@media (prefers-reduced-motion:reduce){ .g-firma{animation:none} }