* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Arial Black', Impact, sans-serif;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* PANTALLA DE JUEGO 16:9: todo lo de adentro se mide contra ELLA (cqw/cqh), no contra la ventana.
   Así la mesa se ve igual en PC, tablet y celular horizontal (antes, con vw/vh, en pantallas que no
   eran 16:9 las piezas se agrandaban y se pisaban). Fuera de la pantalla, cqw/cqh equivalen a vw/vh. */
#pantalla-juego {
    position: relative;
    container-type: size;
    width: 100vw;
    height: 56.25vw;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: 177.78vh;
    max-width: 177.78dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #000000;
}

.efecto-temblor {
    animation: temblorEspecial 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

.efecto-temblor-fuerte {
    animation: temblorFuerte 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.flash-envido {
    animation: rastroEnvido 0.7s ease-out forwards;
}

.texto-flotante-euforico {
    color: #2ecc71;
    -webkit-text-stroke: 6px #000000;
    paint-order: stroke fill;
    text-shadow: 4px 4px 0px #000000;
}

.btn-truco, 
.btn-envido {
    font-size: 1.4rem !important;
    letter-spacing: 1px;
}

#overlay-las-buenas, #overlay-fin-chico {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 👈 Fondo radial con más transparencia (de 0.92 a 0.7) para ver la mesa de fondo */
    background: radial-gradient(circle, rgba(255, 223, 100, 0.25) 0%, rgba(0, 0, 0, 0.7) 85%);
    z-index: 150;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    overflow: hidden;
}

#overlay-fin-chico {
    z-index: 160;
    background: radial-gradient(circle, rgba(20, 20, 20, 0.75) 0%, rgba(0, 0, 0, 0.82) 85%);
}

#overlay-fin-chico.derrota-chico {
    background: radial-gradient(circle, rgba(120, 20, 20, 0.7) 0%, rgba(0, 0, 0, 0.85) 85%);
}

#overlay-las-buenas.activo, #overlay-fin-chico.activo {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.luz-celestial-giratoria {
    position: absolute;
    width: 1400px;
    height: 1400px;
    background: conic-gradient(from 0deg, rgba(255, 215, 0, 0.6), transparent 20deg, rgba(255, 255, 255, 0.8) 40deg, transparent 60deg, rgba(255, 215, 0, 0.6) 80deg, transparent 100deg);
    border-radius: 50%;
    animation: girarLuzCelestial 12s linear infinite;
    filter: blur(20px);
    z-index: 1;
}

.contenedor-alas-buenas {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.ala-celestial {
    font-size: 5.5rem; /* 👈 Achicado de 8rem a 5.5rem */
    filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #f1c40f);
}

.ala-izq { animation: desplegarAlaIzq 2.5s ease-out forwards; }
.ala-der { animation: desplegarAlaDer 2.5s ease-out forwards; }

.caja-texto-buenas {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subtitulo-buenas {
    font-size: 1.8rem; /* 👈 Achicado de 2.5rem a 1.8rem */
    color: #ffffff;
    letter-spacing: 3px;
    -webkit-text-stroke: 3px #000;
}

.titulo-buenas {
    font-size: 4.5rem; /* 👈 Achicado de 6.5rem a 4.5rem para que no tape la mesa */
    color: #ffd700;
    letter-spacing: 4px;
    -webkit-text-stroke: 7px #000000;
    paint-order: stroke fill;
    filter: drop-shadow(0 0 20px #f1c40f);
    animation: latidoCelestial 1.5s ease-in-out infinite alternate;
}
/* Achicar también las imágenes flotantes de fondo de los overlays (Messi / Ricardo) */
.messi-flameante-fg,
.ricardo-flameante-fg,
.messi-lost-flameante-fg {
    width: 60% !important;  /* 👈 Achicado del 85% al 60% para que dejen aire a los costados */
    height: 60% !important;
    opacity: 0.9;          /* 👈 Un toque más translúcidas */
}

#overlay-game-over {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); /* 👈 Más translúcido para ver el fondo */
    z-index: 100;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.titulo-game-over {
    font-size: 3.8rem; /* 👈 Achicado de 5rem a 3.8rem */
    color: #e74c3c;
    animation: parpadeo 0.8s ease-in-out infinite alternate;
}

.btn-reiniciar-partida {
    padding: 16px 40px;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border: 4px solid #ffffff;
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.5rem;
    font-style: italic;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 0 #000, 0 15px 25px rgba(0,0,0,0.8);
    text-shadow: 2px 2px 0px #000;
}

.btn-reiniciar-partida:hover { filter: brightness(1.2); }

#intro-screen {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    cursor: pointer;
    transition: opacity 1.2s ease-in-out;
    overflow: hidden;
}

.luz-suave-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(241, 196, 15, 0.3) 0%, rgba(230, 126, 34, 0.15) 45%, transparent 70%);
    border-radius: 50%;
    filter: blur(35px);
    z-index: 1;
    animation: respiracionLenta 4.5s ease-in-out infinite alternate;
}

.img-intro-chica {
    position: relative;
    z-index: 3;
    max-width: 550px;
    width: 55%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(241, 196, 15, 0.4));
    animation: zoomCreciendo 3.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.overlay-intro {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.15);
    z-index: 4;
}

.contenido-intro {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 40px;
}

.texto-continuar {
    font-size: 2.2rem;
    color: #ffffff;
    animation: parpadeo 1.5s ease-in-out infinite;
}

.derechos-pochin {
    margin-top: 10px;
    font-size: 0.95rem;
    color: #aaaaaa;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px #000;
}

#video-intro-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000000;
    z-index: 48;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
    overflow: hidden;
}

#player-intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#btn-saltar-video {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 50;
    padding: 10px 22px;
    background: rgba(0, 0, 0, 0.75);
    border: 3px solid #f1c40f;
    border-radius: 8px;
    color: #f1c40f;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1rem;
    font-style: italic;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.9);
    text-shadow: 2px 2px 0px #000;
    transition: all 0.2s ease;
}

#btn-saltar-video:hover {
    background: #f1c40f;
    color: #000000;
    transform: scale(1.08);
}

#menu-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; /* 👈 Esto centra todo lo que esté adentro horizontalmente */
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    pointer-events: none;
    overflow: hidden;
    background-color: #050505;
}

#menu-screen::before {
    content: '';
    position: absolute;
    top: -10%; left: -10%;
    width: 120%; height: 120%;
    background-image: url('../img/logo_titulo.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: blur(25px) brightness(0.35) contrast(1.2);
    z-index: 0;
    pointer-events: none;
}

.glow-bg {
    position: absolute;
    top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    width: 85cqw; height: 60cqh;
    background: radial-gradient(circle, rgba(241,196,15,0.22) 0%, rgba(46,204,113,0.1) 45%, rgba(0,0,0,0) 75%);
    border-radius: 50%;
    z-index: 1;
    animation: latidoGlow 4s ease-in-out infinite;
}

.logo-trucarcho {
    position: absolute;
    top: 10%;                      /* 👈 Casi al borde superior para aprovechar cada centímetro */
    left: 0;
    right: 0;
    margin: 0 auto;               
    transform: none;              
    z-index: 2;
    width: 98%;                   /* 👈 Ocupa casi todo el ancho disponible */
    max-width: 1650px;            /* 👈 Máximo expandido para monitores grandes */
    max-height: 80cqh;             /* 👈 Altura generosa para que quede imponente */
    object-fit: contain;
    filter: drop-shadow(0 0 20px #000000) drop-shadow(0 0 40px #000000) drop-shadow(0 25px 45px rgba(0,0,0,0.95));
    animation: flotarYLatir 4s ease-in-out infinite;
}

#capa-gritos-loop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.grito-texto {
    position: absolute;
    white-space: nowrap;
    opacity: 0;
}

.grito-corto { font-size: 6.8rem; }
.grito-medio { font-size: 5.2rem; }
.grito-largo { font-size: 3.5rem; }

.pos-izq-abajo { left: 6%; top: 52%; color: #2ecc71; }
.pos-der-arriba { right: 6%; top: 22%; color: #ff2a2a; }
.pos-izq-arriba { left: 6%; top: 22%; color: #f1c40f; }
.pos-der-abajo  { right: 6%; top: 52%; color: #b055ff; }

.anim-izq { animation: impactoIzq 1.1s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards; }
.anim-der { animation: impactoDer 1.1s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards; }

.contenedor-mazo {
    position: relative;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-bottom: 25px;
}

.img-mazo-btn {
    max-width: 230px;
    width: 25cqw;
    height: auto;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.9)) drop-shadow(0 0 15px rgba(241, 196, 15, 0.6));
    transition: all 0.25s ease;
}

.contenedor-mazo:hover .img-mazo-btn {
    transform: translateY(-12px) scale(1.12);
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.95)) drop-shadow(0 0 30px rgba(241, 196, 15, 1));
}

.texto-instruccion {
    margin-top: 8px;
    font-size: 1.6rem;
    color: #f1c40f;
    animation: parpadeo 2s ease-in-out infinite;
}

#lore-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100cqw; height: 100cqh;
    z-index: 30;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease-in-out;
    background: #000000;
}

.img-pancarta-ia {
    width: 95cqw;
    height: 85cqh;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 0 40px rgba(0,0,0,1));
}

.btn-pancarta-continuar {
    position: absolute;
    bottom: 25px;
    padding: 18px 50px;
    background: linear-gradient(180deg, #f39c12 0%, #d35400 100%);
    border: 4px solid #ffffff;
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.6rem;
    font-style: italic;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.6), 0 8px 0 #7e3200, 0 15px 35px rgba(0,0,0,0.95);
    text-shadow: 3px 3px 0px #000;
    transition: all 0.1s ease;
    z-index: 35;
    animation: parpadeoBoton 1.2s ease-in-out infinite alternate;
}

#cinematica-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100cqw; height: 100cqh;
    z-index: 45;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    cursor: pointer;
    overflow: hidden;
    background-color: #000000;
}

#cinematica-screen::before {
    content: '';
    position: absolute;
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 100%), url('../img/escenarios/fondo_cinematica.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    animation: movimientoFondoCinematica 18s ease-in-out infinite alternate;
}

#btn-skip-cinematica {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 50;
    padding: 8px 18px;
    background: rgba(0, 0, 0, 0.85);
    border: 3px solid #f1c40f;
    border-radius: 8px;
    color: #f1c40f;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.9);
    text-shadow: 2px 2px 0px #000;
    transition: all 0.2s ease;
}

#btn-skip-cinematica:hover {
    background: #f1c40f;
    color: #000000;
    transform: scale(1.08);
}

.flash-impact-frame {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff;
    z-index: 60;
    pointer-events: none;
    animation: animImpactFrame 0.12s steps(2) forwards;
}

@keyframes animImpactFrame {
    0% { opacity: 1; filter: invert(0); }
    50% { opacity: 0.8; filter: invert(1); }
    100% { opacity: 0; }
}

.hoja-comic-esquema {
    position: relative;
    z-index: 10;
    width: 90cqw;
    height: 80cqh;
}

.vineta-esquema {
    position: absolute;
    background: #0a0a0a;
    border: 4px solid #f1c40f;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.89, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.95);
}

.vineta-pos-1 {
    width: 44cqw; height: 42cqh; /* 👈 Agrandadas manteniendo posición */
    top: 2%; left: 3%;
    transform: rotate(-3deg) scale(0.6);
    z-index: 11;
}

.vineta-pos-2 {
    width: 50cqw; height: 46cqh; /* 👈 Agrandadas manteniendo posición */
    top: 4%; right: 3%;
    transform: rotate(2deg) scale(0.6);
    z-index: 12;
}

.vineta-pos-3 {
    width: 54cqw; height: 50cqh; /* 👈 Agrandadas manteniendo posición */
    bottom: 6%; left: 5%;
    transform: rotate(-2deg) scale(0.6);
    z-index: 13;
}

.vineta-pos-4 {
    width: 70cqw; height: 64cqh; /* 👈 Cuadro central más grande y protagonista */
    top: 45%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 14;
}

.vineta-esquema.visible {
    opacity: 1;
}

.vineta-esquema.visible.activa {
    border-color: #ffffff;
    filter: brightness(1.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.98), 0 0 30px rgba(241, 196, 15, 0.8);
}

