/* ═════════════════════════════════════════════════════════════════
   TRAGAMONEDAS · escena propia
   El juego se queda con la pantalla entera. No comparte fondo, ni
   panel, ni borde con ningún otro: por eso deja de parecer lo mismo.

   Revisión: la máquina estaba bien, el TALLER no existía. Ahora la
   máquina se apoya en un suelo y escupe a una bandeja de monedas,
   que es donde se lee el resultado. Además:
     · la palanca ya no se sale de la pantalla (tiene su hueco),
     · la tabla de pagos se lee (9,5 px era decorado, no información),
     · las reglas viven DENTRO de la máquina, porque en escena el
       subtítulo del panel compartido está oculto y nadie las veía,
     · hay foco visible: sobre chapa negra no se veía dónde estabas.
   ════════════════════════════════════════════════════════════════ */

/* ── el taller ──────────────────────────────────────────────────── */
body.escena-tragamonedas{
  --maq:#c9762b;              /* latón caliente de la máquina */
  --maq-tx:#e8a25c;           /* el mismo latón, ya legible como texto */
  --chapa:#16161a;
}
body.escena-tragamonedas .escena-fondo{
  opacity:1;
  background:
    /* luz cenital sobre la máquina */
    radial-gradient(ellipse 52% 40% at 50% 6%, rgba(255,186,90,.16), transparent 62%),
    /* el suelo del taller, donde se apoya el mueble */
    linear-gradient(180deg, transparent 0 66%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.8) 100%),
    /* penumbra */
    radial-gradient(ellipse 120% 90% at 50% 120%, rgba(0,0,0,.9), transparent 60%),
    linear-gradient(180deg, #100c09 0%, #0a0809 46%, #060506 100%);
}
/* pared de tablones detrás */
body.escena-tragamonedas .escena-fondo::after{
  content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.014) 0 2px, transparent 2px 58px);
}

/* ── el hueco de la palanca ─────────────────────────────────────
   Antes la palanca vivía en right:-34px, fuera del mueble: en una
   ventana estrecha se salía por el borde y se cortaba. Ahora el
   taller le reserva su carril y la máquina se centra con ella. */
#p-tragamonedas .taller{
  width:min(600px,100%);margin:0 auto;padding:0 40px 0 0;
  display:flex;flex-direction:column;align-items:stretch}

/* ── el mueble ──────────────────────────────────────────────────── */
#p-tragamonedas .mueble{
  position:relative;width:100%;margin:0 auto;
  border-radius:18px 18px 8px 8px;padding:16px 16px 13px;
  background:linear-gradient(180deg,#26262e 0%,#1a1a20 34%,#141419 100%);
  border:1px solid #34343f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -2px 8px rgba(0,0,0,.7),
    0 26px 60px rgba(0,0,0,.75);
}
/* remaches del chasis */
#p-tragamonedas .mueble::before,
#p-tragamonedas .mueble::after{
  content:'';position:absolute;top:10px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #6b6b7a, #2a2a33 70%);
}
#p-tragamonedas .mueble::before{left:10px}
#p-tragamonedas .mueble::after{right:10px}

/* rótulo superior */
#p-tragamonedas .rotulo{
  text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  color:var(--maq-tx);padding-bottom:11px;text-transform:uppercase}

/* ── la ventana de los rodillos ─────────────────────────────────── */
#p-tragamonedas .ventana{
  position:relative;border-radius:8px;overflow:hidden;
  background:#08080a;
  border:1px solid #000;
  box-shadow:inset 0 0 0 3px #2c2c36, inset 0 6px 18px rgba(0,0,0,.95);
}
/* aspect-ratio evita el salto de maquetación del primer fotograma,
   antes de que el JS mida y fije la altura de verdad */
#p-tragamonedas #tgCanvas{display:block;width:100%;aspect-ratio:100/62}

/* ── la palanca ─────────────────────────────────────────────────── */
#p-tragamonedas .palanca{
  position:absolute;right:-32px;top:54px;width:26px;height:150px;
  cursor:pointer;border:none;background:none;padding:0;
  -webkit-tap-highlight-color:transparent}
#p-tragamonedas .palanca::before{      /* cuna atornillada al chasis */
  content:'';position:absolute;left:0;top:52px;width:22px;height:34px;
  border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,#2e2e38,#1a1a20);
  border:1px solid #3d3d49;border-left:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#p-tragamonedas .palanca .eje{
  position:absolute;left:17px;top:24px;width:6px;height:112px;border-radius:3px;
  background:linear-gradient(90deg,#4a4a56,#8a8a9a 42%,#3a3a44);
  transform-origin:50% 100%;transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
#p-tragamonedas .palanca .bola{
  position:absolute;left:6px;top:0;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ff9d5c, #b04a18 62%, #5e2409);
  box-shadow:0 3px 10px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
#p-tragamonedas .palanca.tirada .bola{transform:translateY(66px)}
#p-tragamonedas .palanca.tirada .eje{transform:scaleY(.42)}
#p-tragamonedas .palanca:disabled{cursor:default;opacity:.55}

/* ── reglas y tabla de pagos, impresas en la chapa ──────────────── */
#p-tragamonedas .reglas{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:#9a9aa6;text-transform:uppercase;font-variant-numeric:tabular-nums}
#p-tragamonedas .reglas b{color:var(--maq-tx);font-weight:600}
#p-tragamonedas .reglas i{color:#4a4a56;font-style:normal}

#p-tragamonedas .pagos{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:7px;
  background:#2a2a33;border:1px solid #2a2a33;border-radius:5px;overflow:hidden}
#p-tragamonedas .pg{background:#101014;padding:6px 2px;text-align:center}
#p-tragamonedas .pg .s{font-size:16px;line-height:1.1}
/* 9,5 px con este contraste era adorno. 11 px y el latón claro sí se lee. */
#p-tragamonedas .pg .x{
  font-family:var(--mono);font-size:11px;color:var(--maq-tx);margin-top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ── mandos ─────────────────────────────────────────────────────── */
#p-tragamonedas .mandos{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:11px;border-top:1px solid #2a2a33;flex-wrap:wrap}
#p-tragamonedas .apuesta{margin:0;gap:6px}
#p-tragamonedas .apuesta .lab{color:#8d8d99}
#p-tragamonedas .chip{
  min-width:48px;height:31px;border-radius:4px;
  background:#0e0e12;border:1px solid #33333e;color:#a6a6b2;
  font-family:var(--mono);font-size:12px;padding:0 9px}
