/* ================================================================ MESA DE DADOS (T22)
   Mismo lenguaje que el blackjack y el rasca: paño con filo dorado, foco de luz y textura de
   fieltro hecha con degradados (ni una imagen que descargar). Lo propio de esta mesa son los dos
   dados: un cubo de cara plana con los puntos en la rejilla de 3×3 de un dado de verdad, para que
   la cara se lea de un vistazo desde el teléfono sin tener que contar puntos. */
.dados-pano {
  position: relative;
  width: 100%;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-radius: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(680px 300px at 50% -12%, color-mix(in srgb, var(--verde-f) 16%, transparent), transparent 70%),
    radial-gradient(520px 260px at 50% 118%, color-mix(in srgb, var(--tapete-fondo) 38%, transparent), transparent 72%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--oro-oscuro) 2.1%, transparent) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 62%, var(--tapete-fieltro-3));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

/* El cubilete, arriba a la derecha: el equivalente del zapato del blackjack. De ahí salen los dados. */
.dados-cubilete {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 48px;
  border-radius: 6px 6px var(--r) var(--r);
  background: linear-gradient(160deg, var(--tapete-fieltro-1), var(--tapete-fondo));
  border: 2px solid var(--oro-oscuro);
  transform: rotate(9deg);
  box-shadow: var(--sombra-corta);
}
.dados-cubilete i { position: absolute; left: 5px; width: 30px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--texto) 55%, transparent); }
.dados-cubilete i:nth-child(1) { top: 9px; }
.dados-cubilete i:nth-child(2) { top: 15px; }
.dados-cubilete i:nth-child(3) { top: 21px; }

.dados-zona { display: flex; gap: 18px; justify-content: center; min-height: 86px; align-items: center; }

.dado {
  width: 78px;
  height: 78px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: var(--r);
  background: linear-gradient(155deg, var(--cg-superficie-alta), var(--cg-papel-3) 68%, var(--cg-bronce));
  border: 1px solid color-mix(in srgb, var(--tapete-fondo) 25%, transparent);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--texto) 22.5%, transparent), inset 0 -6px 12px color-mix(in srgb, var(--texto) 8%, transparent), inset 0 4px 8px color-mix(in srgb, var(--cg-superficie-alta) 60%, transparent);
}
.dado i { border-radius: 50%; background: transparent; }
.dado i.on { background: radial-gradient(circle at 34% 30%, var(--cg-texto-2), var(--cg-texto) 72%); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--cg-superficie-alta) 35%, transparent); }

/* Rodar: giro y salto compuestos en la GPU (transform), sin tocar el diseño de la página en ningún
   cuadro. La cara que se ve al terminar la escribe el JS con lo que mandó el servidor. */
@keyframes dado-rueda {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(-10px, -22px, 0) rotate(200deg); }
  50%  { transform: translate3d(8px, 4px, 0) rotate(430deg); }
  75%  { transform: translate3d(-6px, -14px, 0) rotate(680deg); }
  100% { transform: translate3d(0, 0, 0) rotate(900deg); }
}
.dado.rodando { animation: dado-rueda .9s cubic-bezier(.3, .8, .4, 1) both; }

.dados-suma-viva { letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--texto-2); }

.dados-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.dados-banner-t { font-weight: 700; }
.dados-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
.dados-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--agua); }
/* La tirada que no paga NO se pinta de rojo: no es un error ni una derrota, es la siguiente tirada. */
.dados-banner.casa { background: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); color: var(--texto-2); }

.dados-tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 520px); }
.dados-opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--texto) 16%, transparent);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.dados-opcion:hover { transform: translateY(-2px); }
.dados-opcion.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.dados-op-t { font-weight: 700; letter-spacing: .06em; }
.dados-op-s { font-size: 12px; color: var(--texto-2); }
.dados-op-p { font-size: 12px; color: var(--oro); }

.dados-sumas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: min(100%, 560px); }
.dados-suma {
  min-width: 52px;
  padding: 6px 8px;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--texto) 14%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.dados-suma span { font-size: 12px; color: var(--oro); }
.dados-suma.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); }
.dados-nota { text-align: center; max-width: 52ch; }