.vineta-pos-1.visible.activa { transform: rotate(-3deg) scale(1); }
.vineta-pos-2.visible.activa { transform: rotate(2deg) scale(1); }
.vineta-pos-3.visible.activa { transform: rotate(-2deg) scale(1); }
.vineta-pos-4.visible.activa { transform: translate(-50%, -50%) scale(1); }

.vineta-esquema.fichas-atras {
    filter: brightness(0.5) grayscale(0.2);
    border-color: #d4af37;
}

.vineta-pos-1.fichas-atras { transform: rotate(-3deg) scale(0.95); }
.vineta-pos-2.fichas-atras { transform: rotate(2deg) scale(0.95); }
.vineta-pos-3.fichas-atras { transform: rotate(-2deg) scale(0.95); }
.vineta-pos-4.fichas-atras { transform: translate(-50%, -50%) scale(0.95); }

.img-vineta {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caja-texto-flotante-pantalla {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 950px;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(5px);
    border: 3px solid #f1c40f;
    border-radius: 12px;
    padding: 12px 25px;
    text-align: center;
    z-index: 40;
    box-shadow: 0 10px 30px rgba(0,0,0,0.95);
}

.txt-historieta {
    font-size: 1.3rem;
    color: #ffffff;
    line-height: 1.35;
}

.indicador-avanzar {
    margin-top: 15px;
    position: relative;
    z-index: 10;
    font-size: 1.1rem;
    color: #f1c40f;
    animation: parpadeo 1.5s ease-in-out infinite;
}

#puerta-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100cqw; height: 100cqh;
    z-index: 22;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    background-color: #000000;
}

#puerta-screen::before {
    content: '';
    position: absolute;
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.75) 100%), url('../img/escenarios/fondo_puerta.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    animation: movimientoFondoPuerta 16s ease-in-out infinite alternate;
}

.img-puerta-grande {
    position: relative;
    z-index: 2;
    width: 98cqw;
    height: 94cqh;
    object-fit: contain;
    filter: drop-shadow(0 0 45px rgba(0, 0, 0, 0.98));
    transition: transform 0.3s ease;
}

.img-puerta-grande:hover {
    transform: scale(1.02);
}

#bienvenida-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100cqw; height: 100cqh;
    z-index: 22;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease-in-out;
    background-color: #000000;
    overflow: hidden;
}

#bienvenida-screen::before {
    content: '';
    position: absolute;
    top: -5%; left: -5%;
    width: 110%; height: 110%;
    /* desenfoque y oscurecido "horneados" en la imagen (fondo_bienvenida.webp, 960 px): sin filter sobre el fondo en movimiento */
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.85) 100%), url('../img/escenarios/fondo_bienvenida.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    animation: movimientoFondoBarman 20s ease-in-out infinite alternate;
}


.img-escenario-marcado {
    position: relative;
    z-index: 2;
    width: 95cqw;
    height: 88cqh;
    object-fit: contain;
    filter: drop-shadow(0 0 35px rgba(0,0,0,0.95));
}

.cartel-instruccion-puerta {
    position: absolute;
    bottom: 35px;
    z-index: 3;
    font-size: 1.8rem;
    color: #f1c40f;
    animation: parpadeo 1.5s ease-in-out infinite;
}

.box-dialogo-rival-flotante {
    position: absolute;
    bottom: 6%;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 30;
    pointer-events: auto;
}

.texto-rival-dialogo-flotante {
    font-size: 1.9rem;
    color: #ffffff;
    line-height: 1.3;
}

.input-nombre-arcade {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.8rem;
    font-style: italic;
    padding: 12px 25px;
    width: 100%;
    max-width: 450px;
    text-align: center;
    background: rgba(0, 0, 0, 0.85);
    border: 4px solid #f1c40f;
    color: #2ecc71;
    border-radius: 10px;
    outline: none;
    text-transform: uppercase;
    box-shadow: 0 10px 25px rgba(0,0,0,0.9), inset 0 0 12px rgba(241, 196, 15, 0.4);
    text-shadow: 3px 3px 0px #000;
}

.btn-confirmar-nombre {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.3rem;
    font-style: italic;
    padding: 14px 35px;
    background: linear-gradient(180deg, #f39c12 0%, #d35400 100%);
    border: 3px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 6px 0 #000, 0 10px 20px rgba(0,0,0,0.8);
    text-shadow: 2px 2px 0px #000;
    transition: transform 0.15s ease;
}

.btn-confirmar-nombre:hover { transform: translateY(-3px); filter: brightness(1.2); }

#mesa-juego-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 20;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease-in-out;
    background-color: #000000;
    /* [2026-11-01] Fondo del nivel 1 SIN personajes (ni el Gordo, ni el Gangoso, ni el Ciruja): los tres son capas propias animadas
       (js/datos/vida.js, tipo 'personaje'). Los fondos anteriores siguen en el proyecto (level 1 ciruja.jpg, level 1 limpio.jpg). */
    background-image: url('../img/escenarios/level 1 escenario corregido.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    overflow: hidden;
}

#efecto-luz-lampara {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 12%, rgba(255, 230, 150, 0.28) 0%, rgba(255, 200, 100, 0.08) 38%, transparent 65%);
    z-index: 21;
    pointer-events: none;
    animation: titileoLamparaDisperso 28s infinite ease-in-out;
}

#efecto-parpadeo-ciruja {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('../img/escenarios/level 1 ciruja ojos.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 21;
    pointer-events: none;
    opacity: 0;
    animation: parpadeoLocoCiruja 10s infinite;
}

#efecto-parpadeo-rival-izq {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('../img/escenarios/level 1 rival_izq ojos.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 21;
    pointer-events: none;
    opacity: 0;
    animation: parpadeoRivalIzq 7.5s infinite;
}

#efecto-parpadeo-rival-der {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('../img/escenarios/level 1 rival_der ojos.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 21;
    pointer-events: none;
    opacity: 0;
    animation: parpadeoRivalDer 11.5s infinite;
}

#capa-boca-ciruja {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 23;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}

#capa-boca-ciruja.activo {
    opacity: 1;
}

#capa-senia-ciruja {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 22;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

#capa-senia-ciruja.activo {
    opacity: 1;
}

#contenedor-eventos-bar {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 65;
    pointer-events: none;
    overflow: hidden;
}

#zona-rocola-clic {
    position: absolute;
    top: 15%;
    right: 29%;
    width: 90px;
    height: 150px;
    z-index: 35;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 8px;
}

#zona-rocola-clic:hover::after {
    content: "🎵 ROCOLA";
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 15, 0.95);
    border: 2px solid #f1c40f;
    color: #f1c40f;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 0.75rem;
    font-style: italic;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.9);
    text-shadow: 1px 1px 0px #000;
    pointer-events: none;
    z-index: 100;
    animation: zoomCreciendo 0.15s ease-out forwards;
}

#menu-rocola-popup {
    position: absolute;
    top: 32%;
    right: 25%;
    width: 240px;
    background: rgba(10, 10, 15, 0.95);
    border: 3px solid #f1c40f;
    border-radius: 12px;
    padding: 15px;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.95), 0 0 20px rgba(241, 196, 15, 0.4);
}

#menu-rocola-popup.activo {
    display: flex;
    animation: zoomCreciendo 0.2s cubic-bezier(0.175, 0.89, 0.32, 1.275) forwards;
}

.rocola-titulo {
    font-size: 0.95rem;
    color: #f1c40f;
    text-align: center;
    margin-bottom: 5px;
    text-shadow: 1px 1px 0px #000;
}

.btn-rocola-track {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 0.85rem;
    font-style: italic;
    padding: 8px;
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    border: 2px solid #ffffff;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    text-align: left;
    text-transform: uppercase;
    box-shadow: 0 3px 0 #000;
    transition: all 0.1s ease;
}

.btn-rocola-track:hover {
    filter: brightness(1.2);
    transform: scale(1.03);
}

.btn-rocola-sin-musica {
    background: linear-gradient(180deg, #7f8c8d 0%, #34495e 100%) !important;
}

.btn-rocola-cerrar {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 0.75rem;
    padding: 6px;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border: 2px solid #ffffff;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
    box-shadow: 0 3px 0 #000;
}

.evento-bar-texto {
    position: absolute;
    top: 12%;
    left: 12%;
    font-size: 1.6rem !important;
    color: #ff5577;
    white-space: nowrap;
    opacity: 0;
    z-index: 70 !important;
    animation: impactoEventoBar 2.8s cubic-bezier(0.175, 0.89, 0.32, 1.275) forwards;
}

#marcador-fosforos-lateral {
    position: absolute;
    top: 4%; left: 2%;
    z-index: 45;
    width: 200px;
    height: 380px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.7);
}

.header-anotador {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 2px solid rgba(241, 196, 15, 0.8);
    padding-bottom: 6px;
    filter: drop-shadow(2px 2px 4px #000);
}

.titulo-anotador {
    font-size: 0.9rem;
    color: #f1c40f;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cuerpo-anotador {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    padding: 6px 0;
}

.linea-divisoria-vertical {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
    z-index: 1;
}

.bloque-malas, .bloque-buenas {
    position: relative;
    display: flex;
    width: 100%;
    flex: 1;
}

.linea-buenas-horizontal-completa {
    width: 100%;
    height: 2px;
    background-color: rgba(241, 196, 15, 0.8);
    box-shadow: 0 0 4px rgba(241, 196, 15, 0.4);
    margin: 4px 0;
    z-index: 5;
}

.columna-puntos {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    z-index: 2;
    height: 100%;
}

.caja-fosforo-slot {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caja-fosforo-svg {
    width: 36px;
    height: 36px;
}

.limite-chico-30 {
    width: 100%;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    font-size: 0.7rem;
    color: #e74c3c;
    letter-spacing: 1px;
}

#panel-acciones-truco {
    position: absolute;
    bottom: 12%;
    right: 2.5%;
    z-index: 55;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 155px;
}

.btn-accion-arcade {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.05rem;
    font-style: italic;
    padding: 12px 8px;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 12px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 5px 0 rgba(0,0,0,0.85), inset 0 2px 0 rgba(255,255,255,0.4);
    text-shadow: 2px 2px 0px #000;
    transition: all 0.15s ease;
    text-align: center;
    width: 100%;
}

.btn-accion-arcade:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.2);
}

.btn-accion-arcade:disabled {
    opacity: 0.35;
    filter: grayscale(0.8);
    cursor: not-allowed;
    border-color: #888;
}

