/* Guitar Imp — fretboard
   The neck itself is shared furniture and lives in style.css, alongside the
   panel and the controls. What is left here is only what the drill adds: the
   right and wrong answers, the question row and the trouble list. */

/* --------------------------------------------------------------------------
   Answers
   -------------------------------------------------------------------------- */

/* Green is only ever the right answer. */
.cell.is-right .dot {
    background: var(--imp);
    color: #10230a;
    text-shadow: none;
    box-shadow: 0 0 15px rgba(125, 201, 95, .6);
}

.cell.is-wrong .dot {
    color: var(--glow);
    text-shadow: none;
    box-shadow: inset 0 0 0 2px var(--glow);
    animation: dot-nudge .3s ease-out;
}

@keyframes dot-nudge {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   The drill
   -------------------------------------------------------------------------- */

/* The question and the Start button share a row. A full-width button under them
   would push the twelfth fret off a phone screen, and in the drill the board
   itself is the control that matters. */
.drill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(10px, 3vw, 14px);
}

.drill__text { min-width: 0; }

.drill__prompt {
    margin: 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.15;
}

.drill__prompt .note { color: var(--glow); }

.drill__score {
    margin: 2px 0 0;
    min-height: 1.1em;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--nickel);
    font-variant-numeric: tabular-nums;
}

.drill__go {
    flex: 0 0 auto;
    padding: 11px 20px;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.fretboard.is-map .drill { display: none; }

/* --------------------------------------------------------------------------
   Trouble spots
   -------------------------------------------------------------------------- */

.ref__empty {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--nickel);
}

.trouble__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(236, 226, 207, .07);
    font-size: 13px;
}

.trouble__note {
    font-weight: 700;
    color: var(--glow);
}

.trouble__count {
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--nickel);
    font-variant-numeric: tabular-nums;
}

.trouble__reset {
    margin-top: 12px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    color: var(--bone-dim);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}