/* Estilos generales y variables del tema */
:root {
    --color-bg: #0b0914;
    --color-panel: rgba(26, 21, 44, 0.6);
    --color-panel-border: rgba(168, 85, 247, 0.2);
    --color-text: #f3f4f6;
    --color-text-muted: #9ca3af;
    
    --grad-primario: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    --grad-acento: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --grad-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    
    --shadow-neon: 0 0 15px rgba(168, 85, 247, 0.4);
    --shadow-success: 0 0 20px rgba(16, 185, 129, 0.5);
    
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-stack);
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--color-bg);
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-x: hidden;
}

/* Contenedor Principal */
.app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tarjetas con Efecto Glassmorphism */
.glass-panel {
    background: var(--color-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-panel-border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.glass-panel:hover {
    border-color: rgba(168, 85, 247, 0.4);
}

/* Objetivo destacado al comenzar cada ronda para que se lea de un vistazo. */
#txt-juego-estado.objetivo-ronda {
    position: relative;
    margin: 2px 0 16px;
    padding: 20px 16px 15px;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.58);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.24), rgba(124, 58, 237, 0.32));
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.2), inset 0 1px rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    font-size: clamp(1.32rem, 6vw, 1.75rem) !important;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(8, 15, 45, 0.72);
}

#txt-juego-estado.objetivo-ronda::before {
    content: "OBJETIVO DE LA RONDA";
    display: block;
    margin-bottom: 7px;
    color: #a5f3fc;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-shadow: none;
}

#txt-juego-estado.objetivo-ronda::after {
    content: "♫";
    position: absolute;
    top: -17px;
    right: 12px;
    color: rgba(255, 255, 255, 0.24);
    font-size: 4rem;
    line-height: 1;
    pointer-events: none;
}

/* Encabezados y Textos */
h1, h2, h3 {
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

h1 {
    font-size: 2.2rem;
    background: linear-gradient(to right, #a855f7, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

/* Formularios e Inputs */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    padding-left: 4px;
}

input, select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px;
    color: var(--color-text);
    font-size: 1.1rem;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
}

input:focus, select:focus {
    border-color: #a855f7;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

select option {
    background-color: #1e1b4b;
    color: #ffffff;
}

/* Botones */
.btn {
    border: none;
    border-radius: 16px;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: var(--grad-primario);
    box-shadow: var(--shadow-neon);
}

.btn-primary:active {
    transform: scale(0.97);
    filter: brightness(0.9);
}

.btn-secondary {
    background: var(--grad-acento);
}

.btn-success {
    background: var(--grad-success);
}

.btn-danger {
    background: var(--grad-danger);
}

.btn-disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* Botón Gigante de Buzzer ("¡LA SÉ!") */
.buzzer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
    position: relative;
}

.btn-buzzer {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    position: relative; /* Para poder posicionar el disco y el texto */
    box-shadow: var(--shadow-neon), 0 10px 25px rgba(0, 0, 0, 0.5);
    border: 8px solid rgba(255, 255, 255, 0.15);
    background: #110e24; /* Fondo oscuro por defecto */
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    overflow: hidden; /* Oculta esquinas de la imagen al rotar */
}

/* El disco de vinilo interior que sí gira */
.btn-buzzer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/fondos/discoweb_peque.png");
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    z-index: 1;
    animation: spin-vinyl 12s linear infinite;
    animation-play-state: paused; /* Por defecto pausado */
    transition: background-image 0.2s ease;
}

/* La carátula cuadrada sobre el disco (se muestra en comprobación) */
.buzzer-caratula {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 12px; /* Esquinas ligeramente suaves */
    background-size: cover;
    background-position: center;
    z-index: 10; /* Por encima de todo (incluyendo el vinilo y las letras de bloqueado) */
    border: 4px solid #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    pointer-events: none; /* Evita interferir con clicks */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

/* Animación de desplazamiento al revelar solución */
.buzzer-container.revealed .btn-buzzer {
    transform: translateX(65px);
}

.buzzer-container.revealed .btn-buzzer::before {
    animation-play-state: running; /* Hacer que gire al revelarse */
}

.buzzer-container.revealed .buzzer-caratula {
    transform: translateX(-65px);
    pointer-events: auto;
}

.buzzer-container.revealed .btn-buzzer-text {
    opacity: 0 !important;
    pointer-events: none;
}

.btn-buzzer.spinning::before {
    animation-play-state: running; /* Cuando suena el audio, gira */
}

/* El texto estático superpuesto */
.btn-buzzer-text {
    position: relative;
    z-index: 3; /* Por encima del vinilo y la carátula */
    color: #fff;
    font-size: 2.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.3s ease;
    /* Contorno negro para legibilidad perfecta */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
        0 4px 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(168, 85, 247, 0.8);
    pointer-events: none; /* Evita interferencias */
}

/* Llamada visual del buzzer disponible: el texto invita a pulsar sin tapar el vinilo. */
.btn-buzzer:not(.blocked):not(.active) .btn-buzzer-text {
    color: #ffffff;
    background: none;
    -webkit-text-fill-color: #ffffff;
    animation: la-se-destello 2.1s ease-in-out infinite;
}

@keyframes la-se-destello {
    0%, 100% {
        transform: scale(1);
        color: #ffffff;
        text-shadow:
            -2px -2px 0 #111,
             2px -2px 0 #111,
            -2px  2px 0 #111,
             2px  2px 0 #111,
            0 0 9px rgba(255,255,255,0.8),
            0 0 16px rgba(103,232,249,0.8);
    }
    45% {
        transform: scale(1.11);
        color: #ffffff;
        text-shadow:
            -2px -2px 0 #111,
             2px -2px 0 #111,
            -2px  2px 0 #111,
             2px  2px 0 #111,
            0 0 12px rgba(255,255,255,1),
            0 0 28px rgba(103,232,249,1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-buzzer:not(.blocked):not(.active) .btn-buzzer-text { animation: none; }
}

.btn-buzzer:active:not(.blocked) {
    transform: scale(0.92);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.8), 0 5px 10px rgba(0, 0, 0, 0.4);
}

.btn-buzzer.active {
    box-shadow: var(--shadow-success), 0 0 25px rgba(16, 185, 129, 0.6);
    border-color: rgba(74, 222, 128, 0.6);
}

.btn-buzzer.active::before {
    background-image: linear-gradient(rgba(16, 185, 129, 0.65), rgba(5, 150, 105, 0.65)), url("/fondos/discoweb_peque.png");
    background-blend-mode: multiply;
    animation: pulse 1.5s infinite alternate;
    animation-play-state: running;
}

#txt-juego-estado.objetivo-ronda.modo-respuesta {
    border-color: rgba(74, 222, 128, 0.8);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(6, 182, 212, 0.28));
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.32), inset 0 1px rgba(255, 255, 255, 0.22);
    animation: objetivo-es-tuya 0.85s ease-in-out infinite alternate;
}