.btn-truco   { background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%); }
.btn-envido  { background: linear-gradient(180deg, #f1c40f 0%, #d35400 100%); }
.btn-flor    { background: linear-gradient(180deg, #9b59b6 0%, #8e44ad 100%); }
.btn-ciruja  { background: linear-gradient(180deg, #3498db 0%, #2980b9 100%); }
.btn-quiero  { background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%); }
.btn-noquiero{ background: linear-gradient(180deg, #e74c3c 0%, #95a5a6 100%); }
.btn-mazo    { background: linear-gradient(180deg, #7f8c8d 0%, #34495e 100%); }

#contenedor-timer-canto {
    position: absolute;
    bottom: 27.5%;
    right: 2.5%;
    width: 155px;
    height: 10px;
    background: rgba(0,0,0,0.8);
    border: 2px solid #ffffff;
    border-radius: 6px;
    overflow: hidden;
    display: none;
    z-index: 60;
}

#barra-progreso-timer {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #2ecc71 0%, #e74c3c 100%);
    transition: width 0.1s linear;
}

#contenedor-fin-ronda-accion {
    position: absolute;
    top: 75%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(10, 10, 10, 0.92);
    border: 3px solid #f1c40f;
    border-radius: 14px;
    padding: 15px 30px;
    box-shadow: 0 0 35px rgba(0,0,0,0.95);
    transition: transform 0.25s cubic-bezier(0.175, 0.89, 0.32, 1.275);
}

#contenedor-fin-ronda-accion.activo {
    transform: translate(-50%, -50%) scale(1);
}

.btn-reclamo-arcade {
    padding: 10px 18px;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    border-radius: 8px;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 4px 0 #000;
}

.btn-nueva-ronda-principal { background: linear-gradient(180deg, #2ecc71 0%, #1e8449 100%); font-size: 1.15rem; }

.barra-tiempo-reclamo-cont {
    width: 180px;
    height: 8px;
    background: #222;
    border-radius: 5px;
    overflow: hidden;
    border: 1.5px solid #fff;
}

#barra-progreso-reclamo {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #2ecc71 0%, #f1c40f 50%, #e74c3c 100%);
    transition: width 0.1s linear;
}


/* Animación de caída y rebote del mazo al depositarse en la mesa */
@keyframes mazoDepositado {
    0% {
        transform: translateY(-60px) scale(0.4);
        opacity: 0;
    }
    55% {
        transform: translateY(10px) scale(1.12);
        opacity: 1;
    }
    75% {
        transform: translateY(-6px) scale(0.94);
    }
    90% {
        transform: translateY(3px) scale(1.02);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.badge-mano-img {
    position: absolute;
    width: 95px;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.95)) drop-shadow(0 0 12px rgba(241, 196, 15, 0.8));
    z-index: 15;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.89, 0.32, 1.275);
    /* 👈 Acá aplicamos la animación cada vez que el mazo se hace visible en la mesa */
    animation: mazoDepositado 0.45s cubic-bezier(0.175, 0.89, 0.32, 1.275) forwards;
}

.badge-mano-img:hover {
    transform: scale(1.18) !important; /* 👈 Forzamos que el hover gane sobre el estado de la animación */
}

.mano-pos-jugador { bottom: 2%; left: 28%; width: 100px; } 
.mano-pos-compa    { top: 47%; left: 37%; z-index: 20; } /* [2026-11-01] antes top 28%: quedaba flotando en el aire; ahora sobre el borde de la mesa, junto a las manos del Ciruja. [2026-11-06] z 20: por encima de la capa de personajes (19); en el nivel 4 el cuerpo del Profe trae un pedazo de mesa que lo tapaba a medias */
/* [2026-11-13] nivel 1 (el bar): el mazo de los rivales caía sobre la botella y el cenicero del Gordo y sobre la mano del Gangoso; ahora sobre la madera, al lado de cada uno y fuera de las pilas de cartas */
.mano-pos-rival1   { top: 72.6%; left: 30.8%; }
.mano-pos-rival2   { top: 72.6%; left: 64.6%; right: auto; }

#capa-reparto-anim {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 18;
}

.carta-reparto {
    position: absolute;
    width: 72px;
    height: 108px;
    background: url('../img/cartas/lomo.png') center / cover;
    border: 2px solid #ffffff;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.75);
    will-change: transform, opacity;
    pointer-events: none;
}

.carta-volando {
    position: absolute;
    width: 95px;
    height: 142px;
    background-image: url('../img/cartas/lomo.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #ffffff;
    border-radius: 6px;
    opacity: 1 !important;
    z-index: 18;
    box-shadow: 0 10px 20px rgba(0,0,0,0.85);
    transition: all 0.3s ease-out;
}

#globo-dialogo-ciruja {
    position: absolute;
    top: 6%; left: 56%;
    transform: scale(0);
    transform-origin: bottom left;
    background: #ffffff;
    color: #1a1a1a;
    border: 3px solid #000000;
    border-radius: 12px;
    padding: 12px 18px;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.3;
    max-width: 320px;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.8);
    z-index: 40;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.89, 0.32, 1.275);
}

#globo-dialogo-ciruja::after {
    content: ''; position: absolute; bottom: -14px; left: 20px;
    border-width: 14px 12px 0 0; border-style: solid;
    border-color: #ffffff transparent transparent transparent; display: block; width: 0;
}

#globo-dialogo-ciruja::before {
    content: ''; position: absolute; bottom: -18px; left: 18px;
    border-width: 16px 14px 0 0; border-style: solid;
    border-color: #000000 transparent transparent transparent; display: block; width: 0;
}

#globo-dialogo-ciruja.activo { transform: scale(1); }

#globo-pensamiento-jugador {
    position: absolute;
    bottom: 25%;
    left: 20%;
    transform: scale(0);
    transform-origin: bottom right;
    background: #2b2b2b;
    color: #f1c40f;
    border: 3px solid #f1c40f;
    border-radius: 18px;
    padding: 12px 20px;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.3;
    max-width: 340px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.9);
    z-index: 60;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.175, 0.89, 0.32, 1.275);
}

#globo-pensamiento-jugador.activo { transform: scale(1); }

#tapete-centro {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 20;
    pointer-events: none;
}

.casilla-mesa {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 270px;
    height: 190px;
    z-index: 22;
}

#casilla-compa   { top: 52%; left: 50%; transform: translate(-50%, -50%); }
#casilla-jugador { top: 74%; left: 50%; transform: translate(-50%, -50%); }
#casilla-rival1  { top: 62%; left: 33%; transform: translate(-50%, -50%); }
#casilla-rival2  { top: 62%; left: 67%; transform: translate(-50%, -50%); }

#casilla-rival1 .carta-placeholder,
#casilla-rival2 .carta-placeholder {
    transform: rotate(0deg); /* 👈 Las dejamos en vertical */
}

/* [2026-11-12] Nivel 4 (mesa agrandada del potrero): las cuatro pilas de cartas jugadas caen dentro de la mesa y sin pisarse.
   Cada carta de la pila se corre 38 px a la derecha y 19 abajo, así que los rivales quedan simétricos (centro de la pila a ±270 px del medio
   en 1920), el Ciruja arriba apoyado en el borde de atrás y el jugador abajo; la pila del rival 2 ya no se sale por el costado ni tapa el
   parlante y el vaso. */
/* [2026-11-12] el reparto (cartas que vuelan del mazo) iba por debajo de la escena del nivel 4 (capa de vida, z 19, con fondo y mesa
   opacos) y no se veía: sube por encima de la escena y por debajo de las cartas jugadas */
.mesa-nivel-4 #capa-reparto-anim { z-index: 20; }
.mesa-nivel-4 #casilla-compa   { top: 56%; left: 50%; }
.mesa-nivel-4 #casilla-jugador { top: 75%; left: 50%; }
.mesa-nivel-4 #casilla-rival1  { top: 64%; left: 34%; }
.mesa-nivel-4 #casilla-rival2  { top: 64%; left: 62%; }

/* [2026-11-12] Nivel 5 (la terminal): la mesa empieza en y 590 y termina en y 866 (el frente de la imagen del autor). Las pilas de los rivales
   van como en el nivel 4 (simétricas, lejos de los antebrazos del chofer y del oficial); la del Ciruja baja con él y la del jugador queda donde estaba. */
.mesa-nivel-5 #casilla-compa   { top: 50%; left: 50%; }   /* [2026-11-12] sube del 56 al 50 %: con la mesa nueva (borde de atrás en y 485) la pila del Ciruja ya no se junta con la del jugador */
.mesa-nivel-5 #casilla-jugador { top: 75%; left: 50%; }
.mesa-nivel-5 #casilla-rival1  { top: 64%; left: 34%; }
.mesa-nivel-5 #casilla-rival2  { top: 64%; left: 62%; }
.mesa-nivel-5 #capa-reparto-anim { z-index: 20; }
/* [2026-11-13] el mazo (badge de quién es mano) iba por debajo de la escena de vida (z 19, con fondo y mesa opacos) y no se veía en los niveles 4 y 5 */
.mesa-nivel-4 #badge-mano-indicador,
.mesa-nivel-5 #badge-mano-indicador { z-index: 20; }
/* [2026-11-13] nivel 5: el mazo de los rivales caía sobre el antebrazo; baja a la mesa, debajo de sus manos */
.mesa-nivel-5 .mano-pos-rival1 { top: 79%; left: 30%; }
.mesa-nivel-5 .mano-pos-rival2 { top: 79%; right: 29%; }
/* [2026-11-13] Nivel 6 (el After, discoteca; provisorio): la mesa empieza en y 520 (borde de atrás) y llega a y ≈ 1000 con los costados abiertos (x 635..1285 atrás, 300..1650 abajo).
   Pilas de cartas jugadas: rivales simétricos dentro de la mesa, el Ciruja apoyado en el borde de atrás y el jugador abajo. */
.mesa-nivel-6 #casilla-compa   { top: 56%; left: 50%; }
.mesa-nivel-6 #casilla-jugador { top: 77%; left: 50%; }
.mesa-nivel-6 #casilla-rival1  { top: 66%; left: 36%; }
.mesa-nivel-6 #casilla-rival2  { top: 66%; left: 62%; }
.mesa-nivel-6 #capa-reparto-anim { z-index: 20; }
.mesa-nivel-6 #badge-mano-indicador { z-index: 20; }
.mesa-nivel-6 .mano-pos-rival1 { top: 72%; left: 29%; }
.mesa-nivel-6 .mano-pos-rival2 { top: 72%; left: 69%; right: auto; }
/* [2026-11-13] revisión de la posición del mazo junto a los rivales en todos los niveles: sobre la mesa, sin pisar manos, objetos ni pilas de cartas jugadas */
/* (el mazo de cada rival va pegado a su mano, del lado de su costado de la mesa, y no hacia el centro donde se confunde con el del jugador) */
.mesa-nivel-2 .mano-pos-rival1 { top: 70.4%; left: 29.8%; }
.mesa-nivel-2 .mano-pos-rival2 { top: 70.4%; left: 64.6%; right: auto; }
.mesa-nivel-3 .mano-pos-rival1 { top: 68.9%; left: 31.9%; }
.mesa-nivel-3 .mano-pos-rival2 { top: 69.6%; left: 64.6%; right: auto; }
.mesa-nivel-3 .mano-pos-compa { top: 49%; }
.mesa-nivel-4 .mano-pos-rival1 { top: 71.5%; left: 31.9%; }
.mesa-nivel-4 .mano-pos-rival2 { top: 71.5%; left: 63.1%; right: auto; }
.mesa-nivel-7 .mano-pos-rival1 { top: 64.1%; left: 33.3%; }
.mesa-nivel-7 .mano-pos-rival2 { top: 64.1%; left: 62.1%; right: auto; }
/* el nivel 5 usa right: que el left de arriba no lo pise */
.mesa-nivel-5 .mano-pos-rival2 { left: auto; }

/* ========================================== */
/* ABANICO DINÁMICO SEGÚN CANTIDAD DE CARTAS  */
/* ========================================== */
#contenedor-mano-jugador {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 25;
    perspective: 1000px;
}

/* Base común para todas las cartas en mano */
#contenedor-mano-jugador .carta-placeholder {
    width: 110px;
    height: 166px;
    transform-origin: bottom center;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
}


/* --- CASO 1: TÉNÉS 3 CARTAS (Abanico Completo) --- */
#contenedor-mano-jugador[data-cartas="3"] .carta-placeholder:nth-child(1) {
    transform: rotate(-8deg) translateY(10px);
}
#contenedor-mano-jugador[data-cartas="3"] .carta-placeholder:nth-child(2) {
    transform: rotate(0deg) translateY(0px);
    z-index: 2;
}
#contenedor-mano-jugador[data-cartas="3"] .carta-placeholder:nth-child(3) {
    transform: rotate(8deg) translateY(10px);
}

/* Hover 3 cartas */
#contenedor-mano-jugador[data-cartas="3"] .carta-placeholder:nth-child(1):hover:not(.bloqueada-poker) {
    transform: translateY(-20px) scale(1.08) rotate(-2deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}
#contenedor-mano-jugador[data-cartas="3"] .carta-placeholder:nth-child(2):hover:not(.bloqueada-poker) {
    transform: translateY(-22px) scale(1.08) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}
#contenedor-mano-jugador[data-cartas="3"] .carta-placeholder:nth-child(3):hover:not(.bloqueada-poker) {
    transform: translateY(-20px) scale(1.08) rotate(2deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}


/* --- CASO 2: TE QUEDAN 2 CARTAS (Abanico más cerrado y centrado) --- */
#contenedor-mano-jugador[data-cartas="2"] .carta-placeholder:nth-child(1) {
    transform: rotate(-4deg) translateY(5px);
}
#contenedor-mano-jugador[data-cartas="2"] .carta-placeholder:nth-child(2) {
    transform: rotate(4deg) translateY(5px);
}

