/* ==========================================================================
   controls.css — primary action button and small pill buttons
   ========================================================================== */

/* ---- Primary action (TOSS / ASK) ---- */

.action-btn {
    position: absolute;
    bottom: var(--action-bottom);
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--action-size);
    height: var(--action-size);
    border: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition:
        transform 0.3s var(--ease-snap),
        box-shadow 0.3s ease;
}

@media (min-width: 768px) {
    .action-btn { font-size: 1.2rem; }
}

.action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    transform: scale(0);
    transition: transform 0.4s var(--ease-out-expo);
}

.action-btn:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
}

.action-btn:hover::before { transform: scale(1); }
.action-btn:active        { transform: translateX(-50%) scale(0.95); }

/* ---- Pill buttons (install, retry, toast action) ---- */

.pill-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.1);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 150ms var(--ease-standard);
}

.pill-btn:hover { background-color: rgb(255 255 255 / 0.2); }