#txt-juego-estado.objetivo-ronda.modo-esperando-respuesta {
    border-color: rgba(251, 113, 133, 0.85);
    background: linear-gradient(135deg, rgba(190, 24, 93, 0.36), rgba(127, 29, 29, 0.38));
    box-shadow: 0 0 30px rgba(244, 63, 94, 0.32), inset 0 1px rgba(255, 255, 255, 0.18);
    animation: objetivo-espera-respuesta 0.95s ease-in-out infinite alternate;
}

#txt-juego-estado.objetivo-ronda.modo-esperando-respuesta::before {
    content: "RESPUESTA EN JUEGO";
    color: #fecdd3;
}

@keyframes objetivo-espera-respuesta {
    from { transform: scale(1); }
    to { transform: scale(1.018); }
}

@keyframes objetivo-es-tuya {
    from { transform: scale(1); }
    to { transform: scale(1.025); }
}

.btn-buzzer.active .btn-buzzer-text {
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
        0 4px 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(16, 185, 129, 0.9);
}

.btn-buzzer.blocked {
    box-shadow: none;
    border-color: rgba(31, 41, 55, 0.4);
}

.btn-buzzer.blocked::before {
    background-image: linear-gradient(rgba(55, 65, 81, 0.85), rgba(55, 65, 81, 0.85)), url("/fondos/discoweb_peque.png");
    background-blend-mode: multiply;
    animation-play-state: paused;
}

.btn-buzzer.blocked .btn-buzzer-text {
    color: #ff4d4d; /* Rojo peligro vibrante pero legible */
    font-size: 1.6rem; /* Reducimos tamaño para que "BLOQUEADO" quepa perfectamente */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
        0 2px 5px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 77, 77, 0.5); /* Brillo de neón rojo */
}

@keyframes spin-vinyl {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pantalla de Clasificación */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 12px 18px;
    border-left: 4px solid transparent;
}