/* Hover 2 cartas */
#contenedor-mano-jugador[data-cartas="2"] .carta-placeholder:nth-child(1):hover:not(.bloqueada-poker) {
    transform: translateY(-20px) scale(1.08) rotate(-1deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}
#contenedor-mano-jugador[data-cartas="2"] .carta-placeholder:nth-child(2):hover:not(.bloqueada-poker) {
    transform: translateY(-20px) scale(1.08) rotate(1deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}


/* --- CASO 3: TE QUEDA 1 SOLA CARTA (Firme y centrada) --- */
#contenedor-mano-jugador[data-cartas="1"] .carta-placeholder:nth-child(1) {
    transform: rotate(0deg) translateY(0px);
}

/* Hover 1 carta */
#contenedor-mano-jugador[data-cartas="1"] .carta-placeholder:nth-child(1):hover:not(.bloqueada-poker) {
    transform: translateY(-22px) scale(1.08) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}

#contenedor-mano-jugador .carta-placeholder:nth-child(2):hover:not(.bloqueada-poker) {
    transform: translateY(-22px) scale(1.08) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}

#contenedor-mano-jugador .carta-placeholder:nth-child(3):hover:not(.bloqueada-poker) {
    transform: translateY(-20px) scale(1.08) rotate(2deg) !important;
    z-index: 10;
    box-shadow: 0 22px 40px rgba(0,0,0,1), 0 0 25px rgba(241, 196, 15, 0.9);
}

.carta-placeholder {
    width: 105px;  /* 👈 Pasó de 100px a 105px (+5%) */
    height: 158px; /* 👈 Pasó de 150px a 158px (+5%) */
    border-radius: 7% / 5%;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.9);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
    position: relative;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: flat;
}


/* [2026-11-08] cartas como las reales: llenan toda la carta (sin franjas transparentes, aunque la imagen
   tenga otra proporción) y tienen las puntas redondeadas */
.carta-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7% / 5%;
    image-rendering: high-quality; /* Ayuda a que el navegador no difumine los bordes */
}

#contenedor-mano-jugador .carta-placeholder {
    width: 110px;  /* 👈 Pasó de 105px a 110px (+5%) */
    height: 166px; /* 👈 Pasó de 158px a 166px (+5%) */
}




.particula-bum {
    position: absolute;
    font-size: 4rem;
    color: #ff3300;
    pointer-events: none;
    z-index: 70;
    animation: animBum 1.2s cubic-bezier(0.175, 0.89, 0.32, 1.275) forwards;
}

.onda-mesa {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 8px solid #f1c40f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 69;
    animation: expansionOnda 1.1s ease-out forwards;
}

.carta-ganadora {
    filter: none !important;
    box-shadow: none !important;
}


.carta-ganadora-pasada {
    /* [2026-11-07] pedido del autor: la ganadora ya no se agranda (era "medio pobre"); ahora da un saltito al ganar (js/ui/mano_jugador.js, saltito) */
    transform: translateZ(0) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.9) !important;
    border: none !important; /* 👈 Sin recuadro amarillo */
    border-radius: 6px !important;
    opacity: 1.0 !important;
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    animation: none !important;
}

/* Forzar que la imagen interna de la carta no pierda nitidez */
.carta-ganadora-pasada img {
    filter: none !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}




.barra-inferior {
    position: absolute;
    bottom: 12px; right: 20px;
    z-index: 60;
    display: flex; align-items: center; gap: 15px;
}

.version { color: #888; font-size: 0.85rem; text-shadow: 1px 1px 2px #000; }

.contenedor-audio-control {
    position: relative;
    display: flex;
    align-items: center;
}

#btn-musica-icono {
    background: none; border: none; font-size: 1.4rem; cursor: pointer;
    opacity: 0.75; transition: transform 0.2s ease, opacity 0.2s ease;
    filter: drop-shadow(0 2px 4px #000);
}

#btn-musica-icono:hover { opacity: 1; transform: scale(1.2); }

.slider-volumen-desplegable {
    position: absolute;
    bottom: 45px;
    right: 0;
    width: 120px;
    display: none; /* Arranca oculto */
    background: rgba(0, 0, 0, 0.9);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #f1c40f;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    z-index: 100;
}

/* Se muestra cuando JavaScript le agrega la clase .activo */
.slider-volumen-desplegable.activo {
    display: block;
}

.slider-volumen-desplegable input[type=range] {
    width: 100%;
    accent-color: #f1c40f;
    cursor: pointer;
}

#panel-ordenes-ciruja-mesa {
    position: absolute;
    top: 32%;
    left: 63%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 85;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(10, 10, 15, 0.92);
    border: 2px solid #3498db;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.6), 0 6px 12px rgba(0,0,0,0.8);
    transition: transform 0.2s cubic-bezier(0.175, 0.89, 0.32, 1.275);
}

#panel-ordenes-ciruja-mesa.activo {
    transform: translate(-50%, -50%) scale(1);
}

.btn-orden-mesa {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 0.75rem;
    font-style: italic;
    padding: 6px 10px;
    color: #ffffff;
    border: 1.5px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 3px 0 rgba(0,0,0,0.8);
    text-shadow: 1px 1px 0px #000;
    white-space: nowrap;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.btn-orden-mesa:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.25);
}

.btn-orden-mesa:disabled {
    opacity: 0.3;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.btn-juga { background: linear-gradient(180deg, #2980b9 0%, #34495e 100%); }
.btn-pone { background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%); }
.btn-veni { background: linear-gradient(180deg, #e67e22 0%, #d35400 100%); }
.btn-tanto { background: linear-gradient(180deg, #f1c40f 0%, #d35400 100%); }
.btn-cantatruco { background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%); }

@keyframes fuegoMalditoAnim {
    0% { box-shadow: 0 0 15px #e74c3c, inset 0 0 10px #9b59b6; filter: hue-rotate(0deg) brightness(1); }
    100% { box-shadow: 0 0 35px #8e44ad, 0 0 20px #e74c3c, inset 0 0 20px #8e44ad; filter: hue-rotate(40deg) brightness(1.2); }
}

@keyframes animBum {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-15deg); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(5deg); }
    80% { opacity: 1; transform: translate(-50%, -60%) scale(1.1) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -90%) scale(0.9) rotate(0deg); }
}

@keyframes expansionOnda {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

@keyframes temblorEspecial {
    10%, 90% { transform: translate3d(-4px, 0, 0) rotate(-1deg); }
    20%, 80% { transform: translate3d(6px, 0, 0) rotate(1.5deg); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0) rotate(-2deg); }
    40%, 60% { transform: translate3d(8px, 0, 0) rotate(2deg); }
}

@keyframes temblorFuerte {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-12px, 10px); }
    40% { transform: translate(14px, -10px); }
    60% { transform: translate(-10px, 12px); }
    80% { transform: translate(10px, -8px); }
    100% { transform: translate(0, 0); }
}

@keyframes rastroEnvido {
    0% { filter: brightness(2.2) drop-shadow(0 0 40px #f1c40f); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

@keyframes impactoEventoBar {
    0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
    15% { opacity: 1; transform: scale(1.15) rotate(2deg); }
    25%, 80% { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

@keyframes latidoGanador {
    0% { box-shadow: 0 0 15px #f1c40f; }
    100% { box-shadow: 0 0 35px #f1c40f, 0 0 50px #e67e22; }
}

@keyframes tirarCartaAnim {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes parpadeoBoton {
    0% { filter: drop-shadow(0 0 10px rgba(241, 196, 15, 0.4)); }
    100% { filter: drop-shadow(0 0 25px rgba(241, 196, 15, 0.9)); }
}

@keyframes respiracionLenta {
    0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes zoomCreciendo {
    0% { transform: scale(0.25); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes impactoIzq {
    0% { opacity: 0; transform: translateX(-150px) scale(0.3) rotate(-15deg); }
    15% { opacity: 1; transform: translateX(0) scale(1.1) rotate(-4deg); }
    22% { transform: scale(1) rotate(-3deg); }
    25%, 75% { opacity: 1; transform: translate(2px, -2px) rotate(-3deg); }
    100% { opacity: 0; transform: translateY(-25px) scale(1.05) rotate(-3deg); }
}

@keyframes impactoDer {
    0% { opacity: 0; transform: translateX(150px) scale(0.3) rotate(15deg); }
    15% { opacity: 1; transform: translateX(0) scale(1.1) rotate(4deg); }
    22% { transform: scale(1) rotate(3deg); }
    25%, 75% { opacity: 1; transform: translate(-2px, 2px) rotate(3deg); }
    100% { opacity: 0; transform: translateY(-25px) scale(1.05) rotate(3deg); }
}

@keyframes flotarYLatir {
    0% { transform: translateY(0px) scale(1) rotate(-0.5deg); }
    50% { transform: translateY(-12px) scale(1.02) rotate(0.5deg); }
    100% { transform: translateY(0px) scale(1) rotate(-0.5deg); }
}

@keyframes latidoGlow {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.4; }
}

@keyframes parpadeo {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes girarLuzCelestial {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes desplegarAlaIzq {
    0% { transform: translateX(-150px) rotate(-45deg) scale(0.2); opacity: 0; }
    50% { opacity: 1; transform: translateX(-20px) rotate(10deg) scale(1.2); }
    100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes desplegarAlaDer {
    0% { transform: translateX(150px) rotate(45deg) scale(0.2); opacity: 0; }
    50% { opacity: 1; transform: translateX(20px) rotate(-10deg) scale(1.2); }
    100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes latidoCelestial {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 20px #f1c40f); }
    100% { transform: scale(1.08); filter: drop-shadow(0 0 50px #ffffff); }
}

@keyframes movimientoFondoCinematica {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, -1%); }
}

@keyframes movimientoFondoPuerta {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.08) translate(-1.5%, -1%); }
    100% { transform: scale(1.04) translate(1%, 0.8%); }
}

@keyframes movimientoFondoBarman {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.08) translate(-1%, -1%); }
    100% { transform: scale(1.03) translate(1%, 0.5%); }
}


@keyframes titileoLamparaDisperso {
    0%, 94%, 100% { opacity: 0.85; }
    95% { opacity: 0.3; }
    96% { opacity: 0.9; }
    97% { opacity: 0.4; }
    98% { opacity: 0.85; }
}

@keyframes parpadeoLocoCiruja {
    0%, 20%, 24%, 60%, 64%, 68%, 100% { opacity: 0; }
    21%, 23% { opacity: 1; }
    61%, 63% { opacity: 1; }
    65%, 67% { opacity: 1; }
}

@keyframes parpadeoRivalIzq {
    0%, 40%, 44%, 90%, 94%, 100% { opacity: 0; }
    41%, 43% { opacity: 1; }
    91%, 93% { opacity: 1; }
}

@keyframes parpadeoRivalDer {
    0%, 30%, 34%, 80%, 84%, 100% { opacity: 0; }
    31%, 33% { opacity: 1; }
    81%, 83% { opacity: 1; }
}

.carta-perdedora {
    /* [2026-11-07] pedido del autor: la perdedora queda como está (sin achicarse, oscurecerse ni ladearse); solo la ganadora da un saltito */
    transform: translateZ(0) !important;
    filter: none !important; /* 👈 Evitamos filtros que emborronen la imagen */
    -webkit-font-smoothing: antialiased;
    image-rendering: -webkit-optimize-contrast; /* 👈 Mantiene la nitidez al máximo absoluto */
    image-rendering: crisp-edges;
    transition: transform 0.2s ease, opacity 0.2s ease;
}


.carta-jugada-centro,
.carta-ganadora,
.carta-ganadora-pasada,
.carta-placeholder, 
.carta-img {
    opacity: 1 !important;
    filter: none !important;
}

.capa-eructo-oculta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.capa-eructo-oculta.activo {
    opacity: 1;
}

#capa-brillo-pelada {
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 999;
    transition: opacity 0.2s ease-in-out;
}

#capa-brillo-pelada.activo {
    opacity: 1;
}

#capa-evento-op {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/op.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 120;
    pointer-events: none;
    transform: translateX(100%);
    opacity: 1;
    transition: transform 0.25s cubic-bezier(0.175, 0.89, 0.32, 1.275);
}

#capa-evento-op.activo {
    transform: translateX(0);
}

/* [2026-11-13] los anteojos caen sobre los ojos del Ciruja: left / top / width los pone js/juego.js (dispararEventoAnteojosMeme) segun el nivel;
   la imagen es solo el recorte de los anteojos (antes una lamina de pantalla completa con los anteojos en el medio) */
#capa-evento-anteojos {
    position: absolute;
    left: 50%;
    top: -10%;
    width: 8.2%;
    aspect-ratio: 230 / 45;
    background-image: url('../img/anteojos_meme_recorte.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    z-index: 130;
    pointer-events: none;
    display: none;
    transform: translate(-50%, -50%);
}

/* [2026-11-13] mientras caen son esta capa (la mueve js/juego.js cuadro a cuadro); al calzar pasan a ser un hijo de la cabeza del Ciruja y la acompañan */
#capa-evento-anteojos.activo { display: block; }

.tg-anteojos-puestos {
    position: absolute;
    aspect-ratio: 230 / 45;
    background-image: url('../img/anteojos_meme_recorte.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: anteojosCalzan .18s ease-out;
}
@keyframes anteojosCalzan {
    0%   { transform: translate(-50%, -50%) scale(1.25); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* ========================================== */
/* EFECTO ESPECIAL MIAMI ( PANTALLA COMPLETA) */
/* ========================================== */
/* ========================================== */
/* EFECTO ESPECIAL MIAMI (ENTRADA Y BAILE)    */
/* ========================================== */
#capa-evento-miami {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 125;
    pointer-events: auto !important; /* 👈 Cambiado a 'auto' para aceptar clics */
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

#capa-evento-miami.activo {
    display: flex;
    pointer-events: auto !important;
}

.personaje-miami-bailando {
    position: absolute;
    width: 100%;
    height: 100%;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/efectos/miami.webp'); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(100%); /* Arranca abajo fuera de pantalla */
    animation: entradaYBaileMiami 2.5s ease-in-out forwards;
}

@keyframes entradaYBaileMiami {
    0% {
        transform: translateY(100%) translateX(0px) rotate(0deg);
    }
    20% {
        transform: translateY(0px) translateX(0px) rotate(-3deg); /* Sube y se centra */
    }
    30%, 90% {
        /* Aumentamos el vaivén horizontal de izquierda a derecha */
        transform: translateY(-10px) translateX(calc(sin(var(--t)) * 25px)) rotate(4deg);
    }
    100% {
        transform: translateY(100%) translateX(0px) rotate(0deg); /* Se baja al terminar */
    }
}
/* ========================================== */
/* CAPAS FLAMEANTES FIN DE CHICO (GANAR / PERDER) */
/* ========================================== */

.bandera-flameante-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/bandera.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: flagWaveBg 4s ease-in-out infinite;
    z-index: 1;
    opacity: 0.85;
}

.ricardo-flameante-fg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/ricardo.webp'); */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: flagWaveFg 2.6s ease-in-out infinite;
    z-index: 2;
}

/* Cambio automático de imágenes cuando entra la clase derrota-chico */
#overlay-fin-chico.derrota-chico .bandera-flameante-bg {
    background-image: url('../img/bandera_lost.webp') !important;
}

#overlay-fin-chico.derrota-chico .ricardo-flameante-fg {
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/ricardo_lost.webp') !important; */
}

/* Animaciones de flameo y flotación */
@keyframes flagWaveBg {
    0% { transform: perspective(700px) rotateY(0deg) skewY(0deg) scale(1); }
    50% { transform: perspective(700px) rotateY(8deg) skewY(2deg) scale(1.02); }
    100% { transform: perspective(700px) rotateY(0deg) skewY(0deg) scale(1); }
}

@keyframes flagWaveFg {
    0% { transform: translate(-50%, -50%) perspective(700px) rotateY(0deg) skewY(0deg) translateY(0px) scale(1); }
    25% { transform: translate(-50%, -50%) perspective(700px) rotateY(-10deg) skewY(-2.5deg) translateY(-15px) scale(1.04); }
    50% { transform: translate(-50%, -50%) perspective(700px) rotateY(0deg) skewY(0deg) translateY(8px) scale(1.08); }
    75% { transform: translate(-50%, -50%) perspective(700px) rotateY(10deg) skewY(2.5deg) translateY(-10px) scale(1.04); }
    100% { transform: translate(-50%, -50%) perspective(700px) rotateY(0deg) skewY(0deg) translateY(0px) scale(1); }
}

/* Asegurar que los textos, trofeos/calaveras y botones queden siempre al frente */
#overlay-fin-chico .luz-celestial-giratoria,
#overlay-fin-chico .contenedor-alas-buenas,
#overlay-fin-chico button {
    position: relative;
    z-index: 3;
}
/* CAPA DE MESSI FLAMEANTE PARA LAS BUENAS */
.messi-flameante-fg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/messi.webp'); */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: flagWaveFg 2.6s ease-in-out infinite;
    z-index: 2; /* Ubicado entre la luz de fondo y los textos */
}

/* Asegurar que los textos, trofeos y botones queden al frente de Messi */
#overlay-las-buenas .luz-celestial-giratoria,
#overlay-las-buenas .contenedor-alas-buenas,
#overlay-las-buenas button {
    position: relative;
    z-index: 3;
}
/* ========================================== */
/* OVERLAY RIVALES A LAS BUENAS (MESSI LOST)  */
/* ========================================== */

#overlay-buenas-rivales {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(180, 30, 30, 0.4) 0%, rgba(0, 0, 0, 0.96) 80%);
    z-index: 155;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    overflow: hidden;
}

#overlay-buenas-rivales.activo {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.messi-lost-flameante-fg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 85%; height: 85%;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/messi_lost.webp'); */
    background-size: contain; background-position: center; background-repeat: no-repeat;
    animation: flagWaveFg 2.6s ease-in-out infinite;
    z-index: 2;
}

.titulo-buenas-triste {
    font-size: 5.5rem;
    color: #e74c3c;
    letter-spacing: 5px;
    -webkit-text-stroke: 8px #000000;
    paint-order: stroke fill;
    filter: drop-shadow(0 0 30px #c0392b);
    animation: latidoCelestial 1.5s ease-in-out infinite alternate;
}

/* Asegurar que los elementos queden al frente */
#overlay-buenas-rivales .luz-celestial-giratoria,
#overlay-buenas-rivales .contenedor-alas-buenas,
#overlay-buenas-rivales button {
    position: relative;
    z-index: 3;
}
#overlay-buenas-rivales {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(180, 30, 30, 0.4) 0%, rgba(0, 0, 0, 0.96) 80%);
    z-index: 155;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    overflow: hidden;
}

