/* «Mesa con personajes» (opcional, personajes.js). La capa va entre los asientos de los demás y el tuyo:
   las manos de los demás quedan por encima de sus fichas; tus fichas y tus botones, por encima de todo. */
/* Debajo de los asientos (z-index 2): las fichas y los nombres de cada jugador quedan por encima de su personaje */
.pj-capa { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pj { position: absolute; transform-origin: 50% 50%; }
.pj img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.pj.pj-toc img { animation: pjToc .9s ease-in-out 1; }
.pj.pj-pensando img { animation: pjPiensa 2.4s ease-in-out infinite; }
@keyframes pjPiensa { 0%,100% { rotate: 0deg; } 30% { rotate: -4deg; } 70% { rotate: 3deg; } }
@keyframes pjToc { 0%,100% { translate: 0 0; } 25%,65% { translate: 0 -4%; } 40%,80% { translate: 0 1.5%; } }
/* Pone la ficha: se inclina hacia la mesa y vuelve (con imagen propia, estira el brazo) */
.pj.pj-juega img { animation: pjJuega .6s ease-out 1; }
@keyframes pjJuega { 0%,100% { translate: 0 0; } 40% { translate: 0 -7%; } }
.pj.pj-celebra img { animation: pjGana .7s ease-in-out 3; }
@keyframes pjGana { 0%,100% { scale: 1; } 50% { scale: 1.06; } }
#tbPj[aria-pressed="true"] { background: #ffd54a; }
/* Nombres al lado de cada personaje (copia de la etiqueta de siempre); las de siempre se esconden mientras se ven personajes */
.pj-nombres { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: #fff; }
.pj-nombre { position: absolute; }
.pj-nombre .nm-pill { max-width: 150px; }
/* A los lados el nombre va de lado (vertical), como la etiqueta de siempre, pegado al borde y debajo de su columna */
.pj-nombre.left .nm-pill, .pj-nombre.right .nm-pill { writing-mode: vertical-rl; padding: 6px 2px; max-width: none; max-height: 150px; }
.pj-nombre.left .nm-pill { transform: rotate(180deg); }
.pj-nombre.left .nm-pill .av, .pj-nombre.right .nm-pill .av { writing-mode: horizontal-tb; }

/* Caras con gestos junto al nombre (12-oct). La capa queda por encima de la mesa para que la cara se vea entera. */
.pj-capa:has(.pj-cara) { z-index: 4; }
.pj-cara { position: absolute; border-radius: 50%; background: #0b8fb3; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.pj-cara .cg-foto { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.pj-cara img { width: 100%; height: 100%; object-fit: cover; transform: scale(2); transform-origin: 50% 24%; display: block; } /* el retrato es de medio cuerpo: se acerca a la cara */
.pj-cara.propia img { transform: none; }
.pj-cara .cg-emoji { position: absolute; right: -6px; bottom: -6px; font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pj-cara.cg-pensando { animation: cgPiensa 2.4s ease-in-out infinite; border-color: #4ccf4c; }
/* Pensando: un cerebro 🧠 que se infla y se desinfla (pedido del 12-oct) */
.pj-cara.cg-pensando .cg-emoji { font-size: 20px; right: -9px; bottom: -8px; transform-origin: 50% 60%; animation: cgCerebro 1.1s ease-in-out infinite; }
@keyframes cgCerebro { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.3); } }
.pj-cara.cg-toc { animation: cgToc .9s ease-in-out 2; }
.pj-cara.cg-juega { animation: cgPop .5s ease-out 1; }
.pj-cara.cg-celebra { animation: cgSalta .6s ease-in-out 4; border-color: #ffd54a; }
.pj-cara.cg-triste { filter: saturate(.55) brightness(.9); }
.pj-cara.cg-triste img { translate: 0 2px; }
@keyframes cgPiensa { 0%,100% { rotate: 0deg; } 30% { rotate: -8deg; } 70% { rotate: 6deg; } }
@keyframes cgFlota { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes cgToc { 0%,100% { translate: 0 0; } 20%,60% { translate: -3px 0; } 40%,80% { translate: 3px 0; } }
@keyframes cgPop { 0% { scale: 1; } 40% { scale: 1.18; } 100% { scale: 1; } }
@keyframes cgSalta { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (prefers-reduced-motion: reduce) { .pj-cara, .pj-cara .cg-emoji { animation: none !important; } }

/* Tu perfil: escoger personaje */
.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.pj-op { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 2px solid transparent; border-radius: 14px; background: #f3f6f8; cursor: pointer; font: 800 13px Nunito, system-ui, sans-serif; color: #1d2a33; }
.pj-op img { width: 84px; height: 84px; border-radius: 50%; background: #0b8fb3; object-fit: cover; }
.pj-op.on { border-color: #0b8fb3; background: #e3f3f8; }
.pj-op:focus-visible { outline: 2px solid #0b8fb3; outline-offset: 2px; }
.pj-ver { display: flex; gap: 8px; align-items: center; padding: 4px 12px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pj.pj-toc img, .pj.pj-celebra img, .pj.pj-pensando img { animation: none; } }