.leaderboard-item.top-0 { border-left-color: #fbbf24; } /* Oro */
.leaderboard-item.top-1 { border-left-color: #9ca3af; } /* Plata */
.leaderboard-item.top-2 { border-left-color: #b45309; } /* Bronce */

/* Clasificación compacta: podio visible y resto por páginas, sin scroll largo. */
#pantalla-clasificacion #lista-clasificacion-general {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

#pantalla-clasificacion #lista-clasificacion-general .leaderboard-item,
.ranking-paginado .leaderboard-item {
    min-width: 0;
    padding: 8px;
    border-left-width: 3px;
}

#pantalla-clasificacion #lista-clasificacion-general .player-rank-info,
.ranking-paginado .player-rank-info {
    min-width: 0;
    gap: 5px;
}

#pantalla-clasificacion #lista-clasificacion-general .player-rank-info > div:nth-child(2) {
    display: none;
}

#pantalla-clasificacion #lista-clasificacion-general .rank-badge,
.ranking-paginado .rank-badge {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    font-size: 0.75rem;
}

#pantalla-clasificacion #lista-clasificacion-general .player-name,
.ranking-paginado .player-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76rem;
}

#pantalla-clasificacion #lista-clasificacion-general .player-score,
.ranking-paginado .player-score {
    flex: 0 0 auto;
    margin-left: 4px;
    font-size: 0.72rem;
}

.ranking-paginado {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.controles-clasificacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.controles-clasificacion button {
    width: 38px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.22);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.controles-clasificacion button:disabled { opacity: 0.35; }

.acciones-clasificacion { display: flex; gap: 10px; margin-top: 16px; }
.acciones-clasificacion .btn { flex: 1; margin: 0; padding: 11px 8px; font-size: 0.84rem; }
.btn-musica-clasificacion { width: auto; }
.volumen-clasificacion { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; background: rgba(255,255,255,0.06); }
.volumen-clasificacion input { width: min(23vw, 100px); accent-color: #a855f7; }
.volumen-clasificacion .valor-volumen-host { min-width: 31px; font-size: 0.75rem; }

.modal-musica { position: fixed; inset: 0; z-index: 21000; display: grid; place-items: center; padding: 20px; background: rgba(10, 7, 20, 0.82); backdrop-filter: blur(8px); }
.panel-musica { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(88vw, 320px); padding: 25px 20px; border: 1px solid rgba(168,85,247,.55); border-radius: 20px; background: #171027; box-shadow: 0 20px 45px rgba(0,0,0,.55); }
.panel-musica h2 { margin: 0; }
.panel-musica .btn { width: 100%; margin: 0; }
.cerrar-musica { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; cursor: pointer; }
.posicion-musica { width: 100%; }
.posicion-musica div { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--color-text-muted); font-size: 0.78rem; }
.posicion-musica input { width: 100%; accent-color: #a855f7; }

.texto-espera-clasificacion { margin: 14px 0 8px; color: var(--color-text-muted); font-size: .9rem; }
.mini-reproductor-clasificacion { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; padding: 9px 12px; overflow: hidden; border: 1px solid rgba(168,85,247,.45); border-radius: 14px; background: linear-gradient(90deg, rgba(88,28,135,.52), rgba(30,41,59,.68)); box-shadow: 0 7px 18px rgba(0,0,0,.24); animation: mini-reproductor-entra .45s cubic-bezier(.2,.8,.2,1); }
.mini-reproductor-clasificacion.hidden { display: none; }
.mini-reproductor-clasificacion img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; box-shadow: 0 3px 8px rgba(0,0,0,.42); }
.mini-reproductor-datos { display: flex; min-width: 0; flex: 1; flex-direction: column; text-align: left; }
.mini-reproductor-datos strong, .mini-reproductor-datos span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-reproductor-datos strong { color: #fff; font-size: .84rem; }
.mini-reproductor-datos span { color: #d8b4fe; font-size: .75rem; }
.mini-reproductor-datos span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-reproductor-onda { color: #c084fc; font-size: 1.45rem; animation: mini-reproductor-late 1s ease-in-out infinite; }
@keyframes mini-reproductor-entra { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mini-reproductor-late { 50% { transform: scale(1.22); color: #f0abfc; } }

.cortina-transicion-ronda { position: fixed; inset: 0; z-index: 15000; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; background: #030306; }
.cortina-transicion-ronda.hidden { display: none; }
.cortina-panel { position: absolute; top: 0; bottom: 0; width: 50%; background-image: url("/fondos/fondo6.png"); background-size: 200% 100%; background-repeat: no-repeat; filter: brightness(.58) saturate(1.15); }
.cortina-izquierda { left: 0; background-position: left center; transform: translateX(-100%); }
.cortina-derecha { right: 0; background-position: right center; transform: translateX(100%); }
.cortina-transicion-ronda span { position: relative; z-index: 3; padding: 11px 18px; border: 2px solid #fbbf24; border-radius: 12px; background: rgba(8,4,18,.72); color: #fff; font-size: 1.45rem; font-weight: 950; letter-spacing: .13em; opacity: 0; text-shadow: 0 0 8px #f59e0b, 0 2px 12px #000; box-shadow: 0 0 0 5px rgba(251,191,36,.13), 0 0 28px rgba(236,72,153,.68); }
.cortina-transicion-ronda.activa .cortina-izquierda { animation: fondo6-cierra-izquierda .65s cubic-bezier(.18,.8,.24,1) forwards; }
.cortina-transicion-ronda.activa .cortina-derecha { animation: fondo6-cierra-derecha .65s cubic-bezier(.18,.8,.24,1) forwards; }
.cortina-transicion-ronda.activa span { animation: texto-concurso .3s .42s ease-out forwards; }
.fragmentos-cortina { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; }
.fragmentos-cortina i { opacity: 0; background-image: url("/fondos/fondo6.png"); background-size: 400% 300%; filter: brightness(.62) saturate(1.1); }
.fragmentos-cortina i:nth-child(4n+1) { background-position-x: 0%; }
.fragmentos-cortina i:nth-child(4n+2) { background-position-x: 33.33%; }
.fragmentos-cortina i:nth-child(4n+3) { background-position-x: 66.66%; }
.fragmentos-cortina i:nth-child(4n) { background-position-x: 100%; }
.fragmentos-cortina i:nth-child(-n+4) { background-position-y: 0%; }
.fragmentos-cortina i:nth-child(n+5):nth-child(-n+8) { background-position-y: 50%; }
.fragmentos-cortina i:nth-child(n+9) { background-position-y: 100%; }
.cortina-transicion-ronda.abriendo .cortina-panel { opacity: 0; transition: opacity .08s; }
.cortina-transicion-ronda.abriendo { background: transparent; transition: background .35s ease .12s; }
.cortina-transicion-ronda.abriendo span { animation: texto-sale .14s ease-in forwards; }
.cortina-transicion-ronda.abriendo .fragmentos-cortina i { opacity: 1; animation: fondo6-se-rompe .82s cubic-bezier(.24,.62,.32,1) forwards; }
.cortina-transicion-ronda.abriendo .fragmentos-cortina i:nth-child(2n) { animation-delay: .08s; }
.cortina-transicion-ronda.abriendo .fragmentos-cortina i:nth-child(3n) { animation-delay: .16s; }
.cortina-transicion-ronda.abriendo .fragmentos-cortina i:nth-child(4n) { animation-delay: .24s; }
@keyframes fondo6-cierra-izquierda { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
@keyframes fondo6-cierra-derecha { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes texto-concurso { from { opacity: 0; transform: scale(.65) rotate(-3deg); } 70% { opacity: 1; transform: scale(1.08) rotate(1deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes texto-sale { to { opacity: 0; transform: scale(1.08); } }
@keyframes fondo6-se-rompe { 18% { filter: brightness(1.5) saturate(1.3); } 100% { opacity: 0; transform: translate(var(--fragmento-x, 18px), var(--fragmento-y, -28px)) rotate(12deg) scale(.72); filter: brightness(1.15) blur(1.5px); } }
.fragmentos-cortina i:nth-child(odd) { --fragmento-x: -28px; --fragmento-y: 34px; }
.fragmentos-cortina i:nth-child(3n) { --fragmento-x: 38px; --fragmento-y: -42px; }

/* Podio final: mismas posiciones completas, con medallas reales para el top 3. */
#pantalla-final #lista-clasificacion-final { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin-top: 12px; }
#pantalla-final #lista-clasificacion-final .leaderboard-item { position: relative; flex-direction: column; justify-content: center; gap: 3px; min-height: 106px; padding: 10px 4px 7px; overflow: visible; border: 1px solid rgba(255,255,255,.23); border-bottom: 5px solid; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(23,16,39,.85)); }
#pantalla-final #lista-clasificacion-final .top-0 { order: 2; min-height: 130px; border-color: rgba(251,191,36,.8); border-bottom-color: #fbbf24; background: linear-gradient(180deg, rgba(251,191,36,.35), rgba(113,75,16,.86)); }
#pantalla-final #lista-clasificacion-final .top-1 { order: 1; border-color: rgba(203,213,225,.7); border-bottom-color: #cbd5e1; }
#pantalla-final #lista-clasificacion-final .top-2 { order: 3; border-color: rgba(205,127,50,.75); border-bottom-color: #cd7f32; }
#pantalla-final #lista-clasificacion-final .player-rank-info { flex-direction: column; gap: 3px; }
#pantalla-final #lista-clasificacion-final .leaderboard-avatar { width: 50px !important; height: 50px !important; margin: 0 !important; border: 3px solid rgba(255,255,255,.8) !important; }
#pantalla-final #lista-clasificacion-final .top-0 .leaderboard-avatar { width: 64px !important; height: 64px !important; }
#pantalla-final #lista-clasificacion-final .rank-badge { position: absolute; top: -17px; left: 50%; width: 36px; height: 36px; transform: translateX(-50%); color: transparent; border: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
#pantalla-final #lista-clasificacion-final .top-0 .rank-badge { background-image: url("/fondos/medalla1.png"); }
#pantalla-final #lista-clasificacion-final .top-1 .rank-badge { background-image: url("/fondos/medalla2.png"); }
#pantalla-final #lista-clasificacion-final .top-2 .rank-badge { background-image: url("/fondos/medalla3.png"); }
#pantalla-final #lista-clasificacion-final .player-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: .72rem; font-weight: 900; }
#pantalla-final #lista-clasificacion-final .player-score { margin: 0; color: #fff; font-size: .78rem; font-weight: 900; }

/* Podio con una presencia más de juego: el oro domina el centro. */
#pantalla-clasificacion #lista-clasificacion-general {
    grid-template-areas: "plata oro bronce";
    align-items: end;
    gap: 8px;
    margin-top: 10px;
}

#pantalla-clasificacion #lista-clasificacion-general .top-0 { grid-area: oro; }
#pantalla-clasificacion #lista-clasificacion-general .top-1 { grid-area: plata; }
#pantalla-clasificacion #lista-clasificacion-general .top-2 { grid-area: bronce; }

#pantalla-clasificacion #lista-clasificacion-general .leaderboard-item {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 108px;
    padding: 10px 4px 7px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 5px solid;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(23,16,39,0.82));
    box-shadow: inset 0 1px rgba(255,255,255,0.16), 0 8px 16px rgba(0,0,0,0.24);
}

#pantalla-clasificacion #lista-clasificacion-general .top-0 {
    min-height: 132px;
    border-color: rgba(251, 191, 36, 0.8);
    border-bottom-color: #fbbf24;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.35), rgba(113, 75, 16, 0.86));
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.35), inset 0 1px rgba(255,255,255,0.32);
}

#pantalla-clasificacion #lista-clasificacion-general .top-1 {
    border-color: rgba(203, 213, 225, 0.7);
    border-bottom-color: #cbd5e1;
    background: linear-gradient(180deg, rgba(203, 213, 225, 0.23), rgba(63, 72, 89, 0.86));
}

#pantalla-clasificacion #lista-clasificacion-general .top-2 {
    border-color: rgba(205, 127, 50, 0.75);
    border-bottom-color: #cd7f32;
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.28), rgba(91, 50, 24, 0.88));
}

#pantalla-clasificacion #lista-clasificacion-general .player-rank-info {
    flex-direction: column;
    gap: 3px;
}

#pantalla-clasificacion #lista-clasificacion-general .leaderboard-avatar {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border: 3px solid rgba(255,255,255,0.74) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,0.45);
}

#pantalla-clasificacion #lista-clasificacion-general .top-0 .leaderboard-avatar {
    width: 66px !important;
    height: 66px !important;
    border-color: #fef3c7 !important;
}

#pantalla-clasificacion #lista-clasificacion-general .rank-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 27px;
    height: 27px;
    transform: translateX(-50%);
    border: 2px solid #fff;
    background: #64748b;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 3px 7px rgba(0,0,0,0.36);
}

#pantalla-clasificacion #lista-clasificacion-general .top-0 .rank-badge { background: #f59e0b; }
#pantalla-clasificacion #lista-clasificacion-general .top-2 .rank-badge { background: #b45309; }

#pantalla-clasificacion #lista-clasificacion-general .player-name {
    max-width: 100%;
    color: #fff;
    font-size: 0.71rem;
    font-weight: 900;
}

#pantalla-clasificacion #lista-clasificacion-general .player-score {
    margin: 0;
    color: #fff;
    font-weight: 900;
    font-size: 0.76rem;
}

.player-rank-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rank-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
}

