/* La página del juego: solo el juego, a toda la ventana (el modo pantalla
   del HUD de hQuest, games-fullscreen.css, hace el resto). */
html, body.jugar {
    height: 100%;
    margin: 0;
    background: #120d09;
    overflow: hidden;
}

/* La utilidad de hQuest para ocultar un estado puntual (el panel del
   resultado, por ejemplo): allí vive en layout/app-shell.css, que aquí no
   se copia entera. */
.hidden { display: none !important; }

/* El color contra la máquina, en el selector de nivel (js0e askLevel,
   `opciones`): tres botones en fila encima de los niveles. */
.game-levels__opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
}
.game-levels__opciones-titulo { width: 100%; text-align: center; font-size: 0.9rem; opacity: 0.8; }
.game-levels__opcion {
    min-width: 92px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid rgba(232, 180, 90, 0.35);
    border-radius: 999px;
    background: rgba(28, 21, 16, 0.85);
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.game-levels__opcion[aria-pressed="true"] { background: #e8b45a; border-color: #e8b45a; color: #24170a; }
.game-levels__opcion:focus-visible { outline: 2px solid #e8b45a; outline-offset: 2px; }

/* 🔊 El panel del volumen (js/jugar.js): música y duelos */
.vol-panel {
    position: fixed;
    z-index: 58;                /* encima del HUD (50) y del resultado (55), debajo de las reglas (60) */
    min-width: 240px;
    padding: 12px 14px;
    border: 1px solid rgba(232, 180, 90, 0.35);
    border-radius: 12px;
    background: rgba(20, 15, 11, 0.96);
    color: #f1e4c8;
    font: 600 0.95rem/1.2 system-ui, sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.vol-panel[hidden] { display: none; }
.vol-panel__fila {
    display: grid;
    grid-template-columns: 4.5em 1fr 3.8em;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.vol-panel__fila input { width: 100%; accent-color: #e8b45a; }
.vol-panel__fila output { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0.85; }