/* Botones del juego: aspecto "pildora" con relieve, pensados para pantalla grande y movil.
   Los ids (easyBtn, hardBtn, adukenBtn, cancelarBtn, muteBtn) los usa game.js: no cambiarlos. */

.game-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 980px;
    margin: 8px auto 4px;
}

.btn-game {
    --c1: #6f7bff;
    --c2: #3d49c1;
    --shadow: rgba(32, 40, 120, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    color: #fff;
    font: 700 1rem/1.1 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--shadow), 0 8px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.btn-game .ico { font-size: 1.15em; line-height: 1; }

.btn-game:hover { filter: brightness(1.08); transform: translateY(-2px); }

.btn-game:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--shadow), 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-game:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.btn-easy   { --c1: #4ade80; --c2: #16a34a; --shadow: rgba(10, 90, 40, 0.55); }
.btn-hard   { --c1: #fb7185; --c2: #dc2626; --shadow: rgba(120, 20, 20, 0.55); }
.btn-aduken { --c1: #60d5ff; --c2: #2563eb; --shadow: rgba(20, 50, 140, 0.55); }
.btn-cancel { --c1: #9aa3b8; --c2: #5b6478; --shadow: rgba(40, 46, 60, 0.55); }
.btn-sound  { --c1: #ffd54a; --c2: #f59e0b; --shadow: rgba(140, 80, 0, 0.55); color: #3b2500; text-shadow: none; }

/* Sonido apagado: se ve apagado/atenuado */
.btn-sound[aria-pressed="true"] { --c1: #cbd1de; --c2: #8f98ab; --shadow: rgba(50, 56, 72, 0.5); color: #2b3142; }

.btn-aduken { animation: aduken-glow 2.4s ease-in-out infinite; }
@keyframes aduken-glow {
    0%, 100% { box-shadow: 0 4px 0 var(--shadow), 0 8px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 rgba(96, 213, 255, 0); }
    50%      { box-shadow: 0 4px 0 var(--shadow), 0 8px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 18px rgba(96, 213, 255, 0.85); }
}

/* Movil: rejilla de 2 columnas con objetivos tactiles grandes */
@media (max-width: 600px) {
    .game-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 4px;
    }
    .btn-game { min-height: 54px; padding: 10px 12px; font-size: .95rem; }
    .btn-aduken { grid-column: 1 / -1; min-height: 60px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-game, .btn-aduken { transition: none; animation: none; }
}