.player-name {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.player-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: #a855f7;
}

/* Información de la partida */
.room-badge {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: #c084fc;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 8px;
}

.dificultad-stars {
    color: #fbbf24;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* Código QR y Acceso */
.qr-container {
    background: #fff;
    padding: 16px;
    border-radius: 18px;
    margin: 16px auto;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.qr-container img {
    max-width: 100%;
}

.room-pin-display {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-align: center;
    color: #06b6d4;
    margin: 8px 0;
}

/* Animaciones */
@keyframes pulse {
    0% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    }
    100% {
        box-shadow: 0 0 35px rgba(16, 185, 129, 0.8);
    }
}

.hidden {
    display: none !important;
}

.msg-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 16px;
}

body {
    padding-bottom: 90px !important;
}

.bottom-app-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(26, 21, 44, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(168, 85, 247, 0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    z-index: 1000;
}

.bottom-app-bar-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.bottom-app-bar-btn:active, .bottom-app-bar-btn:hover {
    color: var(--color-text);
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.bottom-app-bar-icon {
    font-size: 1.3rem;
}

/* Acción principal de la barra: invita a entrar en modo inmersivo. */
#btn-bar-fullscreen {
    color: #fff;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 14px;
    margin: -4px 8px;
    padding: 8px 10px;
    box-shadow: 0 5px 16px rgba(168, 85, 247, 0.42);
    text-shadow: 0 1px 2px rgba(41, 12, 74, 0.55);
    animation: fullscreen-callout 2.2s ease-in-out infinite;
}

#btn-bar-fullscreen:hover,
#btn-bar-fullscreen:active,
#btn-bar-fullscreen:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #c084fc, #f472b6);
    box-shadow: 0 7px 22px rgba(236, 72, 153, 0.58);
    outline: none;
    transform: translateY(-2px) scale(1.03);
}

@keyframes fullscreen-callout {
    0%, 100% { box-shadow: 0 5px 16px rgba(168, 85, 247, 0.42); }
    50% { box-shadow: 0 5px 24px rgba(236, 72, 153, 0.78), 0 0 0 5px rgba(236, 72, 153, 0.13); }
}

@media (prefers-reduced-motion: reduce) {
    #btn-bar-fullscreen { animation: none; }
}

/* Una vez activo, se mantiene disponible sin competir por la atención. */
#btn-bar-fullscreen.fullscreen-active {
    animation: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    color: var(--color-text-muted);
    text-shadow: none;
}

/* Bloqueo de Orientación Horizontal */
#landscape-lock {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0f0a1e;
    color: #fff;
    z-index: 99999;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

@keyframes rotating {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(90deg); }
    75% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Los navegadores no permiten bloquear la orientación de una pestaña normal.
   En móvil, ocultamos el juego en horizontal para que siempre se juegue en vertical.
   `pointer: coarse` evita que esta regla afecte a ordenadores. */
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #landscape-lock {
        display: flex;
        min-height: 100dvh;
    }
    .app-container, .bottom-app-bar {
        display: none !important;
    }
}

/* Spoiler emborronado para el Anfitrión */
.blur-spoiler {
    filter: blur(10px);
    transition: filter 0.15s ease-out;
}
.blur-spoiler.revealed {
    filter: blur(0);
}

/* Marca los datos de la solución que el jugador debe responder. */
.campo-respuesta-requerido::after {
    content: " ★";
    color: #fbbf24;
    font-size: 0.85em;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
}

