/**
 *  LIVE GUITAR TUNER
 */

.tuner-card {
    max-width: 560px;
    margin: 0 auto;
}

.tuner-mic-btn {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    box-shadow: 0 8px 30px rgba(124, 58, 237, .35);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    cursor: pointer;
}

.tuner-mic-btn:hover {
    transform: translateY(-2px);
}

.tuner-mic-btn.listening {
    background: linear-gradient(135deg, #dc3545, #ef476f);
    animation: tuner-pulse 1.6s ease-in-out infinite;
}

@keyframes tuner-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, .45); }
    70%  { box-shadow: 0 0 0 18px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.tuner-status {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .65;
    margin-top: .6rem;
}

/* ---------- gauge ---------- */

.tuner-gauge-wrap {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.tuner-gauge-wrap svg {
    width: 100%;
    height: auto;
    display: block;
}

.tuner-needle {
    transition: transform .12s ease-out;
}

.tuner-note {
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    transition: color .15s ease;
}

.tuner-octave {
    font-size: 1.4rem;
    font-weight: 600;
    opacity: .55;
    vertical-align: super;
}

.tuner-hz {
    font-size: .95rem;
    opacity: .6;
    margin-top: .15rem;
}

.tuner-cents {
    font-size: .85rem;
    font-weight: 700;
    margin-top: .35rem;
    padding: .2rem .65rem;
    border-radius: 50px;
    display: inline-block;
}

.tuner-note.state-flat,
.tuner-cents.state-flat { color: #06b6d4; }

.tuner-note.state-sharp,
.tuner-cents.state-sharp { color: #ffc107; }

.tuner-note.state-good,
.tuner-cents.state-good { color: #28a745; }

.tuner-note.state-idle { color: inherit; opacity: .35; }

.tuner-cents.state-good { background: rgba(40, 167, 69, .14); }
.tuner-cents.state-flat { background: rgba(6, 182, 212, .14); }
.tuner-cents.state-sharp { background: rgba(255, 193, 7, .14); }
.tuner-cents.state-idle { background: rgba(127, 127, 127, .12); color: inherit; opacity: .55; }

/* ---------- string chips ---------- */

.tuner-strings {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.tuner-string-chip {
    min-width: 58px;
    padding: .5rem .4rem;
    text-align: center;
    border-radius: .75rem;
    border: 1px solid var(--bs-border-color, rgba(255,255,255,.12));
    background: transparent;
    color: inherit;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.tuner-string-chip small {
    display: block;
    font-weight: 500;
    font-size: .68rem;
    opacity: .55;
}

.tuner-string-chip:hover {
    border-color: #7c3aed;
    transform: translateY(-1px);
}

.tuner-string-chip.nearest {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, .14);
}

.tuner-string-chip.nearest.in-tune {
    border-color: #28a745;
    background: rgba(40, 167, 69, .16);
}

.tuner-string-chip:active {
    transform: scale(.96);
}

/* ---------- permission / error state ---------- */

.tuner-alert {
    display: none;
}

.tuner-alert.show {
    display: block;
}