/* style4.css — Mus a 4 jugadores (2v2). Se carga DESPUÉS de style.css y sólo
   afecta a la pantalla #game-screen-4. No toca el juego de 2p.

   Aquí vive la RETÍCULA de la mesa (los cuatro asientos alrededor del centro),
   sus medidas y sus animaciones. El ASPECTO —colores, tipografía, filetes— lo
   pone static/game.css, que se carga después junto con la paleta del menú. Los
   colores de equipo se definen en menu.css (--equipo-a oro, --equipo-b acero). */

/* ---------- Layout general de la pantalla 4p ---------- */
#game-screen-4:not(.hidden) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 8px;
    box-sizing: border-box;
}

/* ---------- Marcador de equipos ---------- */
#score-bar-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 4px 0 6px 0;
}
.team-score {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
}
#score-team-a .team-label { color: var(--equipo-a); }
#score-team-b .team-label { color: var(--equipo-b); }
.team-score .team-pts { display: inline-flex; align-items: baseline; }

/* ---------- Mesa: rejilla de 4 asientos alrededor del centro ---------- */
#mesa-4 {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 2.2fr minmax(90px, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        ".    top    ."
        "left center right"
        ".    bottom .";
    gap: 6px;
    min-height: 0;
}
/* El de arriba pega con el marcador: se le deja hueco para que el rótulo de lo
   que canta quepa encima de su nombre sin montarse en el tanteo de equipos. */
#seat-top    { grid-area: top; padding-top: 18px; }
#seat-left   { grid-area: left;   }
#seat-right  { grid-area: right;  }
#seat-bottom { grid-area: bottom; }
#center-table-4 { grid-area: center; }

/* ---------- Asientos ---------- */
.seat-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    min-width: 0;
}

/* El cuerpo del asiento (nombre + chips + cartas). El asiento ocupa toda su
   celda de la rejilla —las columnas laterales son altas— y centra su contenido;
   el cuerpo, en cambio, mide justo lo que ocupa, así que es el ancla del rótulo
   de lo que canta cada jugador (ver .accion-burbuja). */
.seat-cuerpo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.seat-name {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.seat-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; min-height: 20px; }
.chip { white-space: nowrap; }

/* Cartas de cada asiento */
.seat-cards { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.seat-cards .carta-4 { width: 46px; }
.seat-cards .carta-4 img { width: 100%; display: block; }
/* Mi mano abajo, más grande y clicable */
#seat-bottom .carta-4 { width: 74px; cursor: pointer; transition: transform 0.15s; }
#seat-bottom .carta-4.seleccionada img { transform: translateY(-14px); }
/* Los oponentes izquierda/derecha en columna para ahorrar ancho */
#seat-left .seat-cards, #seat-right .seat-cards { flex-direction: row; }

/* ---------- Lo que canta cada jugador ---------- */
/* Rótulo momentáneo sobre el nombre de quien acaba de jugar (ver mostrarAccion4
   en table4.js). Va pegado al borde superior del CUERPO del asiento, no al del
   asiento entero: en las columnas de los lados el asiento es tan alto como la
   mesa y el rótulo salía muy por encima del jugador, sin saber de quién era.
   Se le deja desbordar a lo ancho: esas columnas son estrechas —más aún en el
   móvil— y «No quiero» no cabe dentro de ellas. */
.seat-4 { position: relative; }
.accion-burbuja {
    position: absolute;
    left: 50%; top: 0;
    --bx: -50%;                /* lo usan también los fotogramas de abajo */
    /* Justo encima del nombre, sin llegar a pisarlo: la plaquita es opaca y
       tapaba media línea, y hay que poder leer a la vez QUIÉN y QUÉ ha cantado. */
    transform: translate(var(--bx), -92%);
    z-index: 14;
    white-space: nowrap;
    pointer-events: none;
    animation: accionEntra4 2.6s ease-out forwards;
}
@keyframes accionEntra4 {
    0%   { opacity: 0; transform: translate(var(--bx), -62%) scale(0.94); }
    10%  { opacity: 1; transform: translate(var(--bx), -92%) scale(1); }
    80%  { opacity: 1; transform: translate(var(--bx), -92%) scale(1); }
    100% { opacity: 0; transform: translate(var(--bx), -120%) scale(1); }
}

/* ---------- Mesa central ---------- */
#center-table-4 {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 10px; min-height: 0;
    position: relative; overflow: hidden;
}
#game-log-4 { margin: 0; text-align: center; min-height: 1.2em; }
#betting-log-4 { width: 100%; }

