/* ═════════════════════════════════════════════════════════════════
   MULTIPLICADOR · consola de vuelo
   ─────────────────────────────────────────────────────────────────
   Escena propia: una cabina fría a gran altura. Metal gris azulado,
   luz de instrumento, cero calidez. La chapa tiembla más cuanto más
   sube la lectura (variables --mx-tx / --mx-ty / --mx-rot desde el JS).
   Sin degradados sobre texto, sin resplandores, sin cristal esmerilado.
   ════════════════════════════════════════════════════════════════ */

/* ── el cielo de fuera ──────────────────────────────────────────── */
body.escena-multiplicador{
  --mx-luz:#7ec8dd;          /* luz de instrumento, frío */
  --mx-chapa:#171b21;
  --mx-chapa-alta:#232932;
  --mx-borde:#2e3641;
  --mx-tinta:#8fa0ae;
  --mx-alarma:#e0563f;
}
body.escena-multiplicador .escena-fondo{
  opacity:1;
  background:
    /* halo pálido del sol a mucha altura */
    radial-gradient(ellipse 60% 34% at 50% 96%, rgba(126,200,221,.13), transparent 68%),
    /* estratosfera: negro arriba, azul frío abajo */
    linear-gradient(180deg,#030406 0%, #05080d 34%, #0a1119 68%, #0e1822 100%);
}
/* capas de nube muy lejanas, quietas: dan escala sin distraer */
body.escena-multiplicador .escena-fondo::after{
  content:'';position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(180deg,transparent 0 78%, rgba(150,190,210,.05) 78% 79%, transparent 79%),
    linear-gradient(180deg,transparent 0 86%, rgba(150,190,210,.04) 86% 86.6%, transparent 87%),
    linear-gradient(180deg,transparent 0 92%, rgba(150,190,210,.035) 92% 92.5%, transparent 93%);
}
body.escena-multiplicador #j-multiplicador .cabecera-juego,
body.escena-multiplicador #j-multiplicador > .sub{display:none}

/* ── encaje: todo cabe, nunca hay barra ─────────────────────────── */
#j-multiplicador{position:relative;z-index:2}
body.escena-multiplicador #j-multiplicador{
  height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:52px 12px 12px}

.mx-cabina{
  width:min(690px,100%);max-height:100%;
  display:flex;flex-direction:column;gap:10px;
  transform:translate3d(var(--mx-tx,0px),var(--mx-ty,0px),0) rotate(var(--mx-rot,0deg));
  will-change:transform}

/* ── el visor ───────────────────────────────────────────────────── */
.mx-visor{
  position:relative;flex:1 1 auto;min-height:150px;overflow:hidden;
  border-radius:14px 14px 4px 4px;
  background:#04070b;
  border:1px solid var(--mx-borde);
  box-shadow:
    inset 0 0 0 5px #10141a,
    inset 0 8px 22px rgba(0,0,0,.9),
    0 24px 54px rgba(0,0,0,.72)}
.mx-visor #cvMult{position:absolute;inset:0;display:block;width:100%;height:100%;
  border:none;border-radius:0;background:none}