#overlay-buenas-rivales.activo {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.messi-lost-flameante-fg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 85%; height: 85%;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/messi_lost.webp'); */
    background-size: contain; background-position: center; background-repeat: no-repeat;
    animation: flagWaveFg 2.6s ease-in-out infinite;
    z-index: 2;
}

.titulo-buenas-triste {
    font-size: 5.5rem;
    color: #e74c3c;
    letter-spacing: 5px;
    -webkit-text-stroke: 8px #000000;
    paint-order: stroke fill;
    filter: drop-shadow(0 0 30px #c0392b);
    animation: latidoCelestial 1.5s ease-in-out infinite alternate;
}

#overlay-buenas-rivales .luz-celestial-giratoria,
#overlay-buenas-rivales .contenedor-alas-buenas,
#overlay-buenas-rivales button {
    position: relative;
    z-index: 3;
}
#capa-evento-guillermo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/efectos/guillermo.webp'); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9999;
    display: none;
    pointer-events: none;
}

#capa-evento-guillermo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/efectos/guillermo.webp'); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9999;
    display: none;
    pointer-events: none;
}

#capa-evento-guillermo.activo {
    display: block;
    animation: guillermoDeslizamiento 3s ease-in-out forwards;
}

@keyframes guillermoDeslizamiento {
    0% {
        transform: translateX(-100%); /* Arranca completamente afuera a la izquierda */
    }
    15% {
        transform: translateX(0);     /* Llega al centro rápido y se frena a mostrarse */
    }
    85% {
        transform: translateX(0);     /* Se queda en pantalla disfrutando la paliza */
    }
    100% {
        transform: translateX(-100%); /* Se marcha deslizaréose hacia la izquierda */
    }
}
/* ==========================================
   ESTILOS DEFINITIVOS - EVENTO PELEA DE BAR (DIEGO Y SILLAS)
   ========================================== */
#capa-evento-peleabar {
    position: fixed;
    top: 0; left: 0;
    width: 100cqw; height: 100cqh;
    z-index: 9999;
    display: none;
    pointer-events: auto; /* 👈 Cambiado de none a auto para recibir clics */
    cursor: pointer;      /* 👈 Muestra la manito para indicar que se puede saltear */
    overflow: hidden;
}

#capa-evento-peleabar.activo {
    display: block;
}

/* DIEGO GIGANTE EN PRIMER PLANO */
.diego-frente {
    position: absolute;
    bottom: -700px;
    left: 50%;
    transform: translateX(-50%);
    width: 850px;
    height: 900px;
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/efectos/diego.webp'); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    animation: asomarDiego 4s ease forwards;
}
.diego-frente.retirando {
    animation: ocultarDiego 0.4s ease forwards !important;
}

@keyframes ocultarDiego {
    0% { bottom: 0px; }
    100% { bottom: -700px; }
}
@keyframes asomarDiego {
    0% { bottom: -700px; }
    20% { bottom: 0px; }
    80% { bottom: 0px; }
    100% { bottom: -700px; }
}

/* SILLAS GIGANTES ESPACIADAS Y VELOCIDAD JUSTA */
.silla {
    position: absolute;
    width: 220px;
    height: 220px;
    background-image: url('../img/efectos/sillas.webp'); /* 👈 Ajustá a 'img/...' si tu CSS está en la raíz */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
}

#capa-evento-peleabar.activo .silla-1 { animation: volarSillaA 1.2s ease-in-out 0.2s forwards; }
#capa-evento-peleabar.activo .silla-2 { animation: volarSillaB 1.1s ease-in-out 0.8s forwards; }
#capa-evento-peleabar.activo .silla-3 { animation: volarSillaC 1.3s ease-in-out 1.4s forwards; }
#capa-evento-peleabar.activo .silla-4 { animation: volarSillaB 1.1s ease-in-out 2.0s forwards; }
#capa-evento-peleabar.activo .silla-5 { animation: volarSillaA 1.2s ease-in-out 2.6s forwards; }
#capa-evento-peleabar.activo .silla-6 { animation: volarSillaC 1.1s ease-in-out 3.2s forwards; }

@keyframes volarSillaA {
    0% { transform: translate(-250px, 400px) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(110cqw, -150px) rotate(540deg); opacity: 0; }
}

@keyframes volarSillaB {
    0% { transform: translate(-250px, 100px) rotate(45deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(110cqw, 500px) rotate(-360deg); opacity: 0; }
}

@keyframes volarSillaC {
    0% { transform: translate(-250px, 600px) rotate(-30deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(110cqw, 50px) rotate(540deg); opacity: 0; }
}
#mesa-juego-screen.mesa-nivel-2 {
    /* [2026-11-02] fondo sin personajes: el Gordo chino, el chino flaco y el Ciruja son capas (js/datos/vida.js, nivel 2) */
    background-image: url('../img/escenarios/nivel2/fondo_supermercado.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
}

/* [2026-11-02] Nivel 3 sin personajes en el fondo: van como capas (js/datos/vida.js). Se estira igual que el nivel 2. */
#mesa-juego-screen.mesa-nivel-3 {
    background-image: url('../img/escenarios/nivel3/fondo_parrilla.webp') !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
}

/* ========================================== */
/* ANIMACIÓN EXPLOSIVA PARA EL FIGHT!         */
/* ========================================== */
@keyframes fightExplosion {
    0% {
        transform: scale(3.5);
        opacity: 0;
        filter: blur(15px);
    }
    30% {
        transform: scale(0.9);
        opacity: 1;
        filter: blur(0px);
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
    70% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

#overlay-fight {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
}

.animar-fight {
    animation: fightExplosion 1.0s cubic-bezier(0.175, 0.89, 0.32, 1.275) forwards;
}
#capa-rata-supermercado {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;       
    height: 100%;      
    background-size: 100% 100%; /* igual que el fondo del nivel 2, así la rata cae siempre en su lugar */
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; 
    display: none;     
    z-index: 23;       
}

#capa-rata-supermercado.activo {
    display: block;    
    /* 🐀 Duración total del fundido de entrada y salida */
    animation: ratitaFundido 2.2s ease-in-out forwards;
}