/* Cuenta atrás del turno */
#turno-timer-4 { width: 70%; overflow: hidden; }
#turno-timer-bar-4 { height: 100%; width: 100%; }

/* ---------- Animaciones ---------- */
@keyframes floatUp4 {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-55px); opacity: 0; }
}
.puntos-flotantes {
    position: absolute; font-size: 1.8em; font-weight: bold; pointer-events: none;
    animation: floatUp4 0.9s ease-out forwards; z-index: 30;
}

@keyframes shake4 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-7px); }
    80% { transform: translateX(6px); }
}
#mesa-4.ordago-shake { animation: shake4 0.4s; }
#ordago-flash-4 {
    position: fixed; inset: 0; background: var(--cm-red); opacity: 0; pointer-events: none;
    z-index: 40; animation: flashRed4 0.45s ease-out forwards;
}
@keyframes flashRed4 { 0% { opacity: 0.55; } 100% { opacity: 0; } }

/* Reparto: las cartas entran desde el centro */
@keyframes dealIn4 {
    from { transform: translate(var(--dx, 0), var(--dy, -120px)) scale(0.6); opacity: 0; }
    to   { transform: translate(0, 0) scale(1); opacity: 1; }
}
.carta-4.deal-anim { animation: dealIn4 0.42s ease-out both; }

/* Showdown: giro 3D de las manos ocultas al revelarse */
@keyframes flip4 {
    from { transform: rotateY(180deg); }
    to   { transform: rotateY(0deg); }
}
.carta-4.flip-anim img { animation: flip4 0.5s ease-out both; backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .carta-4.deal-anim, .carta-4.flip-anim img,
    .puntos-flotantes, #mesa-4.ordago-shake, #ordago-flash-4 { animation: none !important; }
    /* El rótulo de la jugada es información, no adorno: se queda quieto pero
       visible todo el rato en vez de desaparecer con la animación. */
    .accion-burbuja { animation: none !important; opacity: 1; }
    .seat-4.turno-activo { animation: none; }
}

/* ---------- Sala de espera (dentro de la ventana de Jugar) ---------- */
/* El aspecto de los asientos lo pone menu.css (#modal-play .seat-pick-btn). */
.seat-pick-btn { cursor: pointer; }
.seat-pick-btn.ocupado { opacity: 0.45; cursor: not-allowed; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    #mesa-4 { grid-template-columns: minmax(60px, 0.8fr) 2fr minmax(60px, 0.8fr); }
    /* Sólo aquí: con columnas laterales de 60-80 px el rótulo centrado se salía
       media plaquita de la pantalla, así que se ancla al borde de FUERA y crece
       hacia el centro de la mesa. En pantallas anchas sobra sitio y va centrado
       sobre el jugador, que es donde se lee mejor de quién es. */
    #seat-left .accion-burbuja  { left: 0; right: auto; --bx: 0; }
    #seat-right .accion-burbuja { left: auto; right: 0; --bx: 0; }
    .seat-cards .carta-4 { width: 34px; }
    #seat-bottom .carta-4 { width: 58px; }
    #seat-left .seat-cards, #seat-right .seat-cards { flex-direction: column; }
    #score-bar-4 { gap: 10px; }
    .team-score { padding: 4px 8px; font-size: 0.85em; }
}