@media (prefers-reduced-motion: reduce) { .dado.rodando { animation: none; } }
@media (max-width: 620px) {
  .dado { width: 62px; height: 62px; padding: 8px; gap: 3px; }
  .dados-tablero { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ MESA DEL COHETE (T22)
   El cielo es un degradado que se aclara al despegar (nada que descargar) y el cohete sube por él
   con `bottom` en porcentaje, movido desde el JS con el MISMO reloj y la MISMA curva que usa el
   servidor para pagar. La marca del objetivo se dibuja a la altura exacta en la que se va a cobrar
   solo: el asesor ve a dónde va antes de lanzar. */
.coh-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--verde-f) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fondo) 64%, var(--tapete-fondo));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.coh-cielo {
  position: relative;
  width: min(100%, 520px);
  height: 240px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: linear-gradient(180deg, var(--tapete-fondo) 0%, var(--tapete-fieltro-2) 55%, var(--tapete-fieltro-1) 100%);
  transition: filter .4s ease;
}
.coh-cielo.activo { filter: brightness(1.12) saturate(1.1); }
.coh-estrella { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: color-mix(in srgb, var(--texto) 80%, transparent); }
.coh-estrella.e1 { top: 16%; left: 22%; }
.coh-estrella.e2 { top: 34%; left: 71%; }
.coh-estrella.e3 { top: 58%; left: 38%; }
.coh-estrella.e4 { top: 74%; left: 82%; }

/* La marca del objetivo: la línea donde el retiro automático cobra solo. */
.coh-marca { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--oro-oscuro) 65%, transparent); }
.coh-marca span {
  position: absolute;
  right: 8px;
  top: -9px;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 8px;
  color: var(--oro);
  background: color-mix(in srgb, var(--tapete-fondo) 55%, transparent);
}

.coh-nave { position: absolute; left: 50%; margin-left: -18px; font-size: 30px; line-height: 1; transform: translate3d(0, 50%, 0); }
.coh-fuego {
  position: absolute;
  left: 9px;
  top: 26px;
  width: 12px;
  height: 18px;
  border-radius: 50% 50% 60% 60%;
  background: linear-gradient(180deg, var(--oro-claro), color-mix(in srgb, var(--rojo) 10%, transparent));
  animation: coh-llama .18s ease-in-out infinite alternate;
}
@keyframes coh-llama { from { transform: scaleY(.7); opacity: .75; } to { transform: scaleY(1.25); opacity: 1; } }

.coh-cifra { position: absolute; left: 0; right: 0; top: 26px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.coh-cifra b { font-size: 42px; letter-spacing: .02em; color: var(--oro); text-shadow: 0 2px 12px color-mix(in srgb, var(--texto) 30%, transparent); }
.coh-cifra span { color: var(--texto-2); }

.coh-objetivos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: min(100%, 520px); }
.coh-obj {
  min-width: 78px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 2px solid color-mix(in srgb, var(--texto) 16%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.coh-obj:hover { transform: translateY(-2px); }
.coh-obj span { font-size: 12px; color: var(--texto-2); }
.coh-obj.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }
.coh-obj.activa span { color: var(--oro); }

.coh-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.coh-banner-t { font-weight: 700; }
.coh-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
.coh-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--agua); }
/* El vuelo que no paga NO se pinta de rojo: no es una derrota, es el siguiente lanzamiento. */
.coh-banner.casa { background: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); color: var(--texto-2); }
.coh-nota { text-align: center; max-width: 56ch; }

@media (prefers-reduced-motion: reduce) { .coh-fuego { animation: none; } }
@media (max-width: 620px) {
  .coh-cielo { height: 200px; }
  .coh-cifra b { font-size: 34px; }
}

/* ================================================================ MESA DE MINAS (T22)
   El tablero es una rejilla de botones: tapada es una losa de piedra, destapada es una gema. Las
   minas SOLO se pintan cuando la ronda terminó —mientras se juega, el navegador no las tiene— y la
   que estalló se marca aparte. La casilla recién destapada se voltea con una animación corta que
   solo lleva ella (`.nueva`): sin eso, cada repintado volvería a voltear las diez anteriores. */
