/* =============================================================================
   LECTURA DE LAS MANOS (js/ui/lectura_manos.js)
   ============================================================================= */

/* Sello sobre la carta ganadora de cada mano: verde = nuestra, rojo = de ellos, gris "=" = parda */
.tgl-sello {
    position: absolute; top: -9%; right: -14%; z-index: 5; pointer-events: none;
    width: 58%; aspect-ratio: 1; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 900 1rem/1 'Arial Black', Impact, sans-serif; font-size: clamp(13px, 1.35cqw, 28px); letter-spacing: -.5px;
    color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .7);
    border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .5);
    animation: tglSello .45s cubic-bezier(.3, 1.8, .5, 1) both;
}
.tgl-sello.tgl-nos   { background: radial-gradient(circle at 35% 30%, #5fe08f, #17803f 70%); }
.tgl-sello.tgl-ellos { background: radial-gradient(circle at 35% 30%, #ff7b6b, #a3241a 70%); }
.tgl-sello.tgl-parda { background: radial-gradient(circle at 35% 30%, #d5d9de, #5e6873 70%); font-size: clamp(16px, 1.8cqw, 34px); }
@keyframes tglSello {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    70%  { transform: scale(1.2) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); }
}

/* Las tres manos de la ronda, en el marcador */
.tgl-manos { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
.tgl-manos span {
    min-width: 34px; padding: 3px 4px 2px; border-radius: 6px;
    font: 900 .8rem/1.2 'Arial Black', Impact, sans-serif; letter-spacing: 0;
    color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .25);
    text-shadow: none; text-align: center;
}
.tgl-manos span.nos   { color: #fff; background: #1f9a52; border-color: #c9ffd9; }
.tgl-manos span.ellos { color: #fff; background: #b8322a; border-color: #ffd0c9; }
.tgl-manos span.parda { color: #fff; background: #6c7680; border-color: #e3e7eb; }
.tgl-manos span.jugando { color: #ffe066; border-color: #ffe066; animation: tglJugando 1.2s ease-in-out infinite; }
@keyframes tglJugando { 50% { box-shadow: 0 0 8px rgba(255, 224, 102, .8); } }