/* ==========================================================================
   Averías Geolocalizadas — estética monocroma en 4 bits (16 niveles de gris)
   ========================================================================== */

:root{
  --bg:#000;
  --fg:#fff;
  --lo:#555;
  --mid:#999;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  color:var(--fg);
  background:var(--bg);
}

body{
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  cursor:crosshair;
  animation:crt 9s infinite;
}

@keyframes crt{0%,97%,100%{opacity:1}98%{opacity:.92}99%{opacity:.97}}

a{color:var(--fg);text-decoration:none}
a:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- capas ---------- */

#bg{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:0;
  pointer-events:none;
  background:var(--bg);
}

#scan{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
}
#scan::after{
  content:"";position:absolute;left:0;right:0;height:110px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.05),transparent);
  animation:vscan 7s linear infinite;
}
@keyframes vscan{from{top:-120px}to{top:110vh}}

#ghostwrap{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}

/* ---------- cabecera ---------- */

#top{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  padding:.55rem .9rem;
  background:var(--bg);
  border-bottom:1px solid var(--lo);
}

#status{display:flex;gap:1rem;font-size:.68rem;letter-spacing:.1em;color:var(--mid);text-align:center}
#avarias{color:var(--fg)}
#avarias.flash{animation:blink .5s steps(2) infinite}
@keyframes blink{50%{color:var(--bg);background:var(--fg)}}

#nav{text-align:center}
#nav a{margin-left:1rem;font-size:.78rem;letter-spacing:.08em}
#nav a:hover{background:var(--fg);color:var(--bg)}

/* ---------- contenido ---------- */

#view{
  max-width:64rem;
  margin:0 auto;
  padding:6rem 1.2rem 3.5rem;
}
#view>*{animation:fadein .55s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1}}

.hero{padding:3rem 0 2rem;border-bottom:1px solid var(--lo);margin-bottom:2.2rem;text-align:center}
.hero h1{
  font-family:"VT323",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  font-size:clamp(3rem,11vw,8.5rem);
  line-height:.86;letter-spacing:.02em;margin:0 0 1.4rem;
  text-transform:uppercase;font-weight:400;
}
.hero .sub{font-size:1.05rem;letter-spacing:.06em}
.hero .sub2{color:var(--mid);font-size:.85rem;line-height:1.9}
.hero .hint{margin-top:1.8rem;font-size:.8rem;line-height:2.2;color:var(--mid)}
.hero .hint a{border-bottom:1px solid var(--fg);color:var(--fg)}
.hero .hint a:hover{background:var(--fg);color:var(--bg)}
.dim{color:var(--lo)}

.stanza{margin:0 0 2.8rem}
.sname{
  display:flex;align-items:baseline;gap:1rem;
  font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;
  border-top:1px solid var(--lo);padding-top:1rem;margin:0 0 1.2rem;
}
.sname span{font-size:1.2rem}
.sname em{font-style:normal;letter-spacing:.1em;color:var(--lo)}

.line{position:relative;margin:.95rem 0;padding-left:2.6rem;font-size:1.06rem}
.linenum{
  position:absolute;left:0;top:.32rem;
  font-size:.62rem;letter-spacing:.15em;color:var(--lo);
}
.linemarker{
  margin-left:1rem;font-size:.72rem;color:var(--lo);border:none;
}
.linemarker:hover{color:var(--bg);background:var(--fg)}

.wlink{border-bottom:1px dotted var(--fg);cursor:pointer;transition:background .08s,color .08s}
.wlink:hover{background:var(--fg);color:var(--bg);border-bottom-color:var(--bg)}

/* ---------- el letrero azul (en monocromo: trama de 2 bits) ---------- */