.min-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--oro-oscuro) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 64%, var(--tapete-fondo));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.min-marcador {
  width: min(100%, 460px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.min-marcador b { font-size: 34px; color: var(--oro); line-height: 1; }
.min-marcador span { display: block; color: var(--texto-2); }
.min-sig { color: var(--agua); font-size: 13px; text-align: right; }

.min-tablero { display: grid; gap: 8px; width: min(100%, 420px); }
.min-casilla {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--texto);
  background: linear-gradient(180deg, color-mix(in srgb, var(--texto) 12%, transparent), color-mix(in srgb, var(--tapete-fondo) 28%, transparent));
  border: 2px solid color-mix(in srgb, var(--texto) 16%, transparent);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.min-casilla:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--oro); }
.min-casilla:disabled { cursor: default; }
.min-casilla.abierta { background: color-mix(in srgb, var(--verde-f) 14%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); }
.min-casilla.mina { background: color-mix(in srgb, var(--oro-oscuro) 9%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 27%, transparent); }
/* La que estalló se marca, pero NO en rojo de error: la ronda terminó, no se rompió nada. */
.min-casilla.pisada { border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro-oscuro) 18%, transparent); }
.min-casilla.nueva { animation: min-voltea .22s ease-out; }
@keyframes min-voltea { from { transform: rotateY(90deg) scale(.9); } to { transform: none; } }

.min-escalera { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: min(100%, 520px); }
.min-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 4px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.min-paso b { font-size: 12px; color: var(--oro); }
.min-paso span { font-size: 12px; color: var(--texto-2); }
.min-paso.pasada { opacity: .45; }
.min-paso.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 16%, transparent); }

.min-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.min-banner-t { font-weight: 700; }
.min-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
/* El tablero que termina en mina NO se pinta de rojo: no es una derrota, es el siguiente tablero. */
.min-banner.casa { background: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); color: var(--texto-2); }
.min-nota { text-align: center; max-width: 56ch; }

@media (prefers-reduced-motion: reduce) { .min-casilla.nueva { animation: none; } }
@media (max-width: 620px) {
  .min-tablero { gap: 6px; }
  .min-casilla { font-size: 20px; border-radius: var(--r); }
  .min-marcador b { font-size: 28px; }
}

/* ================================================================ MESA DE RULETA GTA (T22)
   La rueda se pinta con 40 sectores girados uno a uno (`--a` es el ángulo de cada casilla), no con
   una imagen: así una casilla más o menos en el panel cambia la rueda sola. La que gira es la rueda
   entera con un `transform` compuesto en la GPU; la flecha está fija arriba. El tapete es el de
   siempre —tres filas de doce, la de arriba con los múltiplos de tres— y la ficha apilada se dibuja
   encima de la casilla, no al lado: es donde el ojo la busca. */
.rul-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-radius: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 300px at 50% -10%, color-mix(in srgb, var(--oro-oscuro) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 62%, var(--tapete-fondo));
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.rul-rueda-caja { position: relative; width: min(300px, 74vw); aspect-ratio: 1 / 1; }
.rul-rueda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--oro-oscuro);
  background: radial-gradient(circle at 50% 50%, var(--tapete-fieltro-2), var(--tapete-fondo) 74%);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--texto) 35%, transparent), 0 10px 26px color-mix(in srgb, var(--texto) 25%, transparent);
  overflow: hidden;
  will-change: transform;
}
/* Un sector por casilla: se gira al ángulo que le toca y el texto se endereza dentro. */
.rul-sector {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 50%;
  transform-origin: 50% 100%;
  transform: rotate(var(--a));
}
.rul-sector b {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  padding: 3px 4px;
  border-radius: 5px;
  color: var(--cg-superficie-alta);
}
.rul-sector.rojo b { background: var(--cg-caida); }
.rul-sector.negro b { background: var(--tapete-fondo); }
/* Las cuatro de la casa se ven distintas a propósito: la ventaja está a la vista en la rueda. */
.rul-sector.casa b { background: var(--oro-oscuro); color: var(--tapete-tinta); }
.rul-eje {
  position: absolute;
  left: 50%; top: 50%;
  width: 34%; height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--oro-oscuro) 55%, transparent), color-mix(in srgb, var(--tapete-fondo) 85%, transparent) 70%);
  border: 2px solid var(--oro-oscuro);
}
.rul-flecha {
  position: absolute;
  left: 50%; top: -10px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid var(--oro);
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--texto) 30%, transparent));
  z-index: 2;
}

.rul-cifra { text-align: center; font-size: 20px; font-weight: 700; color: var(--oro); }