/* Cartel/Toast de Notificación (Flotante para el Anfitrión) */
.toast-notification {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(220, 38, 38, 0.95); /* Red/danger theme */
    border: 1px solid rgba(248, 113, 113, 0.4);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    padding: 14px 24px;
    border-radius: 16px;
    font-weight: 700;
    z-index: 100000;
    text-align: center;
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    pointer-events: none;
    font-size: 1.1rem;
    width: 90%;
    max-width: 400px;
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification.success {
    background: rgba(16, 185, 129, 0.95);
    border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

/* Fondos específicos por pantalla */
body.screen-clasificacion {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.2) 0px, transparent 50%),
        url("/fondos/fondo3.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body.screen-juego {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.2) 0px, transparent 50%),
        url("/fondos/fondo4.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body.screen-final {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.2) 0px, transparent 50%),
        url("/fondos/fondo2.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body.screen-sala {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.2) 0px, transparent 50%),
        url("/fondos/fondo1.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

body.screen-login {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.2) 0px, transparent 50%),
        url("/fondos/fondo2.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Overlay de Notificación Inmersiva (Pantalla Completa para los Jugadores) */
.player-toast.toast-notification {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: none;
    background-image: linear-gradient(rgba(11, 9, 20, 0.88), rgba(11, 9, 20, 0.88)), url("/fondos/fondo6.png");
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 110000;
    padding: 32px;
    border: none;
    box-shadow: none;
    max-width: none;
}

.player-toast.toast-notification.show {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.player-toast.toast-notification.success {
    background-image: linear-gradient(rgba(8, 20, 14, 0.90), rgba(8, 20, 14, 0.90)), url("/fondos/fondo6.png");
    background-blend-mode: multiply;
}

/* Contenido dentro del cartel (Solo aplica o escala en pantalla completa) */
.player-toast .toast-content {
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 420px;
}

.player-toast.toast-notification.show .toast-content {
    transform: scale(1);
}

.player-toast .toast-icon {
    font-size: 5rem;
    animation: bounceScale 1.2s ease infinite alternate;
}

.player-toast .toast-text {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.3;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    background: linear-gradient(to right, #ff7171, #ff3b3b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Pantalla de tiempo agotado: un atuendo aleatorio de la mascota da la respuesta. */
.pantalla-tiempo-agotado {
    position: fixed;
    inset: 0;
    z-index: 110000;
    display: none;
    place-items: center;
    padding: 24px;
    background: linear-gradient(rgba(11, 9, 20, 0.88), rgba(11, 9, 20, 0.88)), url("/fondos/fondo6.png") center / cover;
}

.pantalla-tiempo-agotado.show { display: grid; }

.escena-mascota-tiempo-agotado {
    position: relative;
    width: min(78vw, 390px);
    animation: mascota-tiempo-agotado-aparece 0.45s ease-out both;
}

.escena-mascota-tiempo-agotado img {
    display: block;
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55));
}

.bocadillo-tiempo-agotado {
    position: absolute;
    right: 9%;
    top: -18%;
    width: min(63vw, 275px);
    padding: 21px 20px;
    border: 3px solid #2b1640;
    border-radius: 50% 48% 46% 50%;
    background: #fffdf5;
    box-shadow: 0 7px 0 rgba(43, 22, 64, 0.85), 0 12px 20px rgba(0, 0, 0, 0.35);
    color: #25123d;
    font-size: clamp(1rem, 4.4vw, 1.35rem);
    font-weight: 900;
    line-height: 1.16;
    text-align: center;
}
.bocadillo-tiempo-agotado::after {
    content: "";
    position: absolute;
    right: 32%;
    bottom: -17px;
    width: 30px;
    height: 30px;
    border-right: 3px solid #2b1640;
    border-bottom: 3px solid #2b1640;
    background: #fffdf5;
    transform: rotate(38deg) skew(-10deg);
}

@keyframes mascota-tiempo-agotado-aparece {
    from { transform: scale(0.72) translateY(24px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Aviso de fallo individual: composición compacta para pantallas de móvil. */
.pantalla-jugador-fallado {
    position: fixed;
    inset: 0;
    z-index: 110000;
    display: none;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: linear-gradient(rgba(37, 9, 20, 0.91), rgba(19, 8, 33, 0.91)), url("/fondos/fondo6.png") center / cover;
}

.pantalla-jugador-fallado.show { display: grid; }

.pantalla-jugador-fallado.acierto {
    background: linear-gradient(rgba(7, 48, 28, 0.9), rgba(10, 25, 52, 0.92)), url("/fondos/fondo6.png") center / cover;
}

.pantalla-jugador-fallado.acierto .bocadillo-jugador-fallado {
    border-color: #0f5f37;
    box-shadow: 0 7px 0 rgba(15, 95, 55, 0.85), 0 12px 20px rgba(0, 0, 0, 0.35);
}

.pantalla-jugador-fallado.acierto .bocadillo-jugador-fallado::after {
    border-color: #0f5f37;
}

.escena-mascota-fallo {
    position: relative;
    width: min(80vw, 360px);
    animation: mascota-tiempo-agotado-aparece 0.42s ease-out both;
}

.escena-mascota-fallo > img {
    display: block;
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55));
}

.bocadillo-jugador-fallado {
    position: absolute;
    right: -12%;
    top: -25%;
    width: min(76vw, 320px);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 21px 16px;
    border: 4px solid #2b1640;
    border-radius: 24px 24px 24px 8px;
    background: linear-gradient(145deg, #ffffff 0%, #fffdf5 66%, #f6e9ce 100%);
    box-shadow: 0 8px 0 rgba(43, 22, 64, 0.9), 0 14px 24px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.95);
    color: #25123d;
    font-size: clamp(0.95rem, 4.1vw, 1.2rem);
    font-weight: 900;
    line-height: 1.16;
    text-align: left;
}

.bocadillo-jugador-fallado::after {
    content: "";
    position: absolute;
    left: 25%;
    bottom: -21px;
    width: 31px;
    height: 31px;
    border-right: 4px solid #2b1640;
    border-bottom: 4px solid #2b1640;
    background: #fffdf5;
    transform: rotate(45deg);
}

.cartel-penalizacion-fallo {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -48px;
    width: min(75vw, 300px);
    display: grid;
    gap: 2px;
    padding: 10px 16px;
    transform: translateX(-50%) rotate(-1deg);
    border: 3px solid #7f1d1d;
    border-radius: 14px;
    background: linear-gradient(135deg, #fee2e2, #fca5a5);
    box-shadow: 0 6px 0 rgba(127, 29, 29, 0.78), 0 12px 20px rgba(0, 0, 0, 0.35);
    color: #450a0a;
    font-size: clamp(0.9rem, 4vw, 1.08rem);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
}

.cartel-penalizacion-fallo strong { color: #b91c1c; font-size: 1.22em; }

.avatar-jugador-fallado {
    flex: 0 0 auto;
    width: clamp(42px, 13vw, 54px);
    height: clamp(42px, 13vw, 54px);
    border: 3px solid #a855f7;
    border-radius: 50%;
    object-fit: cover;
    background: #25123d;
}

.avatar-jugador-fallado.sin-avatar { display: none; }

/* Selección de datos que se pedirán en la siguiente partida. */
.campos-adivinanza-config {
    margin-top: 15px;
    padding: 14px;
    border: 1px solid rgba(103, 232, 249, 0.22);
    border-radius: 16px;
    background: rgba(6, 182, 212, 0.06);
}

.campos-adivinanza-opciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.campos-adivinanza-opciones label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #e9d5ff;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
}

.campos-adivinanza-opciones input {
    width: auto;
    accent-color: #a855f7;
}

.configuracion-penalizacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 10px;
    white-space: nowrap;
}

.configuracion-penalizacion .activar-penalizacion,
.configuracion-penalizacion .valor-penalizacion {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fef3c7;
    font-size: clamp(0.7rem, 3.3vw, 0.83rem);
    line-height: 1;
}

.configuracion-penalizacion .activar-penalizacion input {
    margin: 0;
}

.configuracion-penalizacion .valor-penalizacion input {
    width: 46px;
    min-width: 46px;
    margin: 0;
    padding: 5px 3px;
    border-color: rgba(251, 191, 36, 0.55);
    border-radius: 8px;
    text-align: center;
}

.configuracion-penalizacion .valor-penalizacion input:disabled {
    opacity: 0.48;
}

.btn-ajustar-penalizacion {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(251, 191, 36, 0.65);
    border-radius: 9px;
    background: rgba(251, 191, 36, 0.14);
    color: #fef3c7;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.btn-ajustar-penalizacion:active { transform: scale(0.94); }
.btn-ajustar-penalizacion:disabled { opacity: 0.4; cursor: not-allowed; }

#texto-jugador-fallado {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.linea-bocadillo-fallo { display: block; }

.titulo-bocadillo-fallo {
    color: #321451;
    font-size: 1em;
    line-height: 1.08;
}

.puntos-bocadillo-fallo {
    padding: 4px 7px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.14);
    color: #4c1d95;
    font-size: 0.92em;
}

.rapidez-bocadillo-fallo {
    padding: 2px 7px 5px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.07);
    color: #5b21b6;
    font-size: 0.9em;
}

.total-bocadillo-fallo {
    padding-top: 4px;
    border-top: 2px dashed rgba(43, 22, 64, 0.28);
    color: #0f6a3f;
    font-size: 1.08em;
    letter-spacing: 0.1px;
}

.player-toast.success .toast-text {
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
    background: linear-gradient(to right, #4ade80, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.player-toast .toast-subtext {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

@keyframes bounceScale {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* Barra de Progreso del Jugador */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin: 16px 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-bar-fill {
    height: 100%;
    width: 100%;
    background: var(--grad-primario);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
    transition: width 0.1s linear;
}

/* Fondo de pantalla del Anfitrión */
body.body-anfitrion {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.2) 0px, transparent 50%),
        url("/fondos/fondo2.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Avatar Picker & Waiting Room Lobby Grid */
.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    max-height: 140px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 10px;
    margin-top: 8px;
}

.avatar-option {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    background-size: cover;
    background-position: center;
}

.avatar-option:hover {
    transform: scale(1.1);
}

.avatar-option.selected {
    border-color: #a855f7;
    box-shadow: 0 0 10px #a855f7;
    transform: scale(1.1);
}

.waiting-lobby-players {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
    gap: 12px 6px;
    margin-top: 12px;
    padding: 8px 0;
    width: 100%;
}

.lobby-player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: min(100%, 72px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: fadeIn 0.4s ease-out;
}

.lobby-player-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-color: rgba(255,255,255,0.05);
}

.lobby-player-name-tag {
    margin-top: -10px;
    background: var(--grad-primario);
    color: #fff;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.lobby-player-card.disconnected {
    opacity: 0.4;
    filter: grayscale(100%);
}

/* Global Top Status Bar for Player screen */
.jugador-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(26, 21, 44, 0.75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 10px 16px;
    width: 100%;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: slideDown 0.4s ease-out;
}

.jugador-top-bar.hidden {
    display: none !important;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-bar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #a855f7;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.top-bar-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.top-bar-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.top-bar-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.top-bar-right {
    display: flex;
    gap: 12px;
}

.top-bar-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 4px 10px;
    min-width: 55px;
}

.stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 0.9rem;
    font-weight: 800;
    color: #a855f7;
}

@keyframes pulse-rainbow {
    0% { transform: scale(1); border-color: #22d3ee; box-shadow: 0 0 20px #22d3ee; }
    50% { border-color: #a855f7; box-shadow: 0 0 30px #a855f7; }
    100% { transform: scale(1.08); border-color: #f43f5e; box-shadow: 0 0 20px #f43f5e; }
}

/* Progress/Scrubbing Timeline for audio player */
.player-bar-container {
    position: relative;
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    overflow: visible;
}

.player-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--grad-primario);
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.1s linear;
}

/* Premium Host Dashboard Aesthetics */
body.body-anfitrion {
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.25) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(244, 63, 94, 0.2) 0px, transparent 50%),
        url("/fondos/fondo2.png") !important;
}

body.body-anfitrion .glass-panel {
    background: rgba(18, 14, 38, 0.8) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(20px);
}

body.body-anfitrion h1 {
    font-size: 2.2rem;
    background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.qr-container {
    background: rgba(255, 255, 255, 0.03);
    border: 2px dashed rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    padding: 16px;
    display: inline-block;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.qr-container:hover {
    border-color: #06b6d4;
    transform: scale(1.02);
}

.room-pin-display {
    font-size: 3rem !important;
    background: linear-gradient(to right, #06b6d4, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
    font-weight: 900 !important;
    letter-spacing: 8px !important;
    margin: 16px 0 !important;
}

body.body-anfitrion .blur-spoiler {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    transition: all 0.3s ease !important;
}

body.body-anfitrion .blur-spoiler.revealed {
    background: rgba(168, 85, 247, 0.1) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

/* Tactile Gaming Buttons for Host Screen */
.host-control-deck {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

.host-action-btn {
    border: none;
    border-radius: 20px;
    padding: 18px 24px;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.host-action-btn:active {
    transform: scale(0.95);
}

.host-btn-play {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    color: white;
}

.host-btn-pause {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    color: white;
}

.host-btn-reveal {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    color: white;
}

.host-btn-next {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
    color: white;
}

/* Dirección de partida: interfaz inmersiva para el anfitrión */
.host-game-screen {
    position: relative;
    overflow: visible;
    padding: 20px 72px 24px 20px !important;
    background:
        radial-gradient(circle at 24% 4%, rgba(6, 182, 212, 0.16), transparent 30%),
        radial-gradient(circle at 80% 15%, rgba(168, 85, 247, 0.2), transparent 36%),
        rgba(12, 9, 30, 0.9) !important;
}

.host-game-screen > .room-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 12px;
    padding: 6px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.host-game-screen #titulo-estado-juego {
    font-size: 1.45rem;
    line-height: 1.15;
    margin: 0 auto 10px;
    max-width: 260px;
}

.host-game-screen #panel-reproductor {
    position: relative;
    margin: 0 0 16px !important;
    padding: 22px 16px 18px;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.22);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(30, 41, 80, 0.8), rgba(30, 19, 62, 0.74));
    box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 14px 30px rgba(0,0,0,0.28);
}

.host-game-screen #panel-reproductor::before {
    content: "♫";
    position: absolute;
    top: -38px;
    left: -22px;
    color: rgba(103, 232, 249, 0.1);
    font-size: 11rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.host-game-screen #panel-reproductor > * { position: relative; }

.host-game-screen .dificultad-stars {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.22);
    font-size: 0.95rem;
}

.host-game-screen #display-tiempo-ronda {
    min-height: 42px;
    display: grid;
    place-items: center;
    margin-top: 7px !important;
    font-size: 0.91rem;
    color: #dbeafe;
}

.host-game-screen #controles-reproductor-anfitrion {
    margin-top: 4px !important;
    gap: 0 !important;
}

.host-game-screen #controles-reproductor-anfitrion .host-action-btn {
    max-width: none !important;
    min-height: 58px;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 16px;
    font-size: 1rem !important;
}

.host-game-screen #host-player-timeline-container {
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
}

.host-game-screen .player-bar-container {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.13);
}