@keyframes ratitaFundido {
    /* [2026-11-08] Sin escala: la rata aparece y se va con fundido en el mismo lugar (antes crecía y se achicaba hacia las patas y parecía que corría sobre la mesa). */
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Definición de la animación suave */
@keyframes ratitaPopSutil {
    0% {
        transform: scale(0.75) translateY(12px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* (Retirado 2026-10-31) Estilos del evento Samid eliminados: el evento ya no existe. */
/* Botón de cierre de la rocola (Estilo Arcade / Moderno) */
.btn-cerrar-rocola {
    position: absolute;
    top: 12px;
    right: 15px;
    background: #e74c3c; /* Rojo llamativo */
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%; /* Hace que sea perfectamente redonda */
    width: 34px;
    height: 34px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, background 0.15s ease;
    z-index: 10;
}

/* Efecto cuando pasas el mouse por encima */
.btn-cerrar-rocola:hover {
    background: #c0392b;
    transform: scale(1.12); /* Se agranda un poquito para dar feedback */
}

/* Efecto cuando haces click */
.btn-cerrar-rocola:active {
    transform: scale(0.95);
}

/* Contenedor horizontal para las 5 imágenes */
.contenedor-menu-horizontal {
    position: relative;
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 25px;
    width: 100%;
    max-width: 1700px;
    padding: 0 20px;
}

/* Imágenes de las opciones del menú */
.img-mazo-btn-menu {
    max-width: 240px;
    width: 18.5cqw;
    height: auto;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.9)) drop-shadow(0 0 15px rgba(241, 196, 15, 0.6));
    transition: all 0.3s cubic-bezier(0.175, 0.89, 0.32, 1.275);
}

/* EFECTO HOVER ÉPICO TIPO FICHÍN */
.opcion-mazo-menu {
    transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    cursor: pointer;
}

.opcion-mazo-menu:hover {
    transform: translateY(-30px) scale(1.2) rotate(-2deg);
    z-index: 50;
}
/* Intensifica el brillo de neón dorado y la luz al pasar el mouse */
.opcion-mazo-menu:hover .img-mazo-btn-menu {
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.95)) drop-shadow(0 0 35px rgba(241, 196, 15, 1)) brightness(1.15);
}

/* Estilo visual para las opciones bloqueadas */
.opcion-mazo-menu.bloqueado {
    opacity: 1 !important;
        filter: none !important;
}
@keyframes saltoGanador {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-14px) scale(1.06); } /* Sube y crece un poquito */
    70%  { transform: translateY(0) scale(1); }
    85%  { transform: translateY(-5px) scale(1.02); } /* Pequeño rebotecito final */
    100% { transform: translateY(0) scale(1); }
}


/* Animación para el rival (entra desde la derecha) */
@keyframes entrarDesdeDerecha {
    0%   { transform: translateX(150cqw); opacity: 0; }
    20%  { transform: translateX(0); opacity: 1; }
    80%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(150cqw); opacity: 0; }
}

/* Animación para Jugador / Compi (entra desde la izquierda) */
@keyframes entrarDesdeIzquierda {
    0%   { transform: translateX(-150cqw); opacity: 0; }
    20%  { transform: translateX(0); opacity: 1; }
    80%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-150cqw); opacity: 0; }
}

.banner-op-derecha {
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: entrarDesdeDerecha 2.5s ease-in-out forwards;
    z-index: 99999;
    pointer-events: none;
}

.banner-op-izquierda {
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: entrarDesdeIzquierda 2.5s ease-in-out forwards;
    z-index: 99999;
    pointer-events: none;
}

.banner-op-derecha img, .banner-op-izquierda img {
    max-width: 85cqw;
    max-height: 85cqh;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(0,0,0,0.9));
}

#capa-expresion-ciruja {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    z-index: 25;
}

#capa-expresion-ciruja.activo {
    opacity: 1;
}
@keyframes opPulsacionEpica {
    0% {
        transform: scale(0.5);
        filter: drop-shadow(0 0 0px rgba(241, 196, 15, 0));
        opacity: 0;
    }
    20% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 45px rgba(241, 196, 15, 1)) brightness(1.2);
        opacity: 1;
    }
    40% {
        transform: scale(1);
        filter: drop-shadow(0 0 25px rgba(241, 196, 15, 0.8));
        opacity: 1;
    }
    80% {
        transform: scale(1);
        filter: drop-shadow(0 0 25px rgba(241, 196, 15, 0.8));
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0));
        opacity: 0;
    }
}
#capa-ira-rivales {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    z-index: 26;
}

#capa-ira-rivales.activo {
    opacity: 1;
}
@keyframes impactoGolpePesado {
    0% {
        transform: scale(2.4);
        opacity: 0;
        filter: brightness(2.5) contrast(1.5);
    }
    30% {
        transform: scale(0.85);
        opacity: 1;
        filter: brightness(1.4);
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        filter: brightness(1.2);
    }
    75% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

.animar-golpe-pesado {
    animation: impactoGolpePesado 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
/* Usar los nuevos ojos del rival derecho exclusivamente en el Nivel 2 */
.mesa-nivel-2 #efecto-parpadeo-rival-der {
    background-image: url('../img/escenarios/level 2 rival_der ojos.png') !important;
}

/* Estilo base de la capa de tubos (oculta por defecto) */
#capa-tubos-supermercado {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 22; /* Arriba del fondo, debajo de cartas y personajes */
    pointer-events: none;
    display: none;
}

/* Animación espaciada: fijo la mayor parte del tiempo y con parpadeo esporádico */
@keyframes tubosRotosFlickerSimple {
    0%, 35% { opacity: 1; }
    36% { opacity: 0.2; }
    37% { opacity: 0.9; }
    38% { opacity: 0.1; }
    39% { opacity: 1; }
    40%, 75% { opacity: 1; }
    76% { opacity: 0.15; }
    77% { opacity: 0.8; }
    78% { opacity: 0.25; }
    79% { opacity: 0.95; }
    80%, 100% { opacity: 1; }
}

/* Se enciende de forma automática y constante cuando la mesa está en el Nivel 2 */
.mesa-nivel-2 #capa-tubos-supermercado {
    display: block;
    background-image: url('../img/tubos_luz.webp') !important;
    animation: tubosRotosFlickerSimple 12s infinite steps(1, start);
}
/* Cambio de imagen para el evento especial de Ryu en el Nivel 2 */
.mesa-nivel-2 #capa-evento-miami .personaje-miami-bailando {
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/ryu_nivel2.webp') !important; */
}

/* ==========================================
   ESTILOS PARA LA PLACA DE VERSUS DINÁMICA
   ========================================== */

#overlay-versus {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    z-index: 999999;
    /* 🛑 QUITAMOS el background-color opaco para que se luzca la capa .fondo-bar-shakes con el escenario */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#img-placa-vs {
    position: relative;
    max-width: 85%;
    max-height: 65cqh;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.9));
}

#texto-versus-dinamico {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1100px;
    text-align: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.88);
    padding: 18px 20px;            /* 👈 Aumentamos el padding para darle aire arriba y abajo */
    min-height: 70px;              /* 👈 Forzamos una altura mínima para que nunca se aplaste */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 3px solid #ffd700;
    border-bottom: 3px solid #ffd700;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
}

/* Lo que suele causar ese efecto borroso o sombreado */
.carta-jugada-centro img {
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.8)); /* O algún blur */
    opacity: 0.95;
}
.carta-jugada-centro img, 
.carta-jug.carta-jugada-centro {
    filter: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    image-rendering: -webkit-optimize-contrast; /* Mantiene la nitidez al máximo */
    pointer-events: auto !important; /* 👈 Permitimos que el mouse interactúe con la carta en la mesa */
    animation: tirarCartaAnim 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    transition: transform 0.2s cubic-bezier(0.175, 0.89, 0.32, 1.275), filter 0.2s ease;
    cursor: pointer;
}

.carta-jugada-centro:hover {
    transform: translateY(-7px) scale(1.06) !important; /* Se levanta y agranda un 6% */
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.85)) !important; /* Sombra en el hover */
    z-index: 30; /* Para que quede por encima de las demás si se cruzan */
}

/* Animación de salida a la inversa para Miami */
.personaje-miami-bailando.retirando {
    animation: salirMiami 0.4s ease forwards !important;
}

@keyframes salirMiami {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100%) translateX(0px) rotate(0deg);
        opacity: 0.5;
    }
}
/* Capa de parpadeo para el foco de luz del Nivel 1 */
#capa-foco-nivel1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    z-index: 24; /* Por encima del fondo pero debajo de las cartas/personajes */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.05s ease-in-out;
}

#capa-foco-nivel1.activo {
    opacity: 1;
}
#log-historial-flotante {
    position: absolute;
    top: 45%;
    left: 2%;
    width: 200px;
    max-height: 140px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(241, 196, 15, 0.4);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 45;
    pointer-events: none;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,0.8);
}

.log-item-flotante {
    font-size: 0.72rem;
    font-family: 'Arial Black', Impact, sans-serif;
    font-style: italic;
    color: #ffffff;
    text-shadow: 1px 1px 0px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: fadeInLog 0.25s ease-out forwards;
}

@keyframes fadeInLog {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* Animación y elevación para las cartas jugadas en la mesa */
.carta-mesa, .carta-jugada-mesa, .carta-en-mesa {
    transition: transform 0.2s cubic-bezier(0.175, 0.89, 0.32, 1.275), filter 0.2s ease;
    cursor: pointer;
}

.carta-mesa:hover, .carta-jugada-mesa:hover, .carta-en-mesa:hover {
    transform: translateY(-7px) scale(1.06); /* Se levanta y agranda un 6% */
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.85));
    z-index: 30; /* Para que quede por encima de las demás si se cruzan */
}
#overlay-las-buenas.nivel-2-estilo {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.98) 80%) !important;
    position: relative; /* Importante para que respete los z-index negativos de los hijos */
    overflow: hidden;
}

/* El PNG de fondo del Nivel 2 bien firme y al frente */
#overlay-las-buenas.nivel-2-estilo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/efectos/fondo_buenas_nivel2.webp') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: flagWaveBg 4s ease-in-out infinite !important;
    z-index: 2 !important; /* Capa superior */
    opacity: 1 !important;
}

/* La luz giratoria la mandamos al fondo absoluto detrás de todo */
#overlay-las-buenas.nivel-2-estilo .luz-celestial-giratoria {
    z-index: -1 !important; /* Capa más baja de todas (detrás del fondo oscuro y del PNG) */
}

#overlay-las-buenas.nivel-2-estilo .luz-celestial-giratoria,
#overlay-las-buenas.nivel-2-estilo .contenedor-alas-buenas,
#overlay-las-buenas.nivel-2-estilo button {
    position: relative;
    z-index: 3;
}
/* Oculta completamente a messi.png cuando estamos en el Nivel 2 */
#overlay-las-buenas.nivel-2-estilo .messi-flameante-fg {
    display: none !important;
}
/* Base común para ambos memes a tamaño gigante */
.banner-op-guillermo {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto elástico de salto */
}

.banner-op-guillermo img {
    width: 120cqw;        /* Ocupa un poco más del ancho total de la pantalla */
    max-width: 1300px;   /* 👈 ¡Acá agachamos el tamaño máximo! Subilo o bajalo a tu gusto (ej: 1400px o 1500px) */
    height: auto;
    display: block;
    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.9));
}

/* 🇦🇷 MESSI: Salta y se asoma desde la IZQUIERDA */
.banner-op-guillermo.desde-izquierda {
    bottom: 0;
    left: -120cqw;        /* Debe coincidir o superar el ancho del img para ocultarse por completo */
}
.banner-op-guillermo.desde-izquierda.activo {
    transform: translateX(120cqw); 
}