.rul-tapete { display: flex; gap: 6px; width: min(100%, 620px); align-items: stretch; }
.rul-casa { display: flex; flex-direction: column; gap: 4px; }
.rul-rejilla { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rul-fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) 46px; gap: 4px; }
.rul-docenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rul-pares { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.rul-num, .rul-fuera {
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  color: var(--cg-superficie-alta);
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  transition: transform .1s ease, border-color .1s ease;
}
.rul-num:hover, .rul-fuera:hover { transform: translateY(-2px); border-color: var(--oro); }
.rul-num.rojo { background: var(--cg-caida); }
.rul-num.negro { background: var(--tapete-fondo); }
.rul-num.casa { background: linear-gradient(180deg, var(--oro-oscuro), var(--cg-bronce-osc)); color: var(--tapete-tinta); min-height: 34px; }
.rul-fuera {
  background: color-mix(in srgb, var(--tapete-fondo) 30%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 12px;
}
.rul-fuera i { font-style: normal; font-size: 12px; color: var(--texto-2); }

/* La ficha puesta: encima de la casilla, redonda y con su cifra. */
.rul-ficha {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 22px;
  padding: 1px 4px;
  border-radius: var(--r);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--tapete-tinta);
  background: var(--oro);
  border: 2px solid var(--cg-superficie-alta);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--texto) 25%, transparent);
}

.rul-puesto { margin-top: 8px; color: var(--texto-2); font-size: 13px; }
.rul-ayuda { margin-top: 6px; max-width: 68ch; }
.rul-nota { text-align: center; max-width: 66ch; }

.rul-banner {
  width: min(100%, 480px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.rul-banner-t { font-weight: 700; }
.rul-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
.rul-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--agua); }
/* El giro que no paga NO se pinta de rojo: no es una derrota, es el siguiente giro. */
.rul-banner.casa { background: color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent); border-color: color-mix(in srgb, var(--oro-oscuro) 21%, transparent); color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) { .rul-rueda { transition: none !important; } }
@media (max-width: 620px) {
  .rul-fila { grid-template-columns: repeat(12, minmax(0, 1fr)) 34px; gap: 2px; }
  /* Las apuestas de fuera (docenas, pares) también son .rul-fila: sin esto heredaban las 12 columnas y se aplastaban. */
  .rul-docenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rul-pares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rul-fuera[data-tipo="columna"] { font-size: 7px; overflow: hidden; }   /* «columna» no cabe en 34 px a 10 px */
  .rul-fuera[data-tipo="columna"] i { font-size: 9px; }
  .rul-num, .rul-fuera { font-size: 10px; padding: 5px 0; border-radius: 6px; }
  .rul-fuera i { font-size: 12px; }
  .rul-ficha { min-width: 18px; font-size: 9px; right: -3px; top: -4px; }
  .rul-cifra { font-size: 17px; }
}

@media (max-width: 860px) {
  /* En el móvil la bandeja se ancla al ancho de la pantalla: la campanita queda pegada al
     borde derecho y un desplegable de 340 px se saldría. */
  .bandeja { right: -6px; width: min(340px, calc(100vw - 24px)); }
  .boveda-cifras { grid-template-columns: minmax(0, 1fr); }
  .boveda-cifra .cifra { font-size: 30px; }
  .boveda-plazos { grid-template-columns: minmax(0, 1fr); }
  .boveda-plazo { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
  .boveda-gancho { flex-basis: 100%; }
  .boveda-dep-cobro { text-align: left; }
  .pfin-datos { grid-template-columns: minmax(0, 1fr); }
  .pfin-fila { grid-template-columns: minmax(0, 1fr); }
  .pfin-cuota { grid-template-columns: 38px 1fr auto; row-gap: 6px; }
  .pfin-cuota .estado, .pfin-cuota .enlace-comprobante { grid-column: 2 / -1; justify-self: start; }
}

/* ================================================================ MESA DE PLINKO (T22)
   El triángulo de clavijas se pinta con puntos posicionados en porcentaje (`left`/`top`), no con
   una imagen ni con una rejilla: así un tablero de 8 o de 16 filas editado desde el panel se dibuja
   solo, sin tocar una línea de CSS. La ficha se mueve con `left`/`top` en porcentaje y `transition`,
   que es lo que hace que la caída se vea continua aunque el salto entre filas sea un solo cambio de
   estilo. El tono de cada canaleta lo decide su PAGO y no su posición: lo que hay que leer de un
   vistazo es cuánto paga cada boca. */
.pk-pano {
  position: relative;
  width: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--oro-oscuro) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 64%, var(--tapete-fondo));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.pk-tablero {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 13 / 11;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tapete-fondo) 30%, transparent), color-mix(in srgb, var(--tapete-fondo) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  border-bottom: 0;
  overflow: hidden;
}
.pk-clavija {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--texto) 55%, transparent);
  box-shadow: 0 0 4px color-mix(in srgb, var(--texto) 25%, transparent);
}
.pk-ficha {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--cg-bronce-claro), var(--oro) 55%, var(--oro-oscuro));
  box-shadow: 0 0 10px color-mix(in srgb, var(--oro-oscuro) 55%, transparent);
  /* El salto entre dos filas dura lo mismo que el paso de la animación (95 ms): la ficha llega a la
     clavija justo cuando suena el tic, no antes ni después. */
  transition: left .095s linear, top .095s ease-in;
}