.letrero-line{padding-left:2.6rem}
.letrero{
  display:inline-block;min-width:16rem;min-height:5rem;padding:.8rem 1.6rem;
  background:repeating-linear-gradient(45deg,#262626 0 2px,#000 2px 6px);
  border:2px solid var(--fg);
  box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--fg);
  cursor:pointer;text-align:center;
}
.letrero:hover{background:repeating-linear-gradient(45deg,var(--fg) 0 2px,#000 2px 6px)}
.letrero-txt{
  display:flex;align-items:center;justify-content:center;min-height:2.4rem;
  font-family:"VT323",ui-monospace,monospace;
  font-size:clamp(1.7rem,4.5vw,2.8rem);
  letter-spacing:.34em;text-indent:.34em;
  text-transform:uppercase;color:var(--fg);
}
.letrero:hover .letrero-txt{color:#000}
.bigletrero.wpop{cursor:pointer}
.bigletrero.wpop:focus-visible{outline:2px dashed var(--fg);outline-offset:6px}
.bigletrero{width:100%;max-width:34rem;min-height:14rem;margin:1.2rem auto;display:block}
.bigletrero .letrero-txt{min-height:13rem}

.line-letrero{
  max-width:26rem;margin:1.6rem auto;padding-left:0;
  text-align:right;direction:rtl;unicode-bidi:isolate-override;
}
.line-letrero::after{
  content:"hebreo · de derecha a izquierda";
  display:block;clear:both;
  font-size:.6rem;letter-spacing:.2em;color:var(--lo);margin-top:.4rem;
}
.line-letrero .wlink{font-size:1.3rem;letter-spacing:.12em}

/* ---------- páginas palabra / línea ---------- */

.lnav{text-align:center}
.lnav a{margin:0 .5rem}
.linepage,.wordpage{text-align:center}
.wordpage .wcv{margin-left:auto;margin-right:auto}

.wetal{font-size:.66rem;letter-spacing:.18em;color:var(--mid);margin:.6rem 0 1rem;text-transform:uppercase;text-align:center}
.wetal a{color:var(--fg);border-bottom:1px dotted}
.wactions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.8rem;align-items:center;justify-content:center}
.wactions a{border-bottom:1px solid var(--fg)}
.wactions a:hover{background:var(--fg);color:var(--bg)}
.wactions button{
  background:none;color:var(--fg);border:1px solid var(--fg);font:inherit;
  padding:.4rem .7rem;cursor:pointer;letter-spacing:.12em;
}
.wactions button:hover{background:var(--fg);color:var(--bg)}
.off{color:var(--lo);pointer-events:none;border-bottom:1px dotted var(--lo)!important}

.pcanvas{display:block;width:100%;image-rendering:pixelated;background:var(--bg);border:1px solid #111}

.lnav{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.72rem;padding:.4rem 0;border-bottom:1px solid var(--lo);margin-bottom:1rem;
}
.lnav a{border:1px solid var(--lo);padding:.15rem .5rem;color:var(--mid);letter-spacing:.08em}
.lnav a:hover{color:var(--bg);background:var(--fg);border-color:var(--fg)}

.linebig{font-size:clamp(1.7rem,5.4vw,3.8rem);line-height:1.3;word-break:break-word;transition:opacity .25s}
.linebig.hide{opacity:0}
.wcv.wpop{cursor:pointer}
.wordhit{margin:.7rem 0 .1rem;text-align:center;line-height:1}
.wordhit a{
  font-family:"VT323",ui-monospace,monospace;
  font-size:clamp(1.9rem,6.5vw,3.2rem);
  text-transform:uppercase;letter-spacing:.05em;
  border-bottom:2px dotted currentColor;padding:0 .12em;
}
.wordhit a:hover{background:var(--fg);color:var(--bg)}
.scram{animation:scram .42s steps(3) 3}
@keyframes scram{
  0%{transform:translateX(0);filter:none}
  20%{transform:translateX(-4px);filter:invert(1)}
  45%{transform:translateX(3px)}
  70%{transform:translateX(-2px);filter:invert(1)}
  100%{transform:none;filter:none}
}
.linebig .wlink{border-bottom:2px solid var(--fg)}
.linebig.rtl{direction:rtl;unicode-bidi:bidi-override;text-align:center}

/* ---------- mapa ---------- */

.mapa{display:block;width:100%;height:auto;border:1px solid var(--lo);background:#000}
.mapa .sky{fill:#000}
.mapa .star{fill:#2a2a2a}
.mapa .ridg1{fill:#181818}
.mapa .ridg2{fill:#fff}
.mapa .tag{fill:var(--mid);font-size:13px;letter-spacing:.25em;font-family:inherit}
.mapa .trail{fill:#fff;opacity:.45}
.mk{cursor:pointer}
.mk circle{fill:#000;stroke:#fff;stroke-width:2}
.mk:hover circle{fill:#fff;stroke:#000}
.mk text{
  fill:#000;font-size:13px;letter-spacing:.04em;font-family:inherit;
  pointer-events:none;
  stroke:#fff;stroke-width:2.5px;stroke-linejoin:round;paint-order:stroke;
}
.mk:hover text{fill:#000}
.casa{stroke:#fff;stroke-width:2;fill:#000}
.casa polygon{fill:#fff;stroke:#fff}
.casa line{fill:none}

/* ---------- ventana de avería (respaldo si bloquean el popup) ---------- */

#ventana{
  position:fixed;inset:0;z-index:96;background:rgba(0,0,0,.82);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
}
#ventana>div{
  width:min(30rem,100%);max-height:88vh;overflow:auto;
  background:var(--bg);border:1px solid var(--fg);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--fg);
  padding:1rem;
}
#ventana img,#ventana video{
  display:block;width:100%;max-height:56vh;object-fit:contain;
  background:var(--bg);border:1px solid var(--lo);
}
@media (max-width:34rem){
  #ventana{padding:.6rem}
  #ventana>div{width:100%;padding:.7rem}
  #ventana .caja{height:clamp(140px,38vh,240px)}
}
#ventana .caja{
  position:relative;display:block;background:var(--bg);
  height:clamp(150px,42vh,300px);overflow:hidden;
  border:1px solid var(--fg);box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--fg);
}
#ventana .v-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);color:var(--fg);
  font-family:"VT323",ui-monospace,monospace;font-size:1.2rem;letter-spacing:.24em;
  cursor:pointer;z-index:3;
}
#ventana .v-play:active{background:var(--fg);color:var(--bg)}
#ventana .caja .q{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
#ventana .caja::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
}
#ventana p{margin:.6rem 0}
#ventana .v-busca{letter-spacing:.2em;padding:2.2rem 0;text-align:center}
#ventana .v-busca span{color:var(--mid)}
#ventana .v-quien{font-size:1.2rem;letter-spacing:.16em}
#ventana .v-cap{word-break:break-word}
#ventana .v-meta{color:var(--lo);font-size:.66rem;letter-spacing:.1em}
#ventana .v-bot button{
  font:inherit;letter-spacing:.14em;background:none;color:var(--fg);
  border:1px solid var(--fg);padding:.35rem .8rem;cursor:pointer;margin:0 .5rem 0 0;
}
#ventana .v-bot button:hover{background:var(--fg);color:var(--bg)}

/* ---------- avisos / glitches ---------- */

#toast{
  position:fixed;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:90;
  background:var(--bg);border:1px solid var(--fg);padding:.5rem 1rem;
  font-size:.8rem;letter-spacing:.05em;opacity:0;transition:opacity .25s;
  max-width:92vw;text-align:center;pointer-events:none;
}
#toast.on{opacity:1}

#banner{
  position:fixed;top:3.2rem;left:0;right:0;z-index:85;
  background:var(--fg);color:var(--bg);text-align:center;
  font-size:.74rem;font-weight:700;letter-spacing:.22em;padding:.55rem;
  animation:blink 1.1s steps(2) infinite;
}

#crash{
  position:fixed;inset:0;z-index:95;background:var(--bg);color:var(--fg);
  padding:2.2rem;white-space:pre-wrap;font-size:.85rem;letter-spacing:.08em;line-height:2;
}
#crash pre{margin:0;font:inherit}

#blackout{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  opacity:0;transition:opacity .38s;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:2rem;font-size:1.25rem;letter-spacing:.2em;white-space:pre-line;
}
#blackout.on{opacity:1}

#console{
  position:fixed;left:.9rem;right:.9rem;bottom:.4rem;z-index:80;
  font-size:.66rem;color:var(--lo);letter-spacing:.08em;pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- fantasmas, averías ---------- */

a.ghost{
  position:absolute;top:var(--gy);left:0;
  opacity:var(--op);font-size:var(--gsz);white-space:nowrap;letter-spacing:.2em;
  border:none;color:#fff;
  animation:fly var(--dur) linear forwards;
  pointer-events:auto;
}
a.ghost:hover{color:#000;background:#fff}
@keyframes fly{0%{transform:translate3d(-35vw,0,0)}100%{transform:translate3d(135vw,0,0)}}

body.inv #view{filter:invert(1)}
body.shake{animation:shk .45s steps(2)}
@keyframes shk{
  0%{transform:translate(2px,-1px)}25%{transform:translate(-2px,1px)}
  50%{transform:translate(1px,2px)}75%{transform:translate(-1px,-2px)}100%{transform:none}
}

#view.rescan{animation:rescan 1s steps(18) both}
@keyframes rescan{
  0%{opacity:.12;filter:contrast(0)}
  25%{opacity:.92;filter:contrast(2) brightness(1.6)}
  50%{opacity:.3}
  75%{opacity:1}
  100%{filter:none}
}

.colofon{
  margin-top:2.6rem;text-align:center;font-size:.7rem;letter-spacing:.25em;
  color:var(--lo);border-top:1px solid var(--lo);padding-top:1.2rem;
}

@media(max-width:640px){
  #view{padding-top:5.6rem}
  #status{font-size:.6rem}
  .line{padding-left:2.1rem;font-size:.97rem}
  .linebig{font-size:1.75rem}
}