/* Misión autocustodia — Dos números
   Fondo de escena para grabación. Diseñado para pantalla completa. */

:root{
  --bg:#1d1d1d;
  --bg2:#252525;
  --panel:#272727;
  --line:#393939;
  --ink:#f1f1f1;
  --dim:#969696;
  --dimmer:#696969;
  --gold:#f5ae0e;
  --orange:#f7931a;
  --ice:#7fd4ff;
  --red:#ff6b6b;
  --green:#5ddc9a;
  --mono:'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* fondo sutil: rejilla + halo */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  /* medido de la portada de Lunaticoin: gris neutro que sube desde abajo, sin tinte */
  background:linear-gradient(to top, #373737 0%, #1d1d1d 24%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.030) 1px,transparent 1px);
  background-size:64px 64px;
}

/* ---------- fundido a negro entre escenas ---------- */
#fade{
  position:fixed;inset:0;z-index:30;background:#000;
  opacity:0;pointer-events:none;transition:opacity .58s ease;
}
#fade.on{opacity:1}
@media (prefers-reduced-motion:reduce){#fade{transition:none}}

/* ---------- escenario ---------- */
#stage{position:relative;z-index:1;height:100vh;width:100vw;user-select:none;-webkit-user-select:none}
.scene{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  padding:5vh 6vw 9vh;
  text-align:center;
}
.scene.on{display:flex;animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.kicker{
  font-size:clamp(11px,1.1vw,15px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:1.6vh;
}
h1{font-size:clamp(34px,5.6vw,92px);line-height:1.02;margin:0 0 2vh;font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(24px,3.2vw,52px);line-height:1.1;margin:0 0 2vh;font-weight:650;letter-spacing:-.01em}
.lead{font-size:clamp(15px,1.5vw,24px);color:var(--ink);max-width:54ch;line-height:1.5;margin:0 auto}
.tiny{font-size:clamp(11px,.95vw,14px);color:var(--dimmer);letter-spacing:.04em}

/* revelado progresivo */
.step{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.step.shown{opacity:1;transform:none;pointer-events:auto}

/* ---------- caja fuerte en wireframe ---------- */
#safe{
  display:block;margin:2.2vh auto 0;cursor:pointer;
  width:min(34vh,340px);height:min(34vh,340px);
}

/* ---------- cierre: capa superpuesta "mientras tanto" ---------- */
.capa-fin{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:5vh 6vw 9vh;text-align:center;
}
#semilla{display:block;margin:1.2vh auto 0;width:min(64vh,640px);height:min(30vh,300px)}
.ack{display:flex;gap:6vw;justify-content:center;align-items:flex-end;margin-top:3vh}
.ack-item{display:flex;flex-direction:column;align-items:center;gap:1vh}
.ack-item a{display:flex;flex-direction:column;align-items:center;gap:1vh;text-decoration:none;color:inherit;cursor:pointer;transition:opacity .2s}
.ack-item a:hover{opacity:.82}
.semilla-link{display:block;cursor:pointer}
a.enlace{text-decoration:none;cursor:pointer}
.yt-link{display:inline-flex;align-items:center;margin-top:2.4vh;
  font-size:clamp(14px,1.35vw,20px);color:var(--ink);text-decoration:none;cursor:pointer;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:999px;padding:.5em 1.15em;
  letter-spacing:.02em;transition:border-color .2s,color .2s,background .2s;background:rgba(255,255,255,.03)}
.yt-link:hover{border-color:var(--gold);color:var(--gold);background:rgba(245,174,14,.06)}
.yt-link .play{color:#ff4d4d;font-size:.82em;margin-right:.15em}
.ack-item canvas{display:block;width:min(22vh,220px);height:min(22vh,220px)}
.ack-item span{font-size:clamp(15px,1.5vw,24px);color:var(--ink);letter-spacing:.01em}
.ack-desc{margin:.4vh auto 0;max-width:22ch;font-size:clamp(11px,.98vw,15px);line-height:1.4;color:var(--dim)}

/* ---------- el encapuchado de "próximamente" ---------- */
#hacker{
  display:block;margin:1.6vh auto 0;
  width:min(50vh,500px);height:min(37vh,370px);
}

/* ---------- rango 1 → 2^256 ---------- */
.rango{
  display:flex;align-items:center;justify-content:center;gap:.42em;
  font-family:var(--mono);font-weight:700;line-height:1;
  font-size:clamp(40px,7.4vw,132px);color:var(--gold);margin-top:2.4vh;
}
.rango i{color:var(--dim);font-weight:400;font-style:normal;font-size:.62em}
.rango sup{font-size:.46em;top:-.62em;position:relative;line-height:0}

/* ---------- la cifra completa, sin caja ---------- */
.cifra{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(13px,1.48vw,26px);line-height:1.55;letter-spacing:.02em;
  color:var(--ink);max-width:min(1520px,100%);margin:2.4vh auto 0;
}
.cifra .g{white-space:nowrap}
.cifra-sci{
  margin-top:1.8vh;color:var(--ink);letter-spacing:.04em;
  font-size:clamp(13px,1.48vw,26px);      /* el mismo que la cifra de arriba */
}
.cifra-sci sup{font-size:.6em}

/* ---------- átomo de hidrógeno ---------- */
#atom{display:block;margin:.6vh auto 0;width:min(52vh,520px);height:min(23vh,230px)}

/* ---------- números ---------- */
.numbox{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:2.2vh 2vw;max-width:min(1500px,100%);
  word-break:break-all;line-height:1.5;
}
.numbox.guia{border-color:rgba(127,212,255,.42);box-shadow:0 0 46px rgba(127,212,255,.10) inset}
.numbox.caja{border-color:rgba(245,174,14,.42);box-shadow:0 0 46px rgba(245,174,14,.10) inset}
.bignum{font-size:clamp(13px,1.42vw,25px);letter-spacing:.02em}
.numbox .g{white-space:nowrap}
.hugenum{font-size:clamp(46px,11vw,190px);font-family:var(--mono);font-weight:700;line-height:1;color:var(--gold)}

/* ---------- tragaperras del número pensado (escena 1) ---------- */
#s1-num{height:1em;overflow:hidden}
#s1-num .reel{display:block;will-change:transform}
#s1-num .reel i{display:block;height:1em;line-height:1;font-style:normal}
#s1-num.spinning .reel{filter:blur(1.2px)}
#s1-num.spinning{
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0),#000 28%,#000 72%,rgba(0,0,0,0));
  mask-image:linear-gradient(rgba(0,0,0,0),#000 28%,#000 72%,rgba(0,0,0,0));
}
#s1-num.landed{
  animation:slotglow .8s ease-out, slotpulse 3.4s ease-in-out .8s infinite;
  cursor:pointer;
}
@keyframes slotglow{
  0%{filter:drop-shadow(0 0 0 rgba(245,174,14,0))}
  22%{filter:drop-shadow(0 0 30px rgba(245,174,14,.80))}
  100%{filter:drop-shadow(0 0 7px rgba(245,174,14,.18))}
}
/* latente: respira despacio, sin distraer */
@keyframes slotpulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(245,174,14,.16));opacity:.80}
  50%    {filter:drop-shadow(0 0 26px rgba(245,174,14,.55));opacity:1}
}
#s1-num.landed:hover{opacity:1;filter:drop-shadow(0 0 34px rgba(245,174,14,.75));animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  #s1-num.landed{animation:none;filter:drop-shadow(0 0 10px rgba(245,174,14,.30))}
}
.g{color:var(--ink)}
.g:nth-child(odd){color:#cfcfcf}

.label{
  font-size:clamp(10px,.9vw,13px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:.9vh;display:block;font-weight:600;
}
.lead b{font-weight:700;color:inherit}
.hi{color:var(--gold);font-weight:700}
.guia-c{color:var(--ice)}
.rojo-c{color:var(--red)}
.caja-c{color:var(--gold)}
.pista{margin-top:3vh;color:var(--dim);font-size:clamp(13px,1.25vw,19px);line-height:1.7;letter-spacing:.01em}
.pista .solo-movil{display:none}
.tecla{display:inline-block;font-family:var(--mono);font-size:.86em;font-weight:600;color:var(--ink);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:.12em .5em;margin:0 .12em;
  background:rgba(255,255,255,.04)}
.orange-c{color:var(--orange)}

/* ---------- rotulillo de sección (mismo color y tamaño que las etiquetas del canvas) ---------- */
.rotulo{
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(150,150,150,.95);margin-top:2.6vh;
}

/* ---------- palabras ---------- */
.words{
  display:grid;gap:.7vh .8vw;margin:0 auto;
  grid-template-columns:repeat(6,minmax(0,1fr));max-width:min(1400px,100%);
}
.words.w24{grid-template-columns:repeat(8,minmax(0,1fr))}
.word{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:1.1vh .7vw;display:flex;align-items:baseline;gap:.5vw;justify-content:center;
  transition:border-color .25s,background .25s,transform .25s;
}
.word.hot{border-color:var(--ice);background:rgba(127,212,255,.10);transform:translateY(-2px)}
.word .n{font-family:var(--mono);font-size:clamp(9px,.78vw,13px);color:var(--dimmer)}
.word .t{font-family:var(--mono);font-size:clamp(13px,1.32vw,25px);font-weight:600;letter-spacing:.01em}
/* las palabras son <input>: de solo lectura se ven como texto; escribibles, con subrayado */
.words input.t{
  background:none;border:0;outline:none;width:100%;min-width:0;padding:0;
  font-family:var(--mono);font-size:clamp(12px,1.14vw,21px);font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-align:center;
}
.words input.t:not([readonly]){border-bottom:1px solid var(--line);color:var(--gold)}
.words input.t:not([readonly]):focus{border-bottom-color:var(--gold)}
.words.malo  .word{border-color:rgba(255,107,107,.5)}
.words.bueno .word{border-color:rgba(93,220,154,.45)}

/* ---------- bits ---------- */
.bits{
  font-family:var(--mono);font-size:clamp(9px,.82vw,15px);line-height:1.85;
  letter-spacing:.13em;word-break:break-all;max-width:min(1300px,100%);margin:0 auto;
  color:var(--dimmer);
}
.bits b{font-weight:400;padding:1px 2px;border-radius:3px;white-space:nowrap}
.bits b.a{color:#cbcbcb}
.bits b.b{color:#878787}
.bits b.sum{color:var(--orange);background:rgba(247,147,26,.12)}
.bits b.hot{color:#1d1d1d;background:var(--ice);font-weight:700}

/* ---------- tabla cajas fuerte ---------- */
.vault{
  display:grid;grid-template-columns:auto 1fr;gap:1.4vh 1.6vw;
  max-width:min(1560px,100%);text-align:left;margin:0 auto;align-items:center;
}
.vault .idx{
  font-family:var(--mono);font-size:clamp(14px,1.5vw,26px);color:var(--dimmer);
  white-space:nowrap;
}
.vault .idx b{color:var(--gold);font-weight:700}
.vrow{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.3vh 1.1vw;
  transition:border-color .25s,background .25s;
}
.vrow.hot{border-color:rgba(245,174,14,.55);background:rgba(245,174,14,.06)}
.vrow .k{
  font-family:var(--mono);font-size:clamp(10px,1.02vw,17px);color:var(--gold);
  line-height:1.45;font-variant-numeric:tabular-nums;
}
.vrow .k .g{white-space:nowrap}
.vrow .a{
  font-family:var(--mono);font-size:clamp(10px,.98vw,16px);color:var(--ice);
  margin-top:.55vh;word-break:break-all;
}
.vrow .meta{font-size:clamp(9px,.8vw,12px);color:var(--dimmer);margin-top:.45vh;letter-spacing:.04em}

/* ---------- viaje por el eje 0 → 2^256 ---------- */
.viaje{width:min(1500px,100%);margin:3vh auto 0}
.viaje canvas{display:block;width:100%;height:clamp(120px,15vh,168px)}
.marcador{margin-top:.8vh;font-family:var(--mono);text-align:center}
.marcador b{
  font-size:clamp(24px,2.8vw,50px);color:var(--gold);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.marcador span{font-size:clamp(19px,2.0vw,34px);color:var(--ink);margin-left:.5em}

/* ---------- subtítulo que se releva sin mover la maqueta ---------- */
.subt{position:relative;margin-top:1.4vh;width:100%}
.tit{position:relative;width:100%}
/* el <sup> no debe agrandar la caja de línea: si no, el texto en flujo mide
   distinto que los relevados y el relevo salta */
.lead sup{font-size:.62em;line-height:0;position:relative;top:-.5em}
/* el margen del título inflaba su contenedor y descolocaba el relevo */
.tit > h1, .tit > h2{margin-bottom:0}
.tit{margin-bottom:2vh}

/* Los relevos van superpuestos y centrados verticalmente en su hueco.
   Ojo: .step y .step.shown definen transform, asi que hay que ganarles
   especificidad o el centrado se pierde. */
.sobre{position:absolute;left:0;right:0;top:50%}
.step.sobre,
.step.shown.sobre{transform:translateY(-50%)}

/* ---------- sorteo: la ruleta y la caja comparten hueco ---------- */
.sorteo{
  position:relative;width:min(1440px,100%);
  height:clamp(240px,34vh,360px);margin:3vh auto 0;
}
.sorteo .capa{position:absolute;inset:0;width:100%;height:100%;display:block}
#mapa2{cursor:pointer}

/* ---------- escena 8: mapa+palabras y abanico comparten hueco ---------- */
.lienzo8{
  position:relative;width:min(1500px,100%);
  height:clamp(320px,47vh,510px);margin:1.8vh auto 0;
}
.lienzo8 .capa8{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- la caja que se vuelve sólida ---------- */
.caja3{width:min(760px,72vw);margin:.4vh auto 0}
.caja3 canvas{display:block;width:100%;height:clamp(290px,38vh,400px)}

/* ---------- escena final: los dos números ---------- */
.dosnum{display:flex;gap:2.4vw;justify-content:center;align-items:center;margin-top:2vh}
.dosnum .pieza{text-align:center}
.dosnum canvas{display:block;width:clamp(250px,26vw,430px);height:clamp(190px,23vh,270px)}
.dosnum .flecha2{
  font-size:clamp(30px,3.2vw,58px);color:var(--gold);line-height:1;
  text-shadow:0 0 22px rgba(245,174,14,.5);
}
.dosnum span{
  display:block;margin-top:.4vh;font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(150,150,150,.95);
}

/* ---------- flecha de "y esto se convierte en" ---------- */
.flechaabajo{
  font-size:clamp(26px,2.8vw,46px);line-height:1;color:var(--gold);
  margin:.4vh 0 0;text-shadow:0 0 20px rgba(245,174,14,.55);
  animation:botar 1.7s ease-in-out infinite;
}
@keyframes botar{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
.flechaabajo.arriba{animation-name:botarArriba}
@keyframes botarArriba{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}

/* ---------- abanico con direcciones ---------- */
.abanico2{width:min(1620px,100%);margin:2.4vh auto 0}
.abanico2 canvas{display:block;width:100%;height:clamp(330px,50vh,520px);cursor:pointer}

/* ---------- recta 2^256 ---------- */
.axis{
  position:relative;width:min(1500px,100%);height:15vh;margin:2vh auto 0;
}
.axis .line{
  position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,rgba(127,212,255,.25),rgba(245,174,14,.45));
}
.axis .end{
  position:absolute;top:calc(50% + 18px);font-family:var(--mono);font-size:clamp(10px,.85vw,13px);color:var(--dimmer);
}
.axis .end.l{left:0}.axis .end.r{right:0;text-align:right}
.dot{
  position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 16px rgba(245,174,14,.9);
  animation:caer .62s cubic-bezier(.25,1.05,.35,1) both;
}
.dot .t{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:clamp(9px,.78vw,12px);color:var(--gold);white-space:nowrap;
}
/* los puntos van cayendo sobre la recta, uno detrás de otro */
@keyframes caer{
  0%  {transform:translateY(-64px) scale(.45);opacity:0}
  55% {transform:translateY(0)     scale(1.3); opacity:1}
  75% {transform:translateY(-7px)  scale(.94)}
  100%{transform:translateY(0)     scale(1);   opacity:1}
}

/* ---------- cadena máscara ---------- */
.chain{display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:nowrap;max-width:96vw}
.node{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1.6vh 1.1vw;min-width:0;flex:1 1 0;text-align:left;
}
.node .nl{font-size:clamp(9px,.8vw,12px);letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);font-weight:600}
.node .nv{font-family:var(--mono);font-size:clamp(9px,.85vw,14px);word-break:break-all;margin-top:.6vh;line-height:1.4}
.node.secret{border-color:rgba(255,107,107,.45)}
.node.secret .nv{color:var(--red)}
.node.pub{border-color:rgba(127,212,255,.45)}
.node.pub .nv{color:var(--ice)}
.arrow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 .9vw;color:var(--dimmer);flex:0 0 auto;
}
.arrow .sym{font-size:clamp(16px,1.8vw,30px);color:var(--gold)}
.arrow .cap{font-size:clamp(8px,.72vw,11px);letter-spacing:.1em;text-transform:uppercase;margin-top:.3vh;white-space:nowrap}

/* ---------- escalas de tiempo ---------- */
.scales{display:flex;gap:1.4vw;justify-content:center;flex-wrap:wrap;max-width:min(1400px,100%);margin:0 auto}
.scale{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:2.2vh 1.6vw;min-width:min(300px,86vw);flex:1 1 280px;text-align:left;
}
.scale .st{font-size:clamp(11px,.95vw,14px);letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);font-weight:600}
.scale .sv{font-family:var(--mono);font-size:clamp(20px,2.3vw,40px);color:var(--gold);margin-top:1vh;line-height:1.1;font-weight:700}
.scale .su{font-size:clamp(11px,1vw,16px);color:var(--dim);margin-top:.7vh;line-height:1.4}

/* ---------- panel de control ---------- */
#ctl{
  position:fixed;z-index:20;right:0;top:0;bottom:0;width:min(430px,94vw);
  background:rgba(22,22,22,.97);border-left:1px solid var(--line);
  padding:22px 22px 30px;overflow-y:auto;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  font-size:13px;
}
#ctl.open{transform:none}
#ctl h3{margin:0 0 14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);margin-bottom:6px;font-weight:600}
.fld input,.fld select,.fld textarea{
  width:100%;background:#151515;border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:9px 11px;font-family:var(--mono);font-size:12px;
}
.fld textarea{resize:vertical;min-height:66px;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold)}
.btnrow{display:flex;gap:7px;flex-wrap:wrap}
button{
  background:#2d2d2d;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 13px;font-size:12px;cursor:pointer;font-family:var(--sans);
  transition:border-color .18s,background .18s;
}
button:hover{border-color:var(--gold);background:#393939}
button.p{background:var(--gold);color:#1d1d1d;border-color:var(--gold);font-weight:700}
button.p:hover{background:#ffc23a}
.hr{height:1px;background:var(--line);margin:20px 0}
.klist{font-size:11px;color:var(--dimmer);line-height:2}
.klist kbd{
  font-family:var(--mono);background:#2d2d2d;border:1px solid var(--line);
  border-radius:5px;padding:2px 7px;color:var(--ink);font-size:10px;margin-right:8px;
}

/* ---------- pie ---------- */
#chrome{position:fixed;z-index:15;inset:auto 0 0 0;pointer-events:none;transition:opacity .3s}
#chrome.hidden{opacity:0}
#foot{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 26px;font-size:11px;color:var(--dimmer);letter-spacing:.16em;text-transform:uppercase;
}
/* centrado real: con space-between quedaba descentrado porque los laterales
   no miden lo mismo */
#dots{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:7px;pointer-events:auto;
}
#dots i{
  width:7px;height:7px;border-radius:50%;background:#444444;cursor:pointer;display:block;
  transition:background .2s,transform .2s;
}
#dots i.on{background:var(--gold);transform:scale(1.45)}
#brand{position:fixed;z-index:15;top:22px;left:28px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dimmer);transition:opacity .3s}
#brand b{color:var(--gold);font-weight:700}
#brand.hidden{opacity:0}
#cog{
  position:fixed;z-index:21;top:18px;right:18px;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:15px;opacity:.35;transition:opacity .2s;
}
#cog:hover{opacity:1}
#logo{
  position:fixed;z-index:15;left:50%;bottom:78px;transform:translateX(-50%);
  font-family:'Brandon Grotesque','BrandonGrotesque-Bold',var(--sans);
  font-weight:700;font-size:clamp(15px,1.5vw,24px);letter-spacing:.10em;
  color:#ffffff;opacity:1;transition:opacity .3s;pointer-events:none;
}
#logo.hidden{opacity:0}
#warn{
  position:fixed;z-index:16;bottom:44px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#5b5b5b;transition:opacity .3s;
}
#warn.hidden{opacity:0}