/* montantes: barras de metal que cruzan el cristal */
.mx-montante{position:absolute;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,#0d1116,#2b333d 42%,#151a20);
  border-left:1px solid #333c47;border-right:1px solid #0b0e12}
.mx-m-izq{left:16%}
.mx-m-der{right:16%}

/* lectura de altura */
.mx-lectura{position:absolute;left:0;right:0;top:14px;text-align:center;pointer-events:none}
#j-multiplicador .multActual{
  margin:2px 0 0;font-family:var(--mono);font-size:46px;font-weight:600;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:#cfe6ee}
.mx-lab{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.32em;
  color:var(--mx-tinta);text-transform:uppercase}

/* lámparas de aviso */
.mx-avisos{position:absolute;left:14px;bottom:12px;display:flex;flex-direction:column;gap:5px}
.mx-lamp{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  padding:2px 6px;border-radius:2px;
  background:#0a0e13;border:1px solid #1d232b;color:#39424d}
.mx-cabina[data-nivel="1"] .mx-lamp[data-n="1"],
.mx-cabina[data-nivel="2"] .mx-lamp[data-n="1"],
.mx-cabina[data-nivel="2"] .mx-lamp[data-n="2"],
.mx-cabina[data-nivel="3"] .mx-lamp[data-n="1"],
.mx-cabina[data-nivel="3"] .mx-lamp[data-n="2"]{
  background:#13212a;border-color:#2d4d5c;color:var(--mx-luz)}
.mx-cabina[data-nivel="3"] .mx-lamp[data-n="3"]{
  background:#2a1310;border-color:#6b2b1f;color:#f08a72}

.mx-placa{position:absolute;right:12px;bottom:10px;
  font-family:var(--mono);font-size:8px;letter-spacing:.22em;color:#2f3944}

/* ── la chapa de mandos ─────────────────────────────────────────── */
.mx-consola{
  flex:0 0 auto;padding:12px 14px 10px;border-radius:4px 4px 14px 14px;
  background:linear-gradient(180deg,var(--mx-chapa-alta) 0%, var(--mx-chapa) 40%, #12161b 100%);
  border:1px solid var(--mx-borde);border-top:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px rgba(0,0,0,.6)}

.mx-fila{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap}
.mx-mod{flex:1 1 auto}
.mx-mod .mx-lab{margin-bottom:5px}
.mx-mod-auto{flex:0 0 auto}

#j-multiplicador .apuesta{display:flex;gap:5px;margin:0}
#j-multiplicador .chip{
  cursor:pointer;padding:6px 11px;border-radius:3px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums;
  background:#0d1116;border:1px solid #262f39;color:#68757f}
#j-multiplicador .chip.on{
  background:#12222a;border-color:#3d6b7c;color:var(--mx-luz)}

#j-multiplicador .autoRet{display:flex;align-items:center;gap:6px;margin:0}
#j-multiplicador .autoRet input{
  width:66px;height:30px;padding:0 6px;border-radius:3px;text-align:center;
  font-family:var(--mono);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
  background:#080b0f;border:1px solid #262f39;color:#cfe6ee}
#j-multiplicador .autoRet input:focus{outline:none;border-color:#3d6b7c}
#j-multiplicador .mx-x{font-family:var(--mono);font-size:12px;color:var(--mx-tinta)}
#j-multiplicador .mini{
  height:30px;padding:0 11px;border-radius:3px;cursor:pointer;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  background:#0d1116;border:1px solid #262f39;color:#68757f}
#j-multiplicador .mini.on{background:#12222a;border-color:#3d6b7c;color:var(--mx-luz)}

/* ── los dos mandos: uno se empuja, el otro se golpea ───────────── */
.mx-mandos{display:flex;gap:10px;margin:12px 0 10px}
.mx-btn{
  flex:1 1 0;height:46px;border-radius:4px;cursor:pointer;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.24em;
  transition:transform .09s var(--sal,ease), box-shadow .09s var(--sal,ease)}
.mx-lanzar{
  background:#1d2c34;border:1px solid #3d6b7c;color:#cfe6ee;
  box-shadow:0 3px 0 #0d181d, inset 0 1px 0 rgba(255,255,255,.06)}
.mx-lanzar:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 #0d181d}
.mx-lanzar:disabled{cursor:default;opacity:.4;box-shadow:0 3px 0 #0d181d}

/* palanca de eyección: roja, con rayado de peligro en el canto */
.mx-eyectar{
  position:relative;overflow:hidden;
  background:#8c2b1c;border:1px solid #c65a44;color:#ffe8e2;
  box-shadow:0 3px 0 #3f120a, inset 0 1px 0 rgba(255,255,255,.14)}
.mx-eyectar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:repeating-linear-gradient(45deg,#2b0d07 0 6px, #d9b23a 6px 12px);
  opacity:.55}
.mx-eyectar:active{transform:translateY(3px);box-shadow:0 0 0 #3f120a}

/* ── registro de vuelo: tira de papel de la caja negra ──────────── */
.mx-mod-reg{margin-bottom:8px}
#j-multiplicador .historial{
  display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;justify-content:flex-start;
  margin:0;min-height:22px;padding:3px 0}
#j-multiplicador .ronda{
  flex:0 0 auto;padding:2px 7px;border-radius:2px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  font-variant-numeric:tabular-nums;
  background:#0d1116;border:1px solid #202832;color:#5a6672}
#j-multiplicador .ronda.baja{color:#c8705c;border-color:#3d221c}
#j-multiplicador .ronda.media{color:#7fb59a;border-color:#22362e}
#j-multiplicador .ronda.alta{color:var(--mx-luz);border-color:#2d4d5c;background:#101d24}

#j-multiplicador .res{margin:0;min-height:38px;text-align:center;
  font-variant-numeric:tabular-nums}
#j-multiplicador .res .big{font-family:var(--mono);font-size:15px;letter-spacing:.14em}
#j-multiplicador .res .small{font-family:var(--mono);font-size:11px;color:var(--mx-tinta)}

/* ── alturas cortas (Discord da 543px) ──────────────────────────── */
@media(max-height:620px){
  body.escena-multiplicador #j-multiplicador{padding:46px 10px 8px}
  .mx-cabina{gap:8px}
  .mx-visor{min-height:118px}
  #j-multiplicador .multActual{font-size:34px}
  .mx-lectura{top:9px}
  .mx-consola{padding:9px 11px 7px}
  .mx-mandos{height:40px;margin:9px 0 8px}
  .mx-btn{height:40px;font-size:12px}
  .mx-mod-reg{margin-bottom:6px}
  #j-multiplicador .res{min-height:30px}
  .mx-avisos{flex-direction:row;bottom:8px}
}
@media(max-width:560px){
  .mx-fila{gap:9px}
  .mx-mod-auto{flex:1 1 100%}
  #j-multiplicador .autoRet{justify-content:flex-start}
  .mx-m-izq{left:10%}
  .mx-m-der{right:10%}
  .mx-placa{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mx-cabina{transform:none}
}