.host-game-screen .player-bar-fill {
    background: var(--grad-success) !important;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.7);
}

.host-game-screen #volumen-reproductor-container {
    position: absolute;
    z-index: 4;
    right: 13px;
    top: 94px;
    bottom: 22px;
    width: 48px;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 6px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between !important;
    gap: 9px !important;
    border-radius: 24px;
    background: rgba(10, 15, 36, 0.84) !important;
    border: 1px solid rgba(103, 232, 249, 0.25) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35), inset 0 1px rgba(255,255,255,0.09);
}

.host-game-screen #volumen-reproductor-container span:first-child,
.host-game-screen #volumen-reproductor-container span:nth-of-type(2) { font-size: 1rem !important; }

.host-game-screen #slider-volumen {
    width: 130px !important;
    height: 28px;
    margin: 50px -47px !important;
    padding: 0 !important;
    cursor: pointer;
    transform: rotate(-90deg);
    accent-color: #22d3ee;
}

.host-game-screen #valor-volumen-txt {
    min-width: 0 !important;
    font-size: 0.72rem !important;
    text-align: center !important;
    color: #67e8f9;
}

.host-game-screen #detalles-cancion-anfitrion {
    margin: 0 0 16px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(8, 6, 20, 0.48) !important;
}

.host-game-screen #detalles-cancion-anfitrion > p {
    padding-left: 4px;
    font-size: 0.7rem !important;
    letter-spacing: 1px;
}