/* ============================ móvil / táctil ============================ */
@media (max-width:720px){
  .scene{padding:4vh 6vw 9vh}
  h1{font-size:clamp(20px,5.6vw,40px);overflow-wrap:break-word}   /* títulos que no se salen */
  .lead{font-size:clamp(14px,3.9vw,20px);max-width:90vw}   /* subtítulos que envuelven al ancho */
  #foot{justify-content:center;min-height:34px;padding:12px 14px}
  #foot > div:not(#dots){display:none}     /* oculta nombre de escena y el texto de teclado */
  #dots{gap:10px}
  #dots i{width:9px;height:9px}
  #warn{display:none}                       /* el disclaimer estorba en el pie del móvil */
  #logo{bottom:56px;font-size:16px}
  #brand{top:16px;left:16px;font-size:10px;letter-spacing:.22em}
  #cog{top:12px;right:12px}
  .pista .solo-pc{display:none}
  .pista .solo-movil{display:inline}
  /* palabras: menos columnas para que no se corten */
  .words{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7vh 1.6vw;width:100%;max-width:100%}
  .words.w24{grid-template-columns:repeat(3,minmax(0,1fr))}
  .word{overflow:hidden}
  .word{padding:.8vh 1vw;gap:.4vw}
  .word .n{font-size:8px}
  .word .t,.words input.t{font-size:clamp(10px,2.9vw,15px)}
  /* lienzos que usaban vh y se salían del ancho en móvil */
  #atom{width:min(90vw,520px)}
  #hacker{width:min(82vw,500px)}
  #semilla{width:min(88vw,640px)}
  .lienzo8{height:50vh}
  .abanico2 canvas{height:56vh}
  /* "Dos números": apilar en vertical */
  .dosnum{flex-direction:column;gap:.6vh;margin-top:1vh}
  .dosnum canvas{width:min(52vw,220px);height:clamp(108px,14vh,150px)}
  .dosnum span{font-size:11px;margin-top:.2vh}
  .dosnum .flecha2{transform:rotate(90deg);font-size:26px}
  /* la cifra gigante que cabe y envuelve */
  .cifra{font-size:clamp(11px,3.1vw,26px);max-width:94vw}
  .cifra-sci{font-size:clamp(12px,3.4vw,26px)}
}