.pk-canaletas { display: flex; gap: 2px; width: min(100%, 460px); }
.pk-canaleta {
  flex: 1;
  min-width: 0;
  text-align: center;
  /* 081 · M-07: la cifra de cada boca es EL dato de la mesa: 12 px como mínimo (antes 10 px, y 8 px en celular). */
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  padding: 7px 0;
  border-radius: 0 0 8px 8px;
  color: var(--tapete-tinta);
  border: 1px solid color-mix(in srgb, var(--tapete-fondo) 25%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Tres tonos por lo que paga: oro cuando multiplica de verdad, agua cuando devuelve más de la
   ficha, y piedra cuando devuelve una parte. NINGUNO es rojo: no hay canaleta perdedora. */
.pk-canaleta.alta { background: linear-gradient(180deg, var(--cg-bronce-claro), var(--oro-oscuro)); }
.pk-canaleta.media { background: linear-gradient(180deg, var(--cg-verde-dato), var(--cg-ok)); color: var(--tapete-tinta); }
.pk-canaleta.baja { background: linear-gradient(180deg, color-mix(in srgb, var(--texto) 34%, transparent), color-mix(in srgb, var(--texto) 18%, transparent)); color: var(--texto); }
.pk-canaleta.activa { transform: translateY(3px); box-shadow: 0 0 0 2px var(--oro), 0 6px 14px color-mix(in srgb, var(--texto) 22.5%, transparent); }

.pk-tabla { width: min(100%, 460px); }
.pk-tabla summary { cursor: pointer; color: var(--texto-2); font-size: 13px; }
.pk-tabla-filas { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pk-tabla-fila {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
}
.pk-tabla-fila b { color: var(--oro); }
.pk-tabla-fila span { color: var(--texto-2); font-size: 12px; }
.pk-tabla-fila i { font-style: normal; color: var(--texto-2); font-size: 12px; }

.pk-banner {
  width: min(100%, 460px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.pk-banner-t { font-weight: 700; }
.pk-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
/* La ficha que cae al centro devuelve el 40 %: es un consuelo, no una derrota, y no se pinta de rojo. */
.pk-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--agua); }

@media (prefers-reduced-motion: reduce) { .pk-ficha { transition: none; } }
@media (max-width: 620px) {
  /* 081 · M-07: con trece bocas de ~24 px, «×0,9» no cabe en un renglón a 12 px: el «×» sube a su propio renglón y la cifra queda entera. */
  .pk-canaletas { gap: 1px; }
  .pk-canaleta { font-size: 12px; padding: 4px 0 5px; letter-spacing: -.5px; font-variant-numeric: normal; border-left-width: 0; border-right-width: 0; }
  .pk-canaleta .pk-x, .pk-canaleta .pk-n { display: block; }
  .pk-canaleta .pk-x { line-height: 1; opacity: .8; }
  .pk-clavija { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
  .pk-ficha { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
  .pk-tabla-fila { grid-template-columns: 52px 1fr auto; }
}

/* --- Carrera de cuyes (T22 · RF-6) --------------------------------------- */

.cy-pano {
  position: relative;
  width: 100%;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: var(--r);
  border: 3px solid var(--oro-oscuro);
  background:
    radial-gradient(620px 280px at 50% -10%, color-mix(in srgb, var(--oro-oscuro) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--tapete-fieltro-1), var(--tapete-fieltro-2) 64%, var(--tapete-fondo));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--texto) 27.5%, transparent), 0 18px 34px color-mix(in srgb, var(--texto) 20%, transparent);
}

.cy-pista-caja {
  position: relative;
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Cada carril es un botón: tocarlo elige a ese cuy. No cuesta BEKY —la apuesta se cobra al
   largar— así que no lleva confirmación en dos toques. */
.cy-carril {
  display: grid;
  grid-template-columns: 122px 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 14px 6px 8px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  background: color-mix(in srgb, var(--tapete-fondo) 26%, transparent);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.cy-carril:hover { background: color-mix(in srgb, var(--tapete-fondo) 34%, transparent); }
.cy-carril.elegido { border-color: var(--oro); background: color-mix(in srgb, var(--oro-oscuro) 12%, transparent); }

.cy-datos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cy-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-cuota { color: var(--oro); font-weight: 700; font-size: 13px; }
.cy-veces { font-size: 12px; }

.cy-pista {
  position: relative;
  height: 30px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--texto) 5%, transparent) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, color-mix(in srgb, var(--oro-oscuro) 7.5%, transparent), color-mix(in srgb, var(--tapete-fondo) 18%, transparent));
  border: 1px solid color-mix(in srgb, var(--texto) 7%, transparent);
  overflow: hidden;
}
/* La meta: la banda a cuadros del final del carril, para que se vea a dónde corren. */
.cy-pista::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--oro) 0 5px, var(--tapete-fondo) 5px 10px);
  opacity: .8;
}
.cy-corredor {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  /* La duración la pone la pantalla en cada carrera (un puesto tarda más que el anterior); aquí solo
     queda la curva, que arranca y frena como un bicho y no como un ascensor. */
  transition: left 0s cubic-bezier(.34, .12, .28, 1);
}
.cy-bicho {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--cy-color, var(--oro)));
}
.cy-puesto {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--cy-color, var(--oro));
  color: var(--tapete-tinta);
  opacity: 0;
  transition: opacity .18s ease;
}
.cy-corredor.llego .cy-puesto { opacity: 1; }
.cy-puesto.oro { box-shadow: 0 0 0 2px var(--oro), 0 4px 10px color-mix(in srgb, var(--texto) 22.5%, transparent); }