/* 🇨🇳 / 🟥 OP: Salta y se asoma desde la DERECHA */
.banner-op-guillermo.desde-derecha {
    bottom: 0;
    right: -120cqw;       /* Debe coincidir o superar el ancho del img para ocultarse por completo */
}
.banner-op-guillermo.desde-derecha.activo {
    transform: translateX(-120cqw); 
}
/* 🛑 CARTAS BLOQUEADAS HASTA QUE APAREZCA LA BOTONERA */
#contenedor-mano-jugador.bloqueado .carta-placeholder {
    opacity: 0.4;                      /* Se ponen semitransparentes */
    filter: grayscale(60%) brightness(0.7); /* Efecto apagado / sombreado */
    cursor: not-allowed;               /* Cambia el cursor a prohibido */
    pointer-events: none;              /* Bloquea completamente los clics y el hover */
    transform: translateY(0) !important; /* Anula cualquier animación de levante */
}
/* Estilos para la pantalla de cinemática */
#cinematica-screen {
    display: none; /* Se oculta por defecto hasta que arranca la cinemática */
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    background-color: #000000; /* Fondo negro de cine */
    z-index: 9999; /* Para que quede por encima de todo */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-family: monospace; /* O la tipografía retro/arcade que uses en Trucardo */
    cursor: pointer;
    user-select: none;
    padding: 20px;
    box-sizing: border-box;
}

/* Estilo para la imagen del cuadro del cómic */
#img-cinematica-actual {
    max-width: 85%;
    max-height: 65cqh;
    object-fit: contain;
    border: 4px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    margin-bottom: 25px;
}

/* Estilo para el cuadro de diálogo / texto inferior */
#txt-cinematica {
    width: 80%;
    max-width: 800px;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.5;
    background: rgba(20, 20, 20, 0.9);
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* ========================================== */
/* ESTILOS Y PAÑO DEL NIVEL 3                 */
/* ========================================== */
.mesa-nivel-3 {
    background-image: url('../img/escenarios/nivel3/fondo_parrilla.webp') !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
}
/* ESTILOS PARA EL AVISO DE CARTA ALTA (IMAGEN A TAMAÑO DE PANTALLA COMPLETA) */
.capa-cartaalta-rival {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    animation: popCartaAltaPantalla 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Como ya cada imagen está dibujada en su lugar, ocupan toda la pantalla y no necesitan offset */
#capa-cartaalta-rival1, 
#capa-cartaalta-rival2 {
    top: 0;
    left: 0;
}

.capa-cartaalta-rival img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene la proporción exacta de tu PNG transparente */
}

@keyframes popCartaAltaPantalla {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    70% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* Capa de fondo del parrillero (Tamaño completo del paño) */
#parrillero-nivel3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/escenarios/nivel3/parrillero1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Por debajo de las cartas, sobre el fondo base */
    pointer-events: none;
    opacity: 1;
    display: none; /* Oculto por defecto */
}

/* Secuencia rítmica limpia solo con opacidad (Cada 4 segundos) */
@keyframes efectoFuegoParrilleroLimpio {
    0%, 100% { opacity: 1; }
    
    /* Primer parpadeo rápido */
    10% { opacity: 0.2; }
    15% { opacity: 1; }
    
    /* Segundo parpadeo (Doble rápido) */
    25% { opacity: 0.1; }
    30% { opacity: 1; }
    33% { opacity: 0.3; }
    38% { opacity: 1; }
    
    /* Espacio / Calma breve */
    50% { opacity: 1; }
    
    /* Parpadeo prolongado final */
    65% { opacity: 0.15; }
    80% { opacity: 0.5; }
    88% { opacity: 1; }
}

/* Cuando estamos en el Nivel 3, se muestra y arranca la animación limpia */
.mesa-nivel-3 #parrillero-nivel3 {
    display: block;
    animation: efectoFuegoParrilleroLimpio 4s infinite ease-in-out;
}
/* ========================================== */
/* FIN DE CHICO EXCLUSIVO PARA EL NIVEL 2     */
/* ========================================== */
#overlay-fin-chico.nivel-2-chico-estilo {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.98) 80%) !important;
}

#overlay-fin-chico.nivel-2-chico-estilo .bandera-flameante-bg {
    background-image: url('../img/fin_chico_nivel2_fondo_fameante.png') !important;
}

#overlay-fin-chico.nivel-2-chico-estilo .ricardo-flameante-fg {
    background-image: url('../img/fin_chico_nivel2_frente.webp') !important;
}
/* ========================================== */
/* EFECTO "RESPIRACIÓN" SUTIL EN CARTAS EN MANO */
/* ========================================== */
@keyframes flotarCartaSutil {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px); /* 👈 Movimiento milimétrico y muy suave */
    }
}

/* Aplicamos la animación a la imagen interior para respetar el abanico */
#contenedor-mano-jugador .carta-img {
    animation: flotarCartaSutil 3.8s ease-in-out infinite;
}

/* Desfasamos los tiempos de cada carta para que floten de forma independiente */
#contenedor-mano-jugador .carta-placeholder:nth-child(1) .carta-img {
    animation-delay: 0s;
}
#contenedor-mano-jugador .carta-placeholder:nth-child(2) .carta-img {
    animation-delay: 1.3s;
}
#contenedor-mano-jugador .carta-placeholder:nth-child(3) .carta-img {
    animation-delay: 2.6s;
}

/* Pausamos la flotación al poner el mouse encima para que no se mueva al hacer clic */
#contenedor-mano-jugador .carta-placeholder:hover .carta-img {
    animation-play-state: paused;
}
/* ========================================== */
/* LATIDO SUTIL NORMAL Y NOTORIO EN HOVER     */
/* ========================================== */
@keyframes latidoSutil {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 5px 0 rgba(0,0,0,0.85), inset 0 2px 0 rgba(255,255,255,0.4), 0 0 3px rgba(241, 196, 15, 0.2);
    }
    50% {
        transform: scale(1.02); /* 👈 Latido suave mientras está quieto */
        box-shadow: 0 6px 0 rgba(0,0,0,0.85), inset 0 2px 0 rgba(255,255,255,0.5), 0 0 10px rgba(241, 196, 15, 0.4);
    }
}

@keyframes latidoNotorioHover {
    0%, 100% {
        transform: translateY(-3px) scale(1.06);
        box-shadow: 0 8px 0 rgba(0,0,0,0.9), inset 0 2px 0 rgba(255,255,255,0.8), 0 0 25px rgba(241, 196, 15, 0.95), 0 0 40px rgba(255, 215, 0, 0.8);
    }
    50% {
        transform: translateY(-3px) scale(1.10); /* 👈 Pulso fuerte y bien notorio al pasar el mouse */
        box-shadow: 0 10px 0 rgba(0,0,0,0.9), inset 0 2px 0 rgba(255,255,255,0.9), 0 0 35px rgba(241, 196, 15, 1), 0 0 55px rgba(255, 215, 0, 0.9);
    }
}

/* Estado normal (habilitado): latido sutil */
.btn-accion-arcade:not(:disabled) {
    animation: latidoSutil 2s ease-in-out infinite;
}

/* Estado hover (cuando pasas el mouse): latido bien vivo y notorio */
.btn-accion-arcade:not(:disabled):hover {
    animation: latidoNotorioHover 0.8s ease-in-out infinite !important;
    filter: brightness(1.2);
}
/* ========================================== */
/* EFECTO RESORTE NOTORIO EN CAJAS DE FÓSFOROS */
/* ========================================== */
@keyframes reboteResorteFosforoDestacado {
    0% {
        transform: translateY(-25px) scale(1.4); /* 👈 Arranca bastante más arriba y grande */
        opacity: 0;
    }
    60% {
        transform: translateY(4px) scale(0.9);   /* 👈 Se comprime con fuerza al chocar */
    }
    80% {
        transform: translateY(-2px) scale(1.08); /* 👈 Rebote elástico hacia afuera */
    }
    100% {
        transform: translateY(0) scale(1);       /* 👈 Se acomoda firme en su lugar */
        opacity: 1;
    }
}

.caja-fosforo-svg {
    animation: reboteResorteFosforoDestacado 0.45s cubic-bezier(0.175, 0.89, 0.32, 1.275) forwards;
}
/* ========================================== */
/* ELEVACIÓN E INCLINACIÓN NOTORIA EN CARTAS (HOVER) */
/* ========================================== */
#contenedor-mano-jugador .carta-placeholder {
    transition: transform 0.25s cubic-bezier(0.175, 0.89, 0.32, 1.275), filter 0.25s ease;
}

/* Al pasar el mouse, la carta se eleva bastante, se agranda y rota con más ángulo */
#contenedor-mano-jugador .carta-placeholder:hover {
    transform: translateY(-28px) scale(1.22) rotate(-6deg) !important;
    z-index: 50 !important; /* 👈 Garantiza que pase al frente de las demás */
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.9));
}

/* Inclinación contraria para la tercera carta del abanico */
#contenedor-mano-jugador .carta-placeholder:nth-child(3):hover {
    transform: translateY(-28px) scale(1.22) rotate(6deg) !important;
}
/* Espejar la alita derecha para que queden simétricas y enfrentadas */
.contenedor-alas-buenas .ala-der {
    transform: scaleX(-1);
}
/* ========================================== */
/* DESTELLO DE ESTRELLITA GUÍA EN LA ROCOLA   */
/* ========================================== */
@keyframes destelloEstrellita {
    0%, 40% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    /* Primer destello de la estrella */
    46% {
        transform: translate(-50%, -50%) scale(1.4) rotate(15deg);
        opacity: 1;
    }
    52% {
        transform: translate(-50%, -50%) scale(0.8) rotate(-10deg);
        opacity: 0.4;
    }
    /* Segundo destello */
    58% {
        transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
        opacity: 1;
    }
    70%, 100% {
        transform: translate(-50%, -50%) scale(0) rotate(45deg);
        opacity: 0;
    }
}

/* Aseguramos que la zona contenedora sea de referencia */
#zona-rocola-clic {
    position: absolute;
    cursor: pointer;
    z-index: 20;
}

/* Dibujamos y animamos la estrellita justo en el centro geométrico del área */
#zona-rocola-clic::after {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 32px;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 1), 0 0 4px #000, 0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 25;
    transform: translate(-50%, -50%) scale(0);
    animation: destelloEstrellita 5s ease-in-out forwards;
}
/* EFECTO MOVIMIENTO DE CAMIONETA*/