.host-game-screen .blur-spoiler { padding: 12px !important; }
.host-game-screen .blur-spoiler h3 { font-size: 1rem; }

.host-game-screen #seccion-adivinador {
    padding: 16px;
    margin: 0 0 16px !important;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.56), rgba(80, 28, 83, 0.5));
    border: 1px solid rgba(251, 191, 36, 0.32);
}

.host-game-screen #seccion-adivinador > p { margin-bottom: 3px; }
.host-game-screen #seccion-adivinador > div { gap: 10px !important; margin-top: 12px !important; }
.host-game-screen #seccion-adivinador .host-action-btn { min-height: 62px; padding: 12px 8px !important; font-size: 0.9rem !important; }

.host-game-screen .host-control-deck { margin-top: 0; gap: 10px; }
.host-game-screen .host-control-deck .host-action-btn { min-height: 66px; border-radius: 18px; }

@media (max-width: 380px) {
    .host-game-screen { padding-left: 16px !important; padding-right: 66px !important; }
    .host-game-screen #volumen-reproductor-container { right: 9px; width: 44px; }
    .host-game-screen #titulo-estado-juego { font-size: 1.25rem; }
    .host-game-screen .host-action-btn { letter-spacing: 0.3px; }
}

/* PIN alternativo visible junto al QR de acceso. */
.qr-pin-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.qr-pin-access strong {
    color: #67e8f9;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    line-height: 1.1;
    text-shadow: 0 0 16px rgba(6, 182, 212, 0.6);
}

/* Mascota que mete presión durante la segunda mitad de la ronda. */
.mascota-adivinanza {
    position: fixed;
    left: 4px;
    bottom: calc(-22px + env(safe-area-inset-bottom));
    z-index: 900;
    width: clamp(155px, 52vw, 250px);
    pointer-events: none;
    animation: mascota-respira 2.8s ease-in-out infinite;
    will-change: transform, filter;
}

.mascota-adivinanza > img {
    display: block;
    width: 100%;
    max-height: 270px;
    object-fit: contain;
    filter: drop-shadow(0 10px 11px rgba(0, 0, 0, 0.48));
}

/* Mascota que acompaña al jugador mientras responde tras pulsar el buzzer. */
.mascota-escuchando-respuesta {
    position: fixed;
    z-index: 900;
    left: 50%;
    bottom: calc(58px + env(safe-area-inset-bottom));
    width: min(42vw, 185px);
    pointer-events: none;
    transform: translateX(-50%);
}

.mascota-escuchando-respuesta img {
    display: block;
    width: 100%;
    max-height: 28vh;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
}

.mascota-escuchando-respuesta.apareciendo {
    animation: mascota-escucha-aparece 0.48s cubic-bezier(0.22, 1.45, 0.36, 1) both;
}

.bocadillo-escuchando-respuesta {
    position: absolute;
    left: 62%;
    bottom: 75%;
    width: min(52vw, 205px);
    padding: 10px 12px;
    border: 3px solid #0f4c5c;
    border-radius: 18px 18px 18px 5px;
    background: #f4feff;
    box-shadow: 0 5px 0 rgba(15, 76, 92, 0.82), 0 9px 14px rgba(0, 0, 0, 0.28);
    color: #123d4a;
    font-size: clamp(0.76rem, 3.5vw, 0.95rem);
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.bocadillo-escuchando-respuesta::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -14px;
    width: 20px;
    height: 20px;
    border-right: 3px solid #0f4c5c;
    border-bottom: 3px solid #0f4c5c;
    background: #f4feff;
    transform: rotate(45deg);
}

