/* ============================================================
   Fretboard — Guitar neck visual, dark ebony style
   ============================================================ */

/* ── Wrapper (scrollable) ─────────────────────────────────── */
.fretboard-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.75rem 0 1rem;
}

/* ── Neck container (dark background = guitar neck) ──────── */
.fb-neck {
    display: flex;
    flex-direction: column;
    min-width: 540px;
    background: #0d0d0d;
    border-radius: 8px;
    padding: 6px 4px 4px;
    user-select: none;
    border: 1px solid #1e1e1e;
}

/* ── Shared: label + cell layout ─────────────────────────── */
.fb-row,
.fb-dot-row,
.fb-num-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* ── String rows ─────────────────────────────────────────── */
.fb-row {
    height: 42px;
    transition: opacity 0.25s ease;
}

.fb-row--dim {
    opacity: 0.22;
    pointer-events: none;
}

.fb-row--active {
    opacity: 1;
}

/* ── Dot row (between G and D strings) ───────────────────── */
.fb-dot-row {
    height: 16px;
}

/* ── Number row ──────────────────────────────────────────── */
.fb-num-row {
    height: 20px;
    margin-top: 2px;
}

/* ── Label column (string name) ──────────────────────────── */
.fb-label {
    width: 24px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #444;
    letter-spacing: 0.02em;
    font-family: monospace;
}

.fb-row--active .fb-label {
    color: #bbb;
}

/* ── Individual fret cells ───────────────────────────────── */
.fb-cell {
    flex: 1;
    min-width: 30px;
    height: 42px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fret wire: right border */
    border-right: 1px solid #3a3a3a;
}

/* Open string / nut column */
.fb-cell--open {
    flex: 0 0 32px;
    /* Nut: thick warm gold border */
    border-right: 4px solid #8a7040;
}

/* Dot row cells */
.fb-dot-cell {
    flex: 1;
    min-width: 30px;
    height: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #2a2a2a;
}

.fb-dot-cell.fb-cell--open {
    flex: 0 0 32px;
    border-right: 4px solid #8a7040;
}

/* Number row cells */
.fb-num-cell {
    flex: 1;
    min-width: 30px;
    height: 20px;
    text-align: center;
    font-size: 0.6rem;
    color: #555;
    font-family: serif;
    letter-spacing: -0.02em;
    border-right: 1px solid transparent; /* alignment */
}

.fb-num-cell.fb-cell--open {
    flex: 0 0 32px;
}

/* ── String lines ────────────────────────────────────────── */
.fb-string-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.fb-string-line--E_high { height: 1px;  background: linear-gradient(90deg, #777, #555); }
.fb-string-line--B      { height: 1px;  background: linear-gradient(90deg, #777, #555); }
.fb-string-line--G      { height: 2px;  background: linear-gradient(90deg, #888, #666); }
.fb-string-line--D      { height: 2px;  background: linear-gradient(90deg, #999, #777); }
.fb-string-line--A      { height: 3px;  background: linear-gradient(90deg, #aaa, #888); }
.fb-string-line--E_low  { height: 4px;  background: linear-gradient(90deg, #bbb, #999); }

/* ── Position inlay dots ─────────────────────────────────── */
.fb-pos-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #484848;
    box-shadow: 0 0 3px rgba(0,0,0,0.8);
    flex-shrink: 0;
}

/* Double dot: side by side */
.fb-pos-dot--a,
.fb-pos-dot--b {
    width: 7px;
    height: 7px;
    background: #484848;
    border-radius: 50%;
    position: absolute;
}

.fb-pos-dot--a { left: calc(50% - 7px); }
.fb-pos-dot--b { left: calc(50% + 1px); }

.fb-dot-cell {
    position: relative; /* for absolute dot positioning */
}

/* ── Note circles (on active string) ─────────────────────── */
.fb-circle {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: monospace;
    color: transparent; /* hidden until answer */
    background: transparent;
    border: 1.5px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.1s ease;
    pointer-events: none;
    z-index: 2;
    letter-spacing: -0.03em;
}

/* Tappable cell: show subtle ring on hover */
.fb-cell--tap {
    cursor: pointer;
}

.fb-cell--tap:hover .fb-circle {
    border-color: rgba(233, 69, 96, 0.5);
    background: rgba(233, 69, 96, 0.08);
}

.fb-cell--tap:active .fb-circle {
    border-color: #e94560;
    background: rgba(233, 69, 96, 0.2);
}

/* Focus ring */
.fb-cell--tap:focus-visible {
    outline: 2px solid #e94560;
    outline-offset: -2px;
    z-index: 3;
}

/* ── Answer states ───────────────────────────────────────── */

/* Correct: green circle with note name */
.fb-cell--correct .fb-circle {
    background: #2e7d32;
    border-color: #4caf50;
    color: #fff;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

/* Incorrect: red circle */
.fb-cell--incorrect .fb-circle {
    background: #b71c1c;
    border-color: #f44336;
    color: #fff;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.6);
}

/* Target (where correct answer was): accent ring with note */
.fb-cell--target .fb-circle {
    background: rgba(233, 69, 96, 0.25);
    border-color: #e94560;
    color: #e94560;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.4);
}

/* ── Mode switcher pills ─────────────────────────────────── */
.mode-switcher {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.mode-btn {
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    border: 1px solid #0f3460;
    background: transparent;
    color: #888;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    border-color: #533483;
    color: #e0e0e0;
}

.mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: #fff;
    font-weight: 600;
}

/* ── Fretboard mode prompt ───────────────────────────────── */
.fretboard-prompt {
    text-align: center;
    margin-bottom: 0.75rem;
}

.fretboard-prompt .prompt-chord {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.02em;
}

.fretboard-prompt .prompt-interval {
    font-size: 1rem;
    color: #888;
    margin-top: 0.2rem;
}

.fretboard-prompt .prompt-string {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    background: #16213e;
    border: 1px solid #e94560;
    color: #e94560;
    font-size: 0.8rem;
    font-weight: 600;
}