body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #222;
    color: white;
    transition: background 0.3s, color 0.3s;
    padding: 0 2vw;
}

h1 {
    margin-top: 2vh;
    font-size: clamp(24px, 5vw, 36px);
    transition: font-size 0.3s;
}

.scoreboard {
    margin-bottom: 2vh;
    font-size: clamp(16px, 2.5vw, 20px);
    transition: font-size 0.3s;
}

.hands {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 5vw, 60px);
    margin: 2vh 0;
    flex-wrap: wrap;
    transition: gap 0.3s;
}

.hands img {
    width: clamp(100px, 20vw, 180px);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s, width 0.3s;
}

.opciones button,
.acciones button {
    background-color: #444;
    color: white;
    border: none;
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
    margin: 0.5vh 0.5vw;
    font-size: clamp(16px, 2vw, 20px);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}

.opciones button:hover,
.acciones button:hover {
    background-color: #666;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Animación de sacudir las manos */
@keyframes shake {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
    75% { transform: translateY(-5px); }
}

.shake {
    animation: shake 0.5s ease-in-out infinite;
}

/* Destacar ganador/perdedor */
.ganador {
    border: 4px solid lime;
    border-radius: 10px;
    box-shadow: 0 0 25px lime;
    transition: box-shadow 0.3s, border 0.3s;
}

.perdedor {
    opacity: 0.6;
    transition: opacity 0.3s;
}

/* Resultado animado */
#resultado {
    font-size: clamp(18px, 3vw, 24px);
    margin-top: 2vh;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}

#resultado.show {
    transform: scale(1.2);
    opacity: 1;
}

/* Historial */
#historial {
    margin-top: 2vh;
    max-height: 40vh;
    overflow-y: auto;
    text-align: left;
    padding: 1vh 1vw;
    border: 1px solid #555;
    border-radius: 8px;
    width: clamp(90%, 320px, 400px);
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(12px, 1.5vw, 14px);
    transition: width 0.3s, font-size 0.3s;
}

/* Tema claro */
body.light {
    background-color: #f0f0f0;
    color: #222;
}

body.light .opciones button,
body.light .acciones button {
    background-color: #ddd;
    color: black;
    transition: background 0.3s, color 0.3s;
}

/* MEDIA QUERY FLUIDO PARA MÓVILES: hacer manos un poco más grandes */
@media (max-width: 600px) {
    .hands img {
        width: clamp(120px, 30vw, 160px);
    }
}