.aviso-penalizacion-respuesta {
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: max(18px, env(safe-area-inset-top));
    width: min(82vw, 330px);
    padding: 12px 14px;
    transform: translateX(-50%) rotate(-1deg);
    border: 3px solid #991b1b;
    border-radius: 15px;
    background: linear-gradient(135deg, #fef2f2, #fca5a5);
    box-shadow: 0 6px 0 rgba(153, 27, 27, 0.78), 0 12px 22px rgba(0, 0, 0, 0.32);
    color: #7f1d1d;
    font-size: clamp(0.92rem, 4vw, 1.12rem);
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
}

/* Mascota secreta para quienes esperan la respuesta de otro jugador. */
.mascota-secreto-espera {
    position: fixed;
    z-index: 900;
    left: 50%;
    bottom: calc(58px + env(safe-area-inset-bottom));
    width: min(42vw, 185px);
    pointer-events: none;
    transform: translateX(-50%);
}

.mascota-secreto-espera > img {
    display: block;
    width: 100%;
    max-height: 28vh;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
}

.mascota-secreto-espera.apareciendo {
    animation: mascota-secreto-aparece 0.38s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.bocadillo-secreto-espera {
    position: absolute;
    left: 65%;
    bottom: 84%;
    width: min(48vw, 190px);
    padding: 10px 12px;
    border: 3px solid #4c1d3f;
    border-radius: 18px 18px 18px 5px;
    background: #fffdf5;
    box-shadow: 0 5px 0 rgba(76, 29, 63, 0.82), 0 9px 14px rgba(0, 0, 0, 0.28);
    color: #3b1232;
    font-size: clamp(0.75rem, 3.5vw, 0.95rem);
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.bocadillo-secreto-espera::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -14px;
    width: 20px;
    height: 20px;
    border-right: 3px solid #4c1d3f;
    border-bottom: 3px solid #4c1d3f;
    background: #fffdf5;
    transform: rotate(45deg);
}

@keyframes mascota-secreto-aparece {
    from { transform: translateX(-50%) translateY(25px) scale(0.78); opacity: 0; }
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

@keyframes mascota-escucha-aparece {
    0% { transform: translateX(-50%) translateY(42px) scale(0.7); opacity: 0; }
    70% { transform: translateX(-50%) translateY(-5px) scale(1.06); opacity: 1; }
    100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

.mascota-adivinanza.entrando {
    animation: mascota-camina-entrada 1.15s ease-out forwards;
}

.mascota-adivinanza.cambiando {
    animation: mascota-reacciona 0.42s ease-out both;
}

/* Un movimiento muy leve mantiene viva a la mascota mientras da indicaciones. */
@keyframes mascota-respira {
    0%, 100% { transform: translateY(0) rotate(-0.8deg) scale(1); filter: brightness(1); }
    45% { transform: translateY(-7px) rotate(0.9deg) scale(1.018); filter: brightness(1.035); }
    70% { transform: translateY(-3px) rotate(-0.35deg) scale(1.006); }
}

@keyframes mascota-camina-entrada {
    0% { transform: translateX(-145%) translateY(10px) rotate(-5deg); opacity: 0; }
    12% { opacity: 1; }
    25% { transform: translateX(-96%) translateY(0) rotate(4deg); }
    45% { transform: translateX(-55%) translateY(8px) rotate(-4deg); }
    65% { transform: translateX(-22%) translateY(0) rotate(3deg); }
    82% { transform: translateX(5px) translateY(5px) rotate(-2deg); }
    100% { transform: translateX(0) translateY(0) rotate(0); opacity: 1; }
}

@keyframes mascota-reacciona {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    45% { transform: scale(1.07) rotate(-2deg); filter: brightness(1.18); }
    70% { transform: scale(0.98) rotate(1deg); }
}

.bocadillo-adivinanza {
    --bocadillo-fondo: #fffdf5;
    --bocadillo-borde: #2b1640;
    --bocadillo-texto: #25123d;
    --bocadillo-sombra: rgba(43, 22, 64, 0.85);
    position: absolute;
    left: 58%;
    bottom: 63%;
    width: min(52vw, 210px);
    min-height: 78px;
    display: grid;
    place-items: center;
    padding: 14px 16px 13px 22px;
    border: 3px solid var(--bocadillo-borde);
    border-radius: 50% 48% 46% 50%;
    background: var(--bocadillo-fondo);
    box-shadow: 0 6px 0 var(--bocadillo-sombra), 0 10px 16px rgba(0, 0, 0, 0.3);
    animation: bocadillo-flota 3.4s ease-in-out infinite 0.35s;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.bocadillo-adivinanza.bocadillo-60 { --bocadillo-fondo: #fff2b8; --bocadillo-borde: #7a5710; --bocadillo-texto: #4d3403; --bocadillo-sombra: rgba(122, 87, 16, 0.72); }
.bocadillo-adivinanza.bocadillo-30 { --bocadillo-fondo: #ffe17a; --bocadillo-borde: #845500; --bocadillo-texto: #4a2b00; --bocadillo-sombra: rgba(132, 85, 0, 0.74); }
.bocadillo-adivinanza.bocadillo-20 { --bocadillo-fondo: #ffc94f; --bocadillo-borde: #803b00; --bocadillo-texto: #482000; --bocadillo-sombra: rgba(128, 59, 0, 0.76); }
.bocadillo-adivinanza.bocadillo-ayuda { --bocadillo-fondo: #bdf6ce; --bocadillo-borde: #176b3a; --bocadillo-texto: #0d4724; --bocadillo-sombra: rgba(23, 107, 58, 0.72); }

.bocadillo-adivinanza::before,
.bocadillo-adivinanza::after {
    content: "";
    position: absolute;
    left: -19px;
    bottom: 13px;
    width: 30px;
    height: 25px;
    background: var(--bocadillo-fondo);
    transform: skewX(-28deg) rotate(22deg);
}

.bocadillo-adivinanza::before {
    z-index: -1;
    border-left: 3px solid var(--bocadillo-borde);
    border-bottom: 3px solid var(--bocadillo-borde);
}

.bocadillo-adivinanza::after {
    left: -12px;
    bottom: 17px;
    width: 23px;
    height: 19px;
    background: var(--bocadillo-fondo);
}

.bocadillo-adivinanza span {
    color: var(--bocadillo-texto);
    font-size: clamp(0.74rem, 3.5vw, 0.98rem);
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    overflow-wrap: anywhere;
}

.bocadillo-adivinanza.entrando {
    animation: bocadillo-aparece 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bocadillo-aparece {
    from { transform: scale(0.2) rotate(-12deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes bocadillo-flota {
    0%, 100% { transform: translateY(0) rotate(-0.45deg); }
    50% { transform: translateY(-5px) rotate(0.45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mascota-adivinanza, .mascota-adivinanza.entrando, .mascota-adivinanza.cambiando, .mascota-escuchando-respuesta.apareciendo, .mascota-secreto-espera.apareciendo, .bocadillo-adivinanza, .bocadillo-adivinanza.entrando { animation: none; }
}

/* El volumen pertenece a la interfaz global, no a la tarjeta de juego. */
.host-game-screen #volumen-reproductor-container {
    position: fixed;
    z-index: 1100;
    top: 50%;
    right: max(10px, env(safe-area-inset-right));
    bottom: auto;
    height: 246px;
    transform: translateY(-50%);
    background: rgba(8, 11, 29, 0.92) !important;
    border-color: rgba(34, 211, 238, 0.42) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.48), 0 0 22px rgba(6, 182, 212, 0.16), inset 0 1px rgba(255,255,255,0.1);
}

@media (max-height: 680px) {
    .host-game-screen #volumen-reproductor-container {
        top: 46%;
        height: 210px;
    }
}

.host-game-screen, #pantalla-clasificacion { position: relative; }
.host-room-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.host-room-header .room-badge { margin: 0; }
.btn-configuracion-host { padding: 8px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(168,85,247,.22); color: #fff; font-weight: 800; cursor: pointer; }
.modal-configuracion-host { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; padding: 18px; background: rgba(10,7,20,.94); backdrop-filter: blur(12px); }
.panel-configuracion-host { position: relative; width: min(94vw, 440px); max-height: 90vh; overflow: auto; padding: 24px; border: 1px solid rgba(168,85,247,.45); border-radius: 22px; background: #171027; box-shadow: 0 22px 55px rgba(0,0,0,.6); }
.panel-configuracion-host h2 { margin-top: 0; }
.cerrar-modal-configuracion { position: fixed; top: 18px; right: 20px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.13); color: #fff; font-size: 2rem; cursor: pointer; }