/* Piezas comunes de los juegos clásicos (mando «pantalla»). 1rem = 32 px a 1080p.
   Rendimiento en la tele: sin box-shadow; solo se animan transform y opacity. */
.cl-escena { background: #F6F3EC; color: var(--tg-ink); display: flex; align-items: stretch; gap: 1rem; padding: 1rem; box-sizing: border-box; }
.cl-escena p { margin: 0; }

/* Ficha redonda con la cara del jugador */
.cl-ficha { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--c); border: .15rem solid #fff; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.cl-ficha__cara { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cl-ficha__cara .tg-personaje, .cl-ficha__cara svg, .cl-ficha__cara img { width: 85%; height: 85%; object-fit: cover; }
img.cl-ficha__cara { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
.cl-ficha--grande { width: 3.4rem; height: 3.4rem; }
.cl-ficha--mini { width: 1.5rem; height: 1.5rem; border-width: .1rem; }

/* Cartel central (mensajes grandes) */
.cl-cartel { background: #fff; border-radius: 1.25rem; padding: .9rem 1.4rem; text-align: center; border: .12rem solid rgba(0,0,0,.08); }
.cl-cartel__grande { font-size: 2.6rem; font-weight: var(--tg-w-strong); letter-spacing: -.03em; line-height: 1.05; }
.cl-cartel__sub { font-size: 1.2rem; color: var(--tg-muted); margin-top: .3rem !important; }
.cl-aparece { animation: cl-aparece .35s var(--tg-ease) both; }
@keyframes cl-aparece { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Columna de jugadores (ficha + nombre + dato) */
.cl-jugadores { display: flex; flex-direction: column; gap: .6rem; width: 15rem; flex: none; }
.cl-jugador { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 1rem; padding: .5rem .7rem; border: .12rem solid transparent; }
.cl-jugador--activo { border-color: var(--tg-primary); background: var(--tg-primary-soft); }
.cl-jugador--hecho { border-color: var(--tg-online); }
.cl-jugador__nombre { font-size: 1.1rem; font-weight: var(--tg-w-medium); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-jugador__nombre .tg-personaje--linea { width: 1.4rem; height: 1.4rem; vertical-align: -.3rem; }
.cl-jugador__dato { font-size: 1.3rem; font-weight: var(--tg-w-strong); }
.cl-jugador__extra { font-size: 1.6rem; line-height: 1; }

/* Dado */
.cl-dado { width: 3rem; height: 3rem; border-radius: .7rem; background: #fff; border: .15rem solid #1F1F1F; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: var(--tg-w-strong); box-sizing: border-box; flex: none; }
.cl-dado--guardado { background: #FFE9A8; border-color: #E0A800; }
.cl-dado--rueda { animation: cl-rueda .5s linear; }
@keyframes cl-rueda { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Emoji grande en una tarjeta */
.cl-tarjeta { background: #fff; border-radius: 1.2rem; display: flex; align-items: center; justify-content: center; border: .15rem solid rgba(0,0,0,.1); }

/* Columna lateral de los tableros (Oca, Parchís): cartel arriba y jugadores debajo */
.cl-lado { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8rem; }
.cl-lado .cl-jugadores { width: auto; }
.cl-lado .cl-cartel__grande { font-size: 1.6rem; }
.cl-lado .cl-cartel__sub { font-size: 1rem; }