#p-tragamonedas .chip:hover{background:#17171d;color:#d8d8e0;border-color:#4a4a58}
#p-tragamonedas .chip.on{
  background:rgba(201,118,43,.18);border-color:var(--maq);color:#f5b877}
#p-tragamonedas .btn.oro{
  height:38px;
  background:linear-gradient(180deg,#d4832f,#a85c1c);border:1px solid #e09a4a;
  color:#1a0e04;font-weight:700;letter-spacing:.14em;border-radius:5px;
  box-shadow:0 2px 0 #6d3a0f, 0 6px 14px rgba(0,0,0,.5)}
#p-tragamonedas .btn.oro:hover:not(:disabled){background:linear-gradient(180deg,#e08f37,#b2641f)}
#p-tragamonedas .btn.oro:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 #6d3a0f}

/* Foco visible: sobre chapa negra, sin esto, con teclado no sabes
   dónde estás. Contorno sólido, nada de resplandor. */
#p-tragamonedas .chip:focus-visible,
#p-tragamonedas .btn:focus-visible,
#p-tragamonedas .palanca:focus-visible{
  outline:2px solid #f5b877;outline-offset:2px}

/* ── la bandeja de monedas: aquí cae el resultado ───────────────── */
#p-tragamonedas .bandeja{
  position:relative;width:min(300px,72%);margin:-1px auto 0;
  border-radius:0 0 10px 10px;padding:9px 14px 11px;
  background:linear-gradient(180deg,#101013 0%,#0a0a0c 100%);
  border:1px solid #2a2a33;border-top:none;
  box-shadow:inset 0 6px 14px rgba(0,0,0,.9), 0 14px 26px rgba(0,0,0,.6)}
/* la ranura por la que salen las monedas */
#p-tragamonedas .bandeja::before{
  content:'';position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  width:56%;height:5px;border-radius:3px;
  background:#050506;box-shadow:inset 0 2px 3px rgba(0,0,0,.9)}

#p-tragamonedas .res{
  text-align:center;margin:0;min-height:36px;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
#p-tragamonedas .res .big{font-size:17px;letter-spacing:.06em;line-height:1.25}
#p-tragamonedas .res .small{font-size:11px;color:#8d8d99;margin-top:1px}
/* Sin resultado la bandeja no se queda muda ni pega un salto de alto */
#p-tragamonedas .res:empty::before{
  content:'BANDEJA VACÍA';font-size:10px;letter-spacing:.22em;color:#4e4e5a;
  line-height:36px;display:block}

/* ── la ventana baja de Discord (543 px) ────────────────────────
   Es el caso que rompe. Aquí no vale encoger con scale(): la letra
   se vuelve ilegible. Se recorta el aire, no el tamaño del texto.
   La altura del canvas la limita el JS contra window.innerHeight. */
@media(max-height:760px){
  #p-tragamonedas .taller{width:min(500px,100%)}
  #p-tragamonedas .mueble{padding:11px 12px 10px}
  #p-tragamonedas .rotulo{padding-bottom:8px;font-size:10px;letter-spacing:.26em}
  #p-tragamonedas .palanca{top:42px;height:126px}
  #p-tragamonedas .palanca .eje{height:92px}
  #p-tragamonedas .reglas{margin-top:8px}
  #p-tragamonedas .pagos{margin-top:5px}
  #p-tragamonedas .pg{padding:4px 2px}
  #p-tragamonedas .pg .s{font-size:15px}
  #p-tragamonedas .mandos{margin-top:9px;padding-top:8px}
  #p-tragamonedas .bandeja{padding:7px 12px 9px}
  #p-tragamonedas .res{min-height:32px}
  #p-tragamonedas .res:empty::before{line-height:32px}
}
/* muy bajo: la máquina antes que el adorno */
@media(max-height:560px){
  #p-tragamonedas .reglas{display:none}
  #p-tragamonedas .chip{height:29px;min-width:44px}
  #p-tragamonedas .btn.oro{height:34px}
}

@media(max-width:620px){
  #p-tragamonedas .palanca{display:none}
  #p-tragamonedas .taller{padding-right:0}
  #p-tragamonedas .mandos{justify-content:center}
  #p-tragamonedas .btn.oro{flex:1 0 100%}
}

/* Quien pide menos movimiento no debería tragarse tres segundos de
   giro ni el rebote de la palanca. El JS acorta el giro; aquí se
   quita el muelle y se deja el gesto, seco. */
@media(prefers-reduced-motion:reduce){
  #p-tragamonedas .palanca .eje,
  #p-tragamonedas .palanca .bola{transition-duration:.12s;transition-timing-function:ease-out}
}