.fretboard-wrapper {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 15px;
    position: relative;
}

.fretboard { 
    display: inline-flex; 
    flex-direction: column; 
    align-items: flex-start; 
    background: var(--surface-board); 
    padding: 15px 15px 15px 35px; 
    border-radius: 2px; 
    border: 2px solid var(--line); 
    box-shadow: var(--shadow-board); 
    min-width: 850px; 
}
.num-row { display: flex; margin-top: 10px; }
.fret-num-cell { display: flex; justify-content: center; width: var(--fret-w); border-right: 2px solid transparent;
    color: var(--fret-number); font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; }
.fret-num-cell.nut { width: var(--nut-w); border-right-width: 6px; }
.fret.phone-hidden, .fret-num-cell.phone-hidden { display: none; }
/* the neck is not text: no selection and no Copy/Paste menu on long-press */
.fretboard, .fretboard *, .phone-actions, .phone-nav, .view-bar, .controls-sidebar button {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

.string { display: flex; align-items: center; margin: 6px 0; position: relative; }
.string::before { content: ''; position: absolute; left: 0; right: 0; z-index: 1; box-shadow: 0 1px 2px var(--string-shadow); }
.string:nth-child(1)::before { height: 1px; background: var(--string-high); } 
.string:nth-child(2)::before { height: 1.5px; background: var(--string-high); } 
.string:nth-child(3)::before { height: 2px; background: var(--string-high); } 
.string:nth-child(4)::before { height: 3px; background: var(--string-low); } 
.string:nth-child(5)::before { height: 4px; background: var(--string-low); } 
.string:nth-child(6)::before { height: 5px; background: var(--string-low); } 

:root { --fret-w: 55px; --nut-w: 35px; --fret-h: 38px; }
.fret { 
    width: var(--fret-w); height: var(--fret-h); display: flex; justify-content: center; align-items: center; 
    position: relative; z-index: 2; cursor: pointer; border-right: 2px solid var(--fret); 
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.fret:first-child { width: var(--nut-w); border-right: 6px solid var(--nut); border-left: none; } 

.fret.out-of-focus, .fret-num-cell.out-of-focus {
    opacity: 0.18;
    filter: grayscale(0.9);
}

.fret-marker { 
    position: absolute; width: 12px; height: 12px; background: var(--fret-marker); 
    border-radius: 50%; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); 
    opacity: 1;
}

.note { 
    width: 27px; height: 27px; border-radius: 50%; display: flex; justify-content: center; 
    align-items: center; font-size: 11px; font-weight: 800; border: none;
    background: #fff; color: #000; opacity: 0; transform: scale(0.5);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; 
    box-shadow: var(--shadow-note); font-family: 'Montserrat', sans-serif;
    text-transform: none;
}
.note.visible { opacity: 1; transform: scale(1); pointer-events: auto; }

.note.visible.passage { 
    opacity: 1; 
    transform: scale(0.82); 
    box-shadow: none;
}

/* The cell is a stacking context (position:relative + z-index:2):
   unless it is raised, the note glow and scale get covered by neighbouring cells. */
.fret.is-playing { z-index: 30; opacity: 1; filter: none; }

/* Note sounding NOW: stays lit for the whole step */
.note.playing {
    opacity: 1 !important;
    transform: scale(1.45) !important;
    outline: 3px solid var(--playing-outline);
    outline-offset: 2px;
    box-shadow: var(--shadow-playing) !important;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

/* Trail: notes already played in the current sequence */
.note.played {
    outline: 2px solid var(--trail-outline);
    outline-offset: 2px;
}

/* Badge with the note's order in the sequence */
.note[data-step]::after {
    content: attr(data-step);
    position: absolute;
    top: -9px; right: -11px;
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px;
    background: var(--surface-ground); color: var(--action);
    border: 1px solid var(--action);
    font-size: 8px; line-height: 13px; font-weight: 800;
}
.note { position: relative; }

/* strings outside the selected string set */
.string.string-off { opacity: 0.22; filter: grayscale(0.9); transition: opacity 0.3s ease, filter 0.3s ease; }

/* ---- Left-handed: the neck mirrored, nut on the right ---- */
body.lefty .fretboard { padding: 15px 35px 15px 15px; }
body.lefty .string, body.lefty .num-row { flex-direction: row-reverse; }
body.lefty .fret { border-right: none; border-left: 2px solid var(--fret); }
body.lefty .fret:first-child { border-left: 6px solid var(--nut); border-right: none; }
body.lefty .fret-num-cell { border-right: none; border-left: 2px solid transparent; }
body.lefty .fret-num-cell.nut { border-left-width: 6px; }
body.lefty .note[data-step]::after { right: auto; left: -11px; }