/* BopBeat: the Beat Keeper pad (see js/bop-beat.js).
   Same look in the single-device modal, the Live Together host form and the player app. */
.bbt {
    --bbt-size: min(68vw, 15.5rem);
    --bbt-accent: #34d399;
    display: grid;
    justify-items: center;
    gap: 1rem;
    width: 100%;
    color: #f8faff;
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Tap / Swing --------------------------------------------------------------- */
.bbt-switch {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}
.bbt-switch button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.5rem;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(248, 250, 255, .72);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.bbt-switch button[aria-checked="true"] { background: #fff; color: #0b1020; }
.bbt-switch svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bbt[data-state="running"] .bbt-switch,
.bbt[data-state="sending"] .bbt-switch,
.bbt[data-state="sent"] .bbt-switch { opacity: .35; pointer-events: none; }

/* The pad ------------------------------------------------------------------- */
.bbt-pad {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .35rem;
    width: var(--bbt-size);
    aspect-ratio: 1;
    padding: 1.6rem;
    border: 0;
    border-radius: 50%;
    background: #151b2e;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.bbt-pad:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.bbt-pad strong { font-size: clamp(1.15rem, 5vw, 1.45rem); line-height: 1.15; font-weight: 800; }
.bbt-pad small { max-width: 11rem; color: rgba(248, 250, 255, .62); font-size: .85rem; line-height: 1.3; }
.bbt[data-state="running"] .bbt-pad strong,
.bbt[data-state="listening"] .bbt-pad strong { font-size: clamp(2rem, 11vw, 2.8rem); letter-spacing: -.02em; }

/* Progress ring: fills as the beats come in. */
.bbt-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(var(--bbt-accent) calc(var(--bbt-progress) * 360deg), rgba(255, 255, 255, .1) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    pointer-events: none;
}
.bbt-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    opacity: 0;
    transform: scale(.9);
    pointer-events: none;
}
.bbt.is-hit .bbt-pulse { animation: bbt-hit .32s ease-out; }
.bbt.is-hit .bbt-pad { animation: bbt-press .16s ease-out; }
@keyframes bbt-hit { 0% { opacity: 1; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes bbt-press { 50% { transform: scale(.97); } }
.bbt[data-state="sent"] .bbt-pad { background: #10392d; cursor: default; }
.bbt[data-state="sending"] .bbt-pad { cursor: default; }

/* Steadiness -------------------------------------------------------------- */
.bbt-meter {
    width: min(100%, 15rem);
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}
.bbt-meter-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--bbt-accent); transition: width .25s ease; }
.bbt-status { min-height: 1.3em; margin: 0; color: rgba(248, 250, 255, .7); font-size: .9rem; text-align: center; }

html.lv-battery .bbt.is-hit .bbt-pulse,
html.lv-battery .bbt.is-hit .bbt-pad { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .bbt.is-hit .bbt-pulse, .bbt.is-hit .bbt-pad { animation: none; }
    .bbt-meter-fill { transition: none; }
}