@keyframes andarCamioneta {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    /* Comienza un tramo suave de velocidad crucero */
    12% {
        transform: translate(-0.8px, 0.8px) rotate(-0.02deg);
    }
    /* ¡Pum! Un pozo o sacudida rápida */
    25% {
        transform: translate(2.2px, -2.0px) rotate(0.09deg);
    }
    /* Se estabiliza un toque pero vibra fino */
    38% {
        transform: translate(-1.0px, 0.5px) rotate(-0.03deg);
    }
    50% {
        transform: translate(0.5px, 1.2px) rotate(0.02deg);
    }
    /* ¡Otro lomo de burro o bache más fuerte! */
    62% {
        transform: translate(-2.5px, -1.8px) rotate(-0.08deg);
    }
    /* Vuelve a calmarse el andar */
    75% {
        transform: translate(1.0px, 0.7px) rotate(0.04deg);
    }
    88% {
        transform: translate(-0.5px, -0.4px) rotate(-0.01deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* Aplicamos la animación con una duración de 4.5 segundos para que respire mejor entre sacudida y sacudida */
.mesa-nivel-7 {   /* la combi (hasta el 03/11/2026 era el nivel 4) */
    animation: andarCamioneta 4.5s ease-in-out infinite;
}
/* ========================================== */
/* ESTILOS UNIFICADOS DE BOTONERA Y ACCIONES  */
/* ========================================== */

#btn-canto-paso {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.05rem;
    font-style: italic;
    padding: 12px 8px;
    color: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 12px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 5px 0 rgba(0,0,0,0.85), inset 0 2px 0 rgba(255,255,255,0.4);
    text-shadow: 2px 2px 0px #000;
    transition: all 0.15s ease;
    text-align: center;
    width: 100%;
    background: linear-gradient(180deg, #d35400 0%, #a04000 100%);
}

#btn-canto-paso:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.2);
}

#btn-canto-paso:disabled {
    opacity: 0.35;
    filter: grayscale(0.8);
    cursor: not-allowed;
    border-color: #888;
}

/* Estado "Prohibido / Bloqueado" (Envido gris transparente) */
/* Animación Pop-Up Épica y Bien Notoria para cuando se activa el turno */
@keyframes popUpBotonEpico {
    0% {
        opacity: 0;
        transform: scale(0.2) translateY(30px);
    }
    60% {
        opacity: 1;
        transform: scale(1.15) translateY(-6px);
    }
    80% {
        transform: scale(0.95) translateY(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animacion-popup-boton {
    animation: popUpBotonEpico 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
/* 👁️ Pestañeo Rival 1 - Nivel 3 */
.rival1-ojos-cerrados-nivel3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/escenarios/nivel3/ojos_rival1_nivel3.png');
    background-size: cover; /* O 'contain' según cómo manejes las proporciones de tu paño */
    background-repeat: no-repeat;
    background-position: center;
    display: none;
    z-index: 15;
    pointer-events: none; /* Para que los clicks traspasen la capa sin molestar */
}

.rival1-ojos-cerrados-nivel3.activo {
    display: block;
}

/* 👁️ Pestañeo Rival 2 - Nivel 3 */
.rival2-ojos-cerrados-nivel3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/escenarios/nivel3/ojos_rival2_nivel3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
    z-index: 15;
    pointer-events: none;
}

.rival2-ojos-cerrados-nivel3.activo {
    display: block;
}
/* ========================================== */
/* PESTAÑEO EXCLUSIVO PARA LOS RIVALES EN NIVEL 3 */
/* ========================================== */
.mesa-nivel-3 #efecto-parpadeo-rival-izq {
    background-image: url('../img/escenarios/nivel3/ojos_rival1_nivel3.png') !important;
}

.mesa-nivel-3 #efecto-parpadeo-rival-der {
    background-image: url('../img/escenarios/nivel3/ojos_rival2_nivel3.png') !important;
}

/* ⏱️ Animación OP de 4 segundos para el Nivel 3 (Desde la Derecha) */
.banner-op-guillermo.nivel-3-derecha {
    position: fixed;
    bottom: 0;
    right: -120cqw;
    z-index: 9999;
    pointer-events: none;
    animation: opNivel3Animacion 4s ease-in-out forwards;
}

.banner-op-guillermo.nivel-3-derecha img {
    width: 120cqw;
    max-width: 1300px;
    height: auto;
    display: block;
    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.9));
}

@keyframes opNivel3Animacion {
    0% {
        transform: translateX(0); /* Empieza oculto a la derecha */
    }
    12% {
        transform: translateX(-120cqw); /* Asoma de golpe hacia el centro en 0.48s */
    }
    85% {
        transform: translateX(-120cqw); /* Se queda firme en pantalla durante el grueso del audio */
    }
    100% {
        transform: translateX(0); /* Se retira rápidamente al finalizar los 4 segundos */
    }
}

/* ⏱️ [2026-11-05] OP del Nivel 3 cuando el ancho lo tira NUESTRO equipo: entra espejado desde la IZQUIERDA */
.banner-op-guillermo.nivel-3-izquierda {
    position: fixed;
    bottom: 0;
    left: -120cqw;
    z-index: 9999;
    pointer-events: none;
    animation: opNivel3AnimacionIzq 4s ease-in-out forwards;
}

.banner-op-guillermo.nivel-3-izquierda img {
    width: 120cqw;
    max-width: 1300px;
    height: auto;
    display: block;
    transform: scaleX(-1);
    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.9));
}

@keyframes opNivel3AnimacionIzq {
    0%   { transform: translateX(0); }
    12%  { transform: translateX(120cqw); }
    85%  { transform: translateX(120cqw); }
    100% { transform: translateX(0); }
}

.mesa-nivel-3 #capa-evento-miami .personaje-miami-bailando {
    /* PENDIENTE ARTE PROPIO (retirado 2026-10-31, imagen de terceros): background-image: url('../img/efectos/nivel3_miami.webp') !important; */
}
/* ========================================== */
/* ANIMACIÓN DE LATIDO / ZOOM SUAVE PARA EL MENÚ */
/* ========================================== */
@keyframes latidoOpcionesMenu {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04); /* 👈 Se agranda un 4% de forma sutil y suave */
    }
}

/* Aplicamos el latido a las opciones del menú principal */
.contenedor-menu-horizontal, 
.contenedor-mazo {
    animation: latidoOpcionesMenu 3s ease-in-out infinite;
}
/* 📍 Barra superior de la mesa (Marcador + Menú) */
.header-mesa-juego {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 10px auto;
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 50;
    position: relative;
}

/* ⚙️ Botón de opciones junto al marcador (Colores sobrios) */
#btn-opciones-marcador {
    background: linear-gradient(to bottom, #2c3e50, #1a252f);
    border: 1px solid #7f8c8d;
    color: #ecf0f1;
    font-size: 0.9rem;
    font-family: monospace;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s;
}

#btn-opciones-marcador:hover {
    background: linear-gradient(to bottom, #34495e, #2c3e50);
    border-color: #bdc3c7;
    color: #ffffff;
}

/* 📋 Fondo y contenedor principal del modal de pausa */
#modal-opciones-mesa {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro translúcido */
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

#modal-opciones-mesa.activo {
    display: flex;
}

.contenido-modal-pausa {
    background: #111113; /* Gris negrísimo clásico */
    border: 2px solid #3f3f46; /* Borde sutil y elegante */
    padding: 30px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    position: relative;
    max-width: 340px;
    width: 90%;
}

/* 📐 Contenedor vertical para "Chico" y el botón debajo */
.contenedor-chico-opciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 50;
    position: relative;
    margin: 10px auto;
}

.texto-chico-mesa {
    font-family: monospace;
    font-size: 0.85rem;
    color: #cbd5e1;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* ⚙️ Botón de opciones SIN RECUADRO (Minimalista) */
#btn-opciones-marcador {
    background: transparent;
    border: none;
    color: #94a3b8; /* Gris suave que combina */
    font-size: 0.75rem;
    font-family: monospace;
    font-weight: bold;
    padding: 2px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease, transform 0.1s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

#btn-opciones-marcador:hover {
    color: #ffffff; /* Se ilumina en blanco al pasar el mouse */
    transform: scale(1.05);
}

#btn-opciones-marcador:active {
    transform: scale(0.95);
}
/* Título clásico más grande */
.contenido-modal-pausa h2,
.titulo-modal-retro {
    color: #e4e4e7;
    font-size: 1.4rem; /* 👈 Agrandado de 1.1rem a 1.4rem */
    margin-bottom: 25px;
    font-family: monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.opciones-botones-pausa {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Botones clásicos con letras más grandes */
.btn-arcade-opcion,
.contenido-modal-pausa .btn-accion-arcade {
    background: #18181b;
    border: 1px solid #52525b;
    color: #d4d4d8;
    padding: 14px 16px; /* 👈 Un poco más de espacio interno */
    font-family: monospace;
    font-size: 1.1rem;   /* 👈 Agrandado de 0.85rem a 1.1rem */
    font-weight: bold;
    letter-spacing: 1.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Efecto hover clásico */
.btn-arcade-opcion:hover,
.contenido-modal-pausa .btn-accion-arcade:hover {
    background: #27272a;
    border-color: #a1a1aa;
    color: #ffffff;
}

/* Variante sobria para reiniciar */
.btn-arcade-opcion.btn-alarma:hover,
.btn-arcade-opcion.btn-mazo:hover {
    background: #3f1515;
    border-color: #ef4444;
    color: #fca5a5;
}

/* Botón de cerrar (X) minimalista */
.btn-cerrar-modal {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: #71717a;
    font-size: 1.2rem; /* 👈 Ligeramente más grande también */
    cursor: pointer;
    transition: color 0.2s;
}

.btn-cerrar-modal:hover {
    color: #ffffff;
}

/* --- ESTILOS DE LA PANTALLA DE TUTORIAL --- */
#pantalla-tutorial {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqw;
    height: 100cqh;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* Fundido al abrir/cerrar */
}

/* --- NUEVOS ESTILOS AMPLIADOS PARA EL TUTORIAL --- */

.contenedor-placa-tutorial {
    position: relative;
    width: 92cqw;
    max-width: 1250px; /* 👈 Placa todavía más ancha y protagonista */
    height: auto;
    max-height: 78cqh;  /* 👈 Ocupa más alto de pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor que agrupa la placa y la boca para fundirlas juntas */
.grupo-placa-animada {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 78cqh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease-in-out; /* 👈 El fundido ahora maneja todo el grupo */
    opacity: 1;
}

.fade-out {
    opacity: 0 !important;
}

#imagen-placa-tutorial {
    width: 100%;
    height: 100%;
    max-height: 78cqh;
    object-fit: contain;
    border: 6px solid #f1c40f;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(241, 196, 15, 0.4), inset 0 0 20px rgba(0,0,0,0.6);
}

/* Botones arcade gigantes y bien visibles */
.botoneratutorial {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    z-index: 10;
}

.btn-arcade-tutorial {
    padding: 14px 28px; /* 👈 Botones más rechonchos y cómodos para clickear */
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    border: 4px solid #fff;
    border-radius: 8px;
    text-shadow: 2px 2px 0px #000;
    box-shadow: 0 6px 0px rgba(0,0,0,0.6); /* 👈 Efecto 3D de relieve */
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-arcade-tutorial:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0px rgba(0,0,0,0.6); /* 👈 Sensación de botón apretado */
}

/* [2026-11-12] Golpe de carta alta: efecto gráfico sin texto (js/ui.js, dispararEfectoGolpeMesa) */
.golpe-fx { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 70; }
.golpe-destello {
    position: absolute; width: 150px; height: 150px; left: -75px; top: -75px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,235,170,0.45) 40%, rgba(255,235,170,0) 70%);
    animation: golpeDestello 0.28s ease-out forwards;
}
.golpe-estrella {
    position: absolute; width: 120px; height: 120px; left: -60px; top: -60px;
    animation: golpeEstrella 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.golpe-estrella svg { width: 100%; height: 100%; display: block; }
.golpe-raya {
    position: absolute; left: 0; top: 0; width: var(--largo); height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(26,18,9,0), #1a1209 70%);
    transform-origin: 0 50%;
    animation: golpeRaya 0.4s ease-out forwards;
}
.golpe-papel, .golpe-chispa {
    position: absolute; left: -4px; top: -4px; opacity: 0;
    animation: golpeFragmento 0.7s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
.golpe-papel { width: 9px; height: 6px; background: #f3e3c0; border: 1px solid #1a1209; }
.golpe-chispa { width: 5px; height: 5px; border-radius: 50%; background: #ffd34d; box-shadow: 0 0 6px #ffb300; }

@keyframes golpeDestello { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes golpeEstrella {
    0%   { transform: scale(0.2) rotate(var(--rot)); opacity: 0; }
    35%  { transform: scale(1.1) rotate(var(--rot)); opacity: 0.95; }
    100% { transform: scale(1.35) rotate(var(--rot)); opacity: 0; }
}
@keyframes golpeRaya {
    0%   { transform: rotate(var(--ang)) translateX(34px) scaleX(0.2); opacity: 0.9; }
    100% { transform: rotate(var(--ang)) translateX(92px) scaleX(1); opacity: 0; }
}
@keyframes golpeFragmento {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--giro)); opacity: 0; }
}

/* Intensidades: ancho = notorio (más grande, anillo de onda, más rayas y fragmentos); siete = leve (chico, translúcido, solo chispas) */
.golpe-ancho { transform: scale(1.55); }
.golpe-ancho .golpe-destello { animation-duration: 0.4s; }
.golpe-leve { transform: scale(0.6); }
.golpe-leve .golpe-estrella svg { opacity: 0.7; }
.golpe-leve .golpe-destello { filter: opacity(0.6); }
.golpe-anillo {
    position: absolute; width: 90px; height: 90px; left: -45px; top: -45px; border-radius: 50%;
    border: 4px solid rgba(255, 244, 194, 0.9);
    box-shadow: 0 0 14px rgba(247, 201, 72, 0.7);
    animation: golpeAnillo 0.55s ease-out forwards;
}
@keyframes golpeAnillo { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }