/* ═════════════════════════════════════════════════════════════════
   LA TORRE · el hueco de la escalera
   ─────────────────────────────────────────────────────────────────
   Escena propia: piedra fría de noche, un pozo vertical y una sola
   lámpara. Solo se ven tres o cuatro rellanos porque más lejos no
   llega la luz; lo demás es negro. La cámara sube contigo.

   Truco de una pieza, igual que en minas: la página crea cada
   `.puerta` como un div pelado y le reescribe el textContent (🚪 ✅ 💀).
   Aquí el texto se apaga (font-size:0) y TODO el arco se dibuja con
   pseudo-elementos, que el textContent no borra:
     .puerta         → el vano: oscuridad detrás del arco
     .puerta::before → la dovela de piedra y el suelo del umbral
     .puerta::after  → lo que se descubre: paso firme, o el vacío
   Por eso el JS de la página no necesita ni una línea nueva.
   ════════════════════════════════════════════════════════════════ */

body.escena-torre{
  --tr-piedra:#3b3b47;          /* granito azulado */
  --tr-piedra-alta:#5d5d70;
  --tr-piedra-baja:#191922;
  --tr-junta:#0d0d13;
  --tr-vacio:#04040a;           /* el hueco sin suelo */
  --tr-luz:#dfa04c;             /* la lámpara de aceite */
  --tr-luna:#93a4c9;            /* claridad que baja de la claraboya */
  --tr-musgo:#5c6a52;
}

/* ── la noche fuera de la torre ─────────────────────────────────── */
body.escena-torre .escena-fondo{
  opacity:1;
  background:
    /* claridad lejana, muy arriba: la salida */
    radial-gradient(ellipse 60% 30% at 50% -6%, rgba(147,164,201,.13), transparent 62%),
    /* el pozo se cierra en negro hacia abajo */
    radial-gradient(ellipse 120% 85% at 50% 116%, rgba(0,0,0,.95), transparent 56%),
    linear-gradient(180deg,#0b0d14 0%,#080910 44%,#040407 100%);
}
/* hiladas de sillería que se pierden en la penumbra */
body.escena-torre .escena-fondo::after{
  content:'';position:absolute;inset:0;opacity:.5;
  background:
    repeating-linear-gradient(0deg,
      rgba(190,205,235,.022) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0 2px, transparent 2px 74px);
}

/* la página ya oculta cabecera y panel compartidos; por si acaso */
body.escena-torre #j-torre .cabecera-juego,
body.escena-torre #j-torre > .sub{display:none}

/* ── encaje: entra entero, nunca hay barra ──────────────────────── */
#j-torre{position:relative;z-index:2}
body.escena-torre #j-torre{
  height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  padding:44px 12px 12px}

/* ═════ EL POZO ═════════════════════════════════════════════════ */
.tr-pozo{
  position:relative;overflow:hidden;
  width:min(432px,100%);
  height:clamp(206px,48vh,336px);
  border-radius:14px 14px 6px 6px;
  background:
    /* muro del fondo, iluminado desde el centro */
    radial-gradient(ellipse 78% 46% at 50% 56%, #23232e 0%, #14141c 52%, #08080d 100%);
  box-shadow:
    inset 0 0 0 1px #2a2a35,
    inset 0 0 44px rgba(0,0,0,.9),
    0 24px 56px rgba(0,0,0,.7);
}
/* sillería del muro del fondo */
.tr-pozo::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 25px, rgba(0,0,0,.5) 25px 27px),
    repeating-linear-gradient(90deg,
      transparent 0 52px, rgba(0,0,0,.42) 52px 54px);
}
/* la barandilla del hueco, en primer plano y desenfocada por cercanía */
.tr-pozo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:16px;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
}

/* la cámara: lo único que se mueve al subir */
.tr-camara{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  transform:translate3d(0,0,0);will-change:transform;
  /* subir cuesta: sale despacio y se asienta al llegar */
  transition:transform .62s cubic-bezier(.33,.86,.32,1)}
/* caer no cuesta nada: acelera y no se asienta */
.tr-pozo.tr-cae .tr-camara{transition:transform .74s cubic-bezier(.62,0,.92,.36)}

/* ── arriba del todo: la salida al aire libre ───────────────────── */
.tr-cima{position:relative;height:120px;display:grid;place-items:center;gap:8px;
  align-content:center}
.tr-claraboya{
  width:132px;height:44px;border-radius:66px 66px 5px 5px;
  background:linear-gradient(180deg, rgba(147,164,201,.5), rgba(147,164,201,.06) 78%, transparent);
  box-shadow:inset 0 -1px 0 rgba(147,164,201,.25)}
.tr-cima-txt{
  font-family:var(--mono);font-size:9px;letter-spacing:.34em;color:#7c88a6}

/* ── abajo del todo: el zaguán por donde entraste ───────────────── */
.tr-base{position:relative;height:104px;display:grid;place-items:start center;padding-top:12px}
.tr-portal{
  width:74px;height:82px;border-radius:37px 37px 3px 3px;
  background:linear-gradient(180deg,#05050a,#01010400);
  box-shadow:inset 0 0 0 2px #262631, 0 -1px 0 #3a3a47}

/* ── la lámpara: la luz va con el que sube ──────────────────────── */
.tr-lampara{
  position:absolute;left:50%;top:0;width:340px;height:250px;margin:-125px 0 0 -170px;
  pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(223,160,76,.20) 0%, rgba(223,160,76,.09) 34%, transparent 70%);
  transition:top .62s cubic-bezier(.33,.86,.32,1)}

/* ── bruma: fuera del alcance de la lámpara no hay nada ─────────── */
.tr-bruma{position:absolute;left:0;right:0;height:34%;pointer-events:none}
.tr-bruma-alta{top:0;background:linear-gradient(180deg,#04040a 4%,rgba(4,4,10,0))}
.tr-bruma-baja{bottom:0;background:linear-gradient(0deg,#04040a 10%,rgba(4,4,10,0))}

/* ═════ LOS RELLANOS ════════════════════════════════════════════ */
#j-torre #torre{
  display:flex;flex-direction:column-reverse;gap:12px;
  max-width:none;width:100%;margin:0;padding:0 14px}

#j-torre .piso{
  position:relative;
  display:grid;grid-template-columns:22px repeat(3,1fr) 44px;
  gap:9px;align-items:end;height:62px;
  /* la luz cae por distancia: --d lo pone el módulo */
  opacity:max(.1, calc(1 - var(--tr-d,4) * .27));
  transition:opacity .5s ease}
/* el suelo del rellano: una losa que cruza bajo los tres arcos */
#j-torre .piso::after{
  content:'';position:absolute;left:20px;right:42px;bottom:-6px;height:6px;
  background:linear-gradient(180deg,#4a4a58,#22222c 62%,#101017);
  box-shadow:0 1px 0 rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06)}
/* el número, grabado en el machón */
#j-torre .piso .num{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:10px;color:#6e6e83;text-align:right;padding-bottom:4px;
  text-shadow:0 1px 0 rgba(0,0,0,.9)}
/* el pago, escrito con tiza al lado de la escalera */
#j-torre .piso .tr-mult{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:10px;color:#8a7a5c;padding-bottom:4px;letter-spacing:.02em}

/* rellano donde estás: la losa se ve entera y la tiza se aviva */
#j-torre .piso.activo{opacity:1}
#j-torre .piso.activo::after{
  background:linear-gradient(180deg,#6b6252,#332e26 62%,#15130f)}
#j-torre .piso.activo .num{color:#c8b48d}
#j-torre .piso.activo .tr-mult{color:var(--tr-luz)}

/* ── el arco ────────────────────────────────────────────────────── */
#j-torre .puerta{
  position:relative;height:52px;width:100%;
  font-size:0;color:transparent;                 /* el emoji de la página, apagado */
  background:none;border:none;box-shadow:none;border-radius:0;
  cursor:default;transition:none;overflow:visible}
/* el vano: dovelas de piedra alrededor de un hueco negro */
#j-torre .puerta::before{
  content:'';position:absolute;inset:0;
  border-radius:50% 50% 2px 2px / 62% 62% 2px 2px;
  background:linear-gradient(180deg,#0a0a11 0%,#06060c 55%,#020206 100%);
  box-shadow:
    inset 0 0 0 3px var(--tr-piedra),
    inset 0 0 0 4px var(--tr-junta),
    inset 0 8px 14px rgba(0,0,0,.9);
  transition:box-shadow .22s ease, background .3s ease}
/* lo que hay detrás: nada, hasta que se cruza */
#j-torre .puerta::after{
  content:'';position:absolute;left:9px;right:9px;bottom:0;height:0;
  background:linear-gradient(180deg, rgba(223,160,76,.22), rgba(223,160,76,.02));
  transition:height .3s ease}

/* solo el rellano activo se puede cruzar */
#j-torre .piso.activo .puerta{cursor:pointer}
#j-torre .piso.activo .puerta:hover::before{
  box-shadow:
    inset 0 0 0 3px var(--tr-piedra-alta),
    inset 0 0 0 4px var(--tr-junta),
    inset 0 8px 14px rgba(0,0,0,.75)}
#j-torre .piso.activo .puerta:active::before{transform:translateY(1px)}

/* ── cruzado: había suelo ───────────────────────────────────────── */
#j-torre .puerta.ok::before{
  background:linear-gradient(180deg,#161520 0%,#241f18 60%,#2c2418 100%);
  box-shadow:
    inset 0 0 0 3px #6b6252,
    inset 0 0 0 4px var(--tr-junta),
    inset 0 -6px 12px rgba(223,160,76,.14)}
#j-torre .puerta.ok::after{height:7px}

/* ── vacío: detrás de este arco no había nada ───────────────────── */
#j-torre .puerta.mal::before{
  background:linear-gradient(180deg,#08080e 0%,var(--tr-vacio) 40%,#000 100%);
  box-shadow:
    inset 0 0 0 3px #4a2a26,
    inset 0 0 0 4px #120808,
    inset 0 -14px 22px rgba(0,0,0,1);
  animation:tr-abrirse .5s ease-out both}
/* la losa se rompe justo bajo ese arco */
#j-torre .puerta.mal::after{
  height:0;left:2px;right:2px;bottom:-6px;
  border-top:6px solid #04040a;
  animation:tr-romper .55s ease-in both}
@keyframes tr-abrirse{
  0%  {transform:translateY(-3px);filter:brightness(1.6)}
  22% {transform:translateY(0);filter:brightness(1)}
  100%{transform:translateY(0);filter:brightness(1)}
}
@keyframes tr-romper{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(26px) rotate(6deg);opacity:0}
}

/* la caída: el pozo entero se sacude y la luz se apaga */
.tr-pozo.tr-cae{animation:tr-sacudir .5s cubic-bezier(.36,.07,.19,.97) both}
.tr-pozo.tr-cae .tr-lampara{opacity:0;transition:opacity .5s ease}
@keyframes tr-sacudir{
  0%,100%{transform:translate3d(0,0,0)}
  18%{transform:translate3d(-4px,3px,0)}
  38%{transform:translate3d(5px,-2px,0)}
  62%{transform:translate3d(-3px,4px,0)}
  84%{transform:translate3d(2px,-1px,0)}
}

/* ── placa grabada en el muro ───────────────────────────────────── */
.tr-placa{
  position:absolute;left:10px;right:10px;top:8px;
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 11px;border-radius:4px;
  background:linear-gradient(180deg,rgba(24,24,32,.9),rgba(10,10,16,.9));
  box-shadow:inset 0 0 0 1px #2c2c38, 0 2px 8px rgba(0,0,0,.6)}
.tr-lectura{display:flex;flex-direction:column;gap:2px}
.tr-lectura-der{align-items:flex-end}
.tr-lab{font-family:var(--mono);font-size:8px;letter-spacing:.26em;color:#5f5f74}
.tr-cifra{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:14px;color:#9a9ab0;line-height:1;transition:color .3s ease}
.tr-cifra i{font-style:normal;font-size:9px;color:#55556a}
.tr-cifra.tr-vivo{color:var(--tr-luz)}

/* ═════ EL REPECHO (los mandos) ══════════════════════════════════ */
.tr-repecho{
  width:min(432px,100%);
  padding:10px 14px 12px;border-radius:6px 6px 12px 12px;
  background:linear-gradient(180deg,#20202a 0%,#171720 46%,#101017 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 8px rgba(0,0,0,.8),
    0 16px 34px rgba(0,0,0,.6)}

.tr-ofrenda{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#j-torre .tr-ofrenda .apuesta{margin:0;display:flex;gap:6px;flex:1}
#j-torre .tr-ofrenda .chip{
  flex:1;text-align:center;border-radius:3px;
  background:#0c0c12;border:1px solid #2c2c38;color:#7c7c92;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:11px;padding:5px 6px;cursor:pointer;transition:none}
#j-torre .tr-ofrenda .chip.on{
  background:#1d1a14;border-color:#6b6252;color:var(--tr-luz)}

.tr-gestos{display:flex;gap:9px;margin-top:9px}
.tr-btn{
  flex:1;padding:9px 12px;border-radius:4px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;font-weight:700;
  border:1px solid transparent;-webkit-tap-highlight-color:transparent}
.tr-subir{
  background:linear-gradient(180deg,#4a4658,#2e2c3c);border-color:#615d75;color:#d9d5e6;
  box-shadow:0 3px 0 #1b1a24, 0 6px 12px rgba(0,0,0,.5)}
.tr-bajar{
  background:linear-gradient(180deg,#c08e3f,#8a5f22);border-color:#d7a95a;color:#1a1206;
  box-shadow:0 3px 0 #4c3410, 0 6px 12px rgba(0,0,0,.5)}
.tr-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.tr-btn:disabled{cursor:default;filter:grayscale(.75) brightness(.55)}

/* ── el parte ───────────────────────────────────────────────────── */
#j-torre .res{
  margin:9px 0 0;min-height:30px;text-align:center;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
#j-torre .res .small{font-size:11px;color:#7a7a90;margin-top:2px}

/* ── alturas cortas: Discord da 543 px y todo tiene que caber ───── */
@media(max-height:620px){
  body.escena-torre #j-torre{padding:38px 10px 8px;gap:8px}
  .tr-pozo{height:clamp(184px,44vh,250px)}
  #j-torre #torre{gap:9px}
  #j-torre .piso{height:54px}
  #j-torre .puerta{height:46px}
  .tr-cima{height:96px}
  .tr-base{height:84px}
  .tr-repecho{padding:8px 11px 9px}
  .tr-gestos{margin-top:7px}
  .tr-btn{padding:7px 10px;font-size:10px}
  #j-torre .res{min-height:24px;font-size:12px;margin-top:6px}
}
@media(max-height:470px){
  .tr-placa{display:none}
  .tr-pozo{height:clamp(160px,42vh,210px)}
  #j-torre .piso{height:48px}
  #j-torre .puerta{height:41px}
}
@media(max-width:430px){
  .tr-lab{letter-spacing:.16em}
  #j-torre .piso{grid-template-columns:18px repeat(3,1fr) 40px;gap:7px}
}

@media(prefers-reduced-motion:reduce){
  .tr-camara,.tr-lampara{transition:none}
  .tr-pozo.tr-cae{animation:none}
  #j-torre .puerta.mal::before,#j-torre .puerta.mal::after{animation-duration:.01ms}
}