/* BEAT-ECHO-specific styles: just the controls key chips. The howto-list
   structural rules live in shared.css; only the <strong>/<em> highlight
   colors are overridden per game (echo keeps the shared defaults). */

.controls {
    margin: 16px 0 18px;
}

.controls__row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-1);
}

.controls__key kbd {
    font: inherit;
    font-weight: 700;
    color: var(--ink-0);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 6px;
}

.controls__key--kick  kbd { border-color: rgba(0, 240, 255, 0.6); color: var(--neon-cyan); }
.controls__key--snare kbd { border-color: rgba(255, 43, 214, 0.6); color: var(--neon-magenta); }
.controls__key--bass  kbd { border-color: rgba(43, 255, 157, 0.6); color: var(--neon-emerald); }

.controls__alt {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ink-1);
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .controls__row { font-size: 12px; gap: 8px; }
}