/* Elige mesa (venues). Raíz: .screen.ui.s-venues (spec 8.2). El conmutador .seg y el marco dorado de
   .vcard.sel: base.css. */

.s-venues .venues-body { position: relative; display: flex; flex-direction: column; min-height: 0; }
/* Cabecera: jugadores conectados a la izquierda, conmutador en el centro */
.s-venues .vhead { flex: none; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; margin: 10px 12px 2px; }
.s-venues .vh-l { display: flex; justify-content: flex-start; min-width: 0; }
.s-venues .vhead .seg { justify-self: center; }

/* Carrusel: la tarjeta elegida queda en el centro; las vecinas, más pequeñas y apagadas */
.s-venues .car-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.s-venues .carousel {
  position: relative; flex: 1; display: flex; align-items: center; gap: 16px; min-height: 0;
  padding: 10px calc(50% - 118px) 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; touch-action: pan-x;
}
.s-venues .carousel::-webkit-scrollbar { display: none; }
.s-venues .arrow { position: absolute; z-index: 4; top: 50%; margin-top: -18px; }
.s-venues .arrow.prev { left: 12px; }
.s-venues .arrow.next { right: 12px; }
.s-venues .arrow[disabled] { opacity: .35; pointer-events: none; }

.s-venues .vcard {
  flex: none; width: 236px; height: 100%; max-height: 300px; scroll-snap-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 12px 14px;
  transform: scale(.94); filter: brightness(.8); transition: transform .2s, filter .2s;
}
.s-venues .vcard.sel { transform: none; filter: none; cursor: default; }
.s-venues .vcard .hd { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 100%; }
.s-venues .vcard .hd .ty-h3 { font-size: 22px; white-space: nowrap; }
.s-venues .vcard .hd .ty-over { white-space: nowrap; }
/* Mesa en perspectiva: el hueco cede si falta alto */
.s-venues .vcard .persp { position: relative; flex: 1 1 110px; width: 100%; min-height: 64px; max-height: calc(110px * var(--art-k)); perspective: 460px; perspective-origin: 50% 0%; }
.s-venues .vcard .timg { position: absolute; left: 50%; top: 50%; width: 200px; margin-top: -47px; transform: translateX(-50%) rotateX(40deg); transform-origin: 50% 0; }
/* sombra solo en la mesa elegida (nada de drop-shadow en listas de más de 6) */
.s-venues .vcard.sel .timg { filter: drop-shadow(0 12px 10px rgba(0,0,0,.6)); }
#stage[data-h="l"] .s-venues .vcard .timg, #stage[data-h="xl"] .s-venues .vcard .timg { width: 216px; margin-top: -60px; transform: translateX(-50%) rotateX(32deg); }
.s-venues .vcard .timg[src=""] { visibility: hidden; }
/* Apuesta y premio: dos pozos */
.s-venues .vcard .wells { flex: none; display: flex; gap: 8px; }
.s-venues .vcard .vw { width: 104px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.s-venues .vcard .vv { display: flex; align-items: center; gap: 4px; }
.s-venues .vcard .vv img { width: 18px; height: 18px; }
.s-venues .vcard .vv .ty-num { font-size: 20px; color: #fff; }
.s-venues .vcard .vv .ty-num.c-gold { color: var(--gold-2); }
.s-venues .vcard .vv .ty-num.c-red { color: var(--c-red-hi); }
.s-venues .vcard .go { flex: none; width: 180px; margin-top: 4px; }
/* Bloqueada: velo sobre la tarjeta, placa con candado sobre la mesa y, en lugar de JUGAR, el nivel que
   pide; la mesa, apagada */
.s-venues .vcard.locked .timg { filter: grayscale(.75) brightness(.42); }
/* la mesa (con su placa) va por encima del velo: se apaga con su propio filtro */
.s-venues .vcard.locked .persp { z-index: 4; }
.s-venues .vcard.locked::after { content: ''; position: absolute; z-index: 3; inset: 0; background: rgba(4,12,34,.62); pointer-events: none; }
.s-venues .vcard .plate {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid transparent;
  display: flex; align-items: center; justify-content: center; color: var(--gold-1);
  background: radial-gradient(circle at 50% 35%, #1d4a9a, #0a1f47 75%) padding-box, var(--gold-frame) border-box; box-shadow: 0 6px 14px rgba(0,0,0,.55);
}
.s-venues .vcard .plate svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.s-venues .vcard .need { position: relative; z-index: 4; flex: none; margin-top: 4px; height: 26px; padding: 0 12px; font-size: 12px; }