/* Gestos (ver gestos.ts). El rebote es una curva con sobrepaso. */
:root {
    --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Deslizar para desbloquear ─────────────────────────────────────────── */
/* pan-y: el scroll vertical sigue siendo del navegador; lo horizontal, del pomo. */
button.desliza {
    --p: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    padding-left: 2.4em;
}
button.desliza::after {            /* el relleno que va dejando el pomo */
    content: '';
    position: absolute; inset: 0;
    width: calc(var(--p) * 100%);
    background: var(--accent-soft);
    z-index: -1;
    pointer-events: none;
}
button.desliza::before {           /* el pomo */
    content: '›' / '';   /* alt vacío: si no, «›» entra en el nombre accesible del botón */
    position: absolute; top: 50%;
    left: calc(0.25em + var(--p) * (100% - 2.2em));
    width: 1.7em; height: 1.7em;
    margin-top: -0.85em;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--accent-fill);
    color: var(--on-accent-fill);
    box-shadow: inset 0 0 0 1px var(--accent-line), 0 1px 3px rgb(0 0 0 / 35%);
    font-weight: 700;
    pointer-events: none;
}
button.desliza.desliza-vuelve::before { transition: left 420ms var(--rebote); }
button.desliza.desliza-vuelve::after  { transition: width 420ms var(--rebote); }
button.desliza.desliza-mantiene::after { transition: width 600ms linear; width: 100%; opacity: .55; }
button.desliza.desliza-ok::before { content: '✓' / ''; }
button.desliza.desliza-pista::before { animation: desliza-pista 520ms var(--rebote); }
@keyframes desliza-pista {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(0.9em); }
}
/* Que el texto deje sitio al pomo aunque el botón traiga su propio padding (#readyBtn…). */
button.desliza:not(.desliza-mini) { padding-left: 2.4em !important; }

/* Solo icono (👤, silencio, ✕): sin pomo; mantener pulsado llena un anillo. */
button.desliza.desliza-mini { padding-left: revert; }
button.desliza.desliza-mini::before { content: none; }
button.desliza.desliza-mini::after {
    width: 100%; border-radius: inherit;
    background: conic-gradient(var(--accent) calc(var(--p) * 360deg), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    z-index: 1;
}
button.desliza.desliza-mini.desliza-mantiene::after { animation: anillo 600ms linear forwards; transition: none; opacity: 1; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes anillo { from { --p: 0; } to { --p: 1; } }
button.desliza.desliza-mini.desliza-pista { animation: mini-pista 420ms var(--rebote); }
@keyframes mini-pista { 30% { transform: scale(0.9); } 100% { transform: scale(1); } }

/* ── Grupos de opciones: se elige deslizando por encima ───────────────── */
.barre { touch-action: none; user-select: none; -webkit-user-select: none; }
.barre button.barre-sobre {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--accent);
    transition: transform 160ms var(--rebote);
}

/* Fuera de la vista, pero con foco de teclado (el botón de voltear set de la partida) */
.solo-teclado {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip-path: inset(50%) !important; margin: 0 !important;
}
.solo-teclado:focus-visible {      /* con teclado vuelve a verse */
    position: static !important; width: 100% !important; height: auto !important;
    clip-path: none !important; margin-top: 8px !important;
}

@media (prefers-reduced-motion: reduce) {
    button.desliza.desliza-vuelve::before, button.desliza.desliza-vuelve::after { transition-duration: 1ms; }
    button.desliza.desliza-pista::before { animation: none; }
}