/* Fretboard Container */
#fretboard-container {
    width: 100%;
    height: 180px;
    /* Adjust based on footer height */
    background-color: var(--bg-dark);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

/* The Neck - High Quality Wood */
.fretboard-neck {
    width: 100%;
    max-width: 1200px;
    height: 140px;
    /* Basic dark fallback */
    background-color: #2a2a2a;
    /* High Res Wood Texture */
    background-image: url('../assets/images/fretboard.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* Scale height to fit, repeat width */

    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    overflow: visible;
    display: flex;
    transition: box-shadow 0.3s ease;

    padding-left: 64px;
    /* Nut width padding */
    margin-left: 50px;
    /* Headstock spacing */
}

/* Recording Mode: Neon Glow Overlays Wood */
body.recording-active .fretboard-neck {
    /* Stronger outer glow + Deep inner red wash */
    box-shadow:
        0 0 30px var(--danger-color),
        inset 0 0 50px rgba(255, 42, 109, 0.6),
        inset 0 0 100px rgba(255, 42, 109, 0.2);
    border: 2px solid var(--danger-color);
    animation: recording-pulse 2s infinite alternate;
}

@keyframes recording-pulse {
    from {
        box-shadow: 0 0 20px var(--danger-color), inset 0 0 30px rgba(255, 42, 109, 0.5);
    }

    to {
        box-shadow: 0 0 40px var(--danger-color), inset 0 0 60px rgba(255, 42, 109, 0.8);
    }
}

/* Frets (Vertical Lines) - Metallic */
.fret {
    background: transparent;
    /* Interval is wood */
    border-right: 0;
    /* Clear old border */
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
}

/* The Fret Wire (Pseudo-element) */
.fret::after {
    /* Fret Wire Visual */
    content: '';
    /* Was fret number, move number to ::before or separate */
    position: absolute;
    right: -1.5px;
    /* Center on edge */
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to right, #333, #eee 40%, #fff 50%, #999 100%);
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Fret Number (New Pseudo) */
.fret::before {
    content: attr(data-fret);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    text-shadow: 0 1px 2px black;
}

/* Strings (Horizontal Lines) - Realistic */
.string-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0;
    /* Padding for top/bottom strings */
    box-sizing: border-box;
    pointer-events: none;
    /* Let clicks pass through to the fretboard/note areas */
}

.string {
    width: 100%;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    /* Shadow on fretboard */
}

/* Nickel Wound Texture (CSS Gradient pattern) */
.string {
    /* Vertical repeating gradient to simulate winding */
    background-image: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.4) 0px,
            rgba(0, 0, 0, 0.1) 1px,
            rgba(255, 255, 255, 0.4) 2px);
}

/* String widths and specific colors */
.string:nth-child(4) {
    /* Low E */
    height: 5px;
    background-color: #a0a0a0;
}

.string:nth-child(3) {
    /* A */
    height: 4px;
    background-color: #a8a8a8;
}

.string:nth-child(2) {
    /* D */
    height: 3px;
    background-color: #b0b0b0;
}

.string:nth-child(1) {
    /* G */
    height: 2px;
    background-color: #c0c0c0;
    background-image: none;
    /* Plain steel usually, or thinner winding */
}

/* Guitar extra strings */
.string:nth-child(6) {
    height: 4.5px;
    background-color: #999;
}

.string:nth-child(5) {
    height: 3.8px;
    background-color: #aaa;
}

/* Note Markers (Dots) */
.note-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--accent-color);
    /* Amber */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--accent-color), 0 0 5px white;
    z-index: 20;
    pointer-events: none;
    /* Interaction is handled by the fret area */
    opacity: 0;
    transition: opacity 0.15s ease-out;
    /* Faster fade out */
}

/* Recording Mode: Markers become Red (Danger Color) */
body.recording-active .note-marker {
    background-color: var(--danger-color);
    box-shadow: 0 0 10px var(--danger-color), 0 0 5px white;
}

.note-marker.active {
    opacity: 1;
    transition: opacity 0.02s ease-in;
    /* Very fast fade in */
}

/* Interaction Layer (Invisible clickable areas) */
.interaction-layer {
    position: absolute;
    top: 0;
    left: 64px;
    /* Align with frets, after nut padding (60px nut + 4px border) */
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 15;
}

.string-interaction-row {
    flex: 1;
    display: flex;
}

.fret-interaction-cell {
    /* Widths must match the visual frets */
    height: 100%;
    cursor: pointer;
    position: relative;
    /* Debug: border: 1px solid red; */
}

/* Position note marker at the RIGHT side of the cell (where finger presses) */
/* Slightly left so right edge overlaps fret wire for natural feel */
.fret-interaction-cell .note-marker {
    position: absolute;
    right: 0;
    top: 50%;
    left: auto;
    transform: translate(25%, -50%);
}

.fret-interaction-cell:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Recording Mode: Hover becomes faint Red */
body.recording-active .fret-interaction-cell:hover {
    background-color: rgba(255, 42, 109, 0.15);
    box-shadow: inset 0 0 5px rgba(255, 42, 109, 0.2);
}

/* Single Fret Markers (Inlays) */
.inlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 50%;
    z-index: 1;
}

/* Inlays - Pearl/Abalone */
.inlay,
.inlay.double::before,
.inlay.double::after {
    background: radial-gradient(circle at 30% 30%, #fff, #ddd, #ccc);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
}

.inlay.double {
    width: 30px;
    /* Container for two dots */
    height: 12px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
}

.inlay.double::before,
.inlay.double::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 50%;
    display: block;
}

/* Nut Area - Bone/Ivory Realistic */
.nut-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    /* Increased from 30px */
    height: 100%;
    /* Keep width/layout */
    background: #fdfae7;
    /* Ivory base */
    /* Texture */
    background-image: linear-gradient(to right, #eaddbb, #fffbf0 20%, #eaddbb 90%, #bea966);
    border-right: 2px solid #bea966;
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    z-index: 16;
}

/* Recording Mode: Nut Area Border Glow */
body.recording-active .nut-area {
    border-right-color: var(--danger-color);
    box-shadow: 2px 0 10px rgba(255, 42, 109, 0.4);
}

.nut-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.nut-cell:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Recording Mode: Nut Cell Hover */
body.recording-active .nut-cell:hover {
    background-color: rgba(255, 42, 109, 0.15);
}

.nut-cell .note-marker {
    position: relative;
    transform: none;
}

/* Headstock - Glossy Black */
.headstock {
    position: absolute;
    left: -50px;
    top: 0;
    width: 50px;
    height: 100%;
    background-color: #000;
    background-image: url('../assets/images/headstock.png');
    background-size: cover;
    background-position: right center;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5px 0;
}

/* Tuning Pegs - Gold/Chrome */
.tuning-peg {
    width: 20px;
    height: 12px;
    background: linear-gradient(to bottom, #ddd, #fff 50%, #999);
    border: 1px solid #666;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    border-radius: 3px;
    margin-left: 5px;
}