.cy-tabla { width: min(100%, 520px); }
.cy-tabla summary { cursor: pointer; color: var(--texto-2); font-size: 13px; }
.cy-tabla-filas { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.cy-tabla-fila {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tapete-fondo) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
}
.cy-tabla-fila b { color: var(--oro); }
.cy-tabla-fila span, .cy-tabla-fila i { color: var(--texto-2); font-size: 12px; font-style: normal; }

.cy-banner {
  width: min(100%, 520px);
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid transparent;
}
.cy-banner-t { font-weight: 700; }
.cy-banner.gana { background: color-mix(in srgb, var(--verde-f) 12%, transparent); border-color: color-mix(in srgb, var(--verde-f) 45%, transparent); color: var(--verde); }
/* El segundo puesto devuelve el 30 %: es un consuelo, no una derrota, y no se pinta de rojo. */
.cy-banner.consuelo { background: color-mix(in srgb, var(--verde-f) 10%, transparent); border-color: color-mix(in srgb, var(--verde-f) 40%, transparent); color: var(--agua); }
/* Y la carrera que se lleva la casa TAMPOCO es roja: la apuesta se fue al bote del equipo. */
.cy-banner.casa { background: color-mix(in srgb, var(--texto) 6%, transparent); border-color: color-mix(in srgb, var(--texto) 18%, transparent); color: var(--texto-2); }

@media (prefers-reduced-motion: reduce) { .cy-corredor { transition: none; } }
@media (max-width: 620px) {
  .cy-carril { grid-template-columns: 96px 1fr; padding: 5px 10px 5px 6px; }
  .cy-nombre, .cy-cuota { font-size: 12px; }
  .cy-pista { height: 26px; }
  .cy-bicho { font-size: 17px; }
  .cy-tabla-fila { grid-template-columns: 80px 1fr auto; }
}