@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

:root {
    --background: #FAFAFA;
    --text-primary: #333333;
    --text-secondary: #666666;
    --primary: #3B82F6;
    --border: #D1D1D1;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --fretboard-height: 200;
    --number-of-strings: 6;
    --string-height: 8;
    --half-string-height: calc(var(--string-height) / 2);
    --string-top-position: calc(var(--fretboard-height) / var(--number-of-strings) / 2 - var(--half-string-height));
    --double-fretmark-position-1: calc(var(--fretboard-height) * 0.25);
    --double-fretmark-position-2: calc(var(--fretboard-height) * 0.75);
    --noteDotOpacity: 0;
}
* {
    padding: 0;
    margin: 0;
}

/* Flexbox layout for the header */
.header-container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

/* Header */
.header-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically if needed */
}
.header {
    background-color: #3B82F6;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.header-title {
    margin: 0;
    font-size: 2rem;
}

/* Instructions Section */
.intro-text {
    margin-bottom: 20px;
}

#toggle-intro {
    margin-bottom: 10px;
    cursor: pointer;
}

.intro-list {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
}

.intro-list.hidden {
    display: none;
}

/* Style the logo */
/* Style the logo as a guitar pick */
.logo {
    width: 50px; /* Adjust the size of the circle */
    height: 50px; /* Ensure the height matches the width for a perfect circle */
    background-color: #32CD32; /* Optional: Add a background color if the image has transparency */
    border-radius: 50%; /* Make the logo a circle */
    object-fit: cover; /* Ensure the image fits within the circle without distortion */
    margin-right: 10px; /* Add spacing between the logo and the text */
    display: inline-block; /* Ensure it behaves like an inline element */
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.type-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.cKey-btn    { background-color: #2563eb; color: #fff; } /* Bold Blue */
.fKey-btn    { background-color: #059669; color: #fff; } /* Bold Green */
.bbKey-btn   { background-color: #f59e42; color: #222; } /* Bold Orange-Yellow */
.ebKey-btn   { background-color: #dc2626; color: #fff; } /* Bold Red */
.abKey-btn   { background-color: #7c3aed; color: #fff; } /* Bold Purple */
.dbKey-btn   { background-color: #db2777; color: #fff; } /* Bold Pink */
.gKey-btn    { background-color: #0ea5e9; color: #fff; } /* Bold Sky Blue */
.dKey-btn    { background-color: #eab308; color: #222; } /* Bold Gold */
.aKey-btn    { background-color: #22c55e; color: #fff; } /* Bold Green */
.eKey-btn    { background-color: #ea580c; color: #fff; } /* Bold Orange */
.bKey-btn    { background-color: #4f46e5; color: #fff; } /* Bold Indigo */
.fsKey-btn   { background-color: #be185d; color: #fff; } /* Bold Deep Pink */
.csKey-btn   { background-color: #14b8a6; color: #fff; } /* Bold Teal */
.key-btn:focus, .key-btn:hover {
    filter: brightness(0.9);
    outline: 2px solid #222;
}

#fretboard-heading {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

#type-btn {
    display: none; /* Hide the buttons initially */
}

h1, h2 {
    color: #222;
    font-weight: 700;
}

h3 {
    color: var(--text-primary);
    font-weight: 600;
}

p {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#logo {
    max-width: 5%;
    height: auto;
    border-radius: 10px;
}
.settings {
    display: flex;
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #444;
    background-color: #282828;
}

label {
    margin: 0 10px;
}

.string {
    width: 100%;
    height:100%;
    display: flex;
    position: relative;
}
.string::before {
    content: '';
    width: 100%;
    height: calc(var(--string-height) * 1px);
    background: linear-gradient(#eee, #999);
    /* box-shadow: 76px 3px 10px #806233; */
    z-index: 1;
    position: absolute;
    top: 22px;
    top: calc(var(--string-top-position) * 1px);
}
.note-fret {
    display: flex;
    flex: 1;
    border-right: 10px solid;
    border-image: linear-gradient(to left, #777, #bbb, #777) 1 100%;
    justify-content: center;
    align-items: center;
    position: relative;
}
.note-fret:first-child {
    background: #5c5e5e;
    min-width: 76px;
    border-right: 12px solid;
    flex-grow: 0;
    flex-shrink: 0;
    border-image: linear-gradient(to left, #bbb,#fff,#bbb);
}
.note-fret:before {
    content: attr(data-note);
    width: 33px;
    height: 33px;
    border-radius: 50%;
    line-height: 33px;
    text-align: center;
    background: #4dc5e7;
    z-index: 2;
    color: #eee;
    opacity: var(--noteDotOpacity);
}
.single-fretmark::after, .double-fretmark:before, .double-fretmark::after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #5c5e5e;
}

.single-fretmark::after {
    top: calc(var(--fretboard-height) /2 *1px);
    transform: translate(0, -50%);
}
.double-fretmark:before {
    top: calc(var(--double-fretmark-position-1) * 1px);
    transform: translate(-140%, -50%);
}
.double-fretmark::after {
    top: calc(var(--double-fretmark-position-2) * 1px);
    transform: translate(-140%, -50%);
}
.note-name-section {
    width: 100%;
    color: #fff;
    font-weight: 100;font-size: 2.5em;
    display: flex;
    justify-content: center;
}
.note-name-section span {
    padding: 10px;
    cursor: pointer;
}
.note-name-section span:hover {
    color: #4dc5e7;
}
.lower-container{
    display: flex;
}

/* Scale Generator */
.scale-generator {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;   /* Center children horizontally */
    justify-content: center;
    text-align: center;
}
.key-buttons,
#type-btn,
#scale-results,
#message {
    justify-content: center;
    text-align: center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* Scale Generator Button */
#scale-gen-btn {
    background-color: #3B82F6; /* Blue */
    color: #FFFFFF; /* White text */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: 33px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#scale-gen-btn:hover {
    background-color: #2563EB; /* Darker Blue */
}

.key-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.key-btn {
    width: 50px;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;           /* Ensures vertical centering */
    cursor: pointer;
    display: flex;               /* Add flexbox for perfect centering */
    align-items: center;         /* Vertically center */
    justify-content: center;     /* Horizontally center */
    padding: 0;                  /* Remove default padding */
    border: none;                /* Optional: remove border if not needed */
}

/* Type Select Button */
#type-select-btn {
    background-color: #059669; /* Green */
    color: #FFFFFF; /* White text */
    width: 60px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#type-select-btn:hover {
    background-color: #047857; /* Darker Green */
}

/* Fretboard Section */
.fretboard-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Fretboard */
.fretboard1 {
    display: flex;
    flex-direction: column;
    height: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    width: 100%; /* Ensure it fits within the screen */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
}

/* Fretboard Controls Button */
#fretboard-controls button {
    background-color: #D97706; /* Amber/Orange */
    color: #FFFFFF; /* White text */
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#fretboard-controls button:hover {
    background-color: #B45309; /* Darker Amber */
}

.fret-number-row {
    display: flex;
    width: 100%;
    height: 30px; /* Adjust height as needed */
    background-color: #333; /* Background color for the fret number row */
    color: #fff; /* Text color for fret numbers */
    font-size: 16px; /* Adjust font size as needed */
    align-items: center;
    justify-content: space-between; /* Ensure even spacing */
    box-sizing: border-box; /* Include padding and border in width calculations */
}

.fret-number {
    flex: 1; /* Ensure each fret number takes up equal space */
    text-align: center;
    border-right: 1px solid #444; /* Optional: Add a border between fret numbers */
}

.fret-number:last-child {
    border-right: none; /* Remove the border for the last fret */
}

.fret-number:first-child {
    background-color: #444; /* Optional: Different background for the nut */
    min-width: 76px;
    border-right: 1px solid #444; /* Optional: Add a border for the nut */
    flex-grow: 0;
    flex-shrink: 0;
}



.sg-string {
    width: 100%;
    height:100%;
    display: flex;
    position: relative;
}

.sg-string::before {
    content: '';
    width: 100%;
    height: calc(var(--string-height) * 1px);
    background: linear-gradient(#eee, #999);
    z-index: 1;
    position: absolute;
    top: 22px;
    top: calc(var(--string-top-position) * 1px);
}

.sg-note-fret {
    display: flex;
    flex: 1;
    border-right: 10px solid;
    border-image: linear-gradient(to left, #777, #bbb, #777) 1 100%;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sg-note-fret:first-child {
    background: #5c5e5e;
    min-width: 76px;
    border-right: 12px solid;
    flex-grow: 0;
    flex-shrink: 0;
    border-image: linear-gradient(to left, #bbb,#fff,#bbb);
}

.sg-note-fret:before {
    content: attr(data-note);
    width: 33px;
    height: 33px;
    border-radius: 50%;
    line-height: 33px;
    text-align: center;
    background: #E5E7EB;
    z-index: 2;
    color: #374151;
    opacity: var(--noteDotOpacity);
}

.sg-note-fret.highlighted {
    /*background: #4dc5e7;  Same background as hover */
    border-color: #eee; /* Same border color as hover */
    color: #fff; /* Text color for better contrast */
    opacity: 1; /* Ensure visibility */
}

.sg-single-fretmark::after, .sg-double-fretmark:before, .sg-double-fretmark::after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #5c5e5e;
}

.sg-single-fretmark::after {
    top: calc(var(--fretboard-height) /2 *1px);
    transform: translate(0, -50%);
}
.sg-double-fretmark:before {
    top: calc(var(--double-fretmark-position-1) * 1px);
    transform: translate(-140%, -50%);
}
.sg-double-fretmark::after {
    top: calc(var(--double-fretmark-position-2) * 1px);
    transform: translate(-140%, -50%);
}

/* Media Query for 5 Frets */
@media (max-width: 768px) {
    .fretboard-5 {
        width: 100%; /* Example: Adjust width for 5 frets */
        padding: 5px; /* Adjust padding for smaller screens */
        border-radius: 3px; /* Adjust border radius */
    }

    

    .fret-number {
        flex: 0 0 calc(100% / 6); /* Match the width of sg-note-fret */
        text-align: center;
        border-right: 1px solid #444; /* Optional: Add a border between fret numbers */
        padding: 5px 0; /* Add padding for better spacing */
        font-size: 10px; /* Adjust font size for smaller screens */
        line-height: 20px; /* Match the line height of sg-note-fret */
        width: 28px; /* Match the width of sg-note-fret */
        height: 28px; /* Match the height of sg-note-fret */
    }

    .fret-number:last-child {
        border-right: none; /* Remove the border for the last fret */
    }

    .fret-number:first-child {
        background-color: #444; /* Optional: Different background for the nut */
        min-width: 76px; /* Allow the nut to resize */
        border-right: 1px solid #444; /* Optional: Add a border for the nut */
    }

    .sg-note-fret {
        flex: 0 0 calc(100% / 6); /* Divide the width equally for 12 frets */
        width: calc(100% / 6); /* Ensure each fret takes up equal space */
        height: 28px; /* Adjust height for smaller screens */
        line-height: 28px; /* Match the height */
        font-size: 12px; /* Adjust font size for smaller screens */
    }

    .sg-note-fret:before {
        width: 28px; /* Smaller note dots */
        height: 28px;
        line-height: 28px;
        font-size: 12px; /* Smaller font size for note labels */
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    /* Adjust the container layout */
    .container {
        flex-direction: column; /* Stack elements vertically */
        padding: 10px;
    }

    /* Scale Generator Buttons */
    #scale-gen-btn {
        width: 30px; /* Smaller button size */
        height: 30px;
        font-size: 14px; /* Smaller font size */
        line-height: 28px;
    }

    /* Type Select Buttons */
    #type-select-btn {
        width: 50px; /* Smaller button size */
        height: 35px;
        font-size: 14px; /* Smaller font size */
    }

    /* Fretboard Controls Buttons */
    #fretboard-controls button {
        padding: 8px 12px; /* Smaller padding */
        font-size: 14px; /* Smaller font size */
    }

    .fretboard1 {
        padding: 5px; /* Reduce padding for smaller screens */
        border-radius: 3px; /* Adjust border radius */
        overflow-x: scroll; /* Ensure horizontal scrolling if needed */
    }

    /* Media query for .fretboard1 when .fretboard-5 is also present */

    .fretboard1.fretboard-5 {
        width: 98vw;      /* Example: make it responsive on small screens */
        min-width: 350px; /* Minimum width for usability */
        max-width: 100vw; /* Prevent overflow */
        padding: 8px;     /* Adjust padding for mobile */
        border-radius: 6px;
        overflow-x: auto;
    }
   
    /* Media query for .fretboard1 when .fretboard-12 is also present */
    @media (max-width: 768px) {
    .fretboard1.fretboard-12 {
        width: 98vw;
        min-width: 350px;
        max-width: 100vw;
        padding: 7px;
        border-radius: 5px;
        overflow-x: auto;
        box-sizing: border-box;
    }
    .fretboard1.fretboard-12 .fret-number-row,
    .fretboard1.fretboard-12 .sg-string {
        width: 100%;
        min-width: 0;
        display: flex;
        position: relative;
    }
    .fretboard1.fretboard-12 .fret-number,
    .fretboard1.fretboard-12 .sg-note-fret {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        width: auto;
        text-align: center;
        border-right: 1px solid #444;
        line-height: 28px;
        height: 28px;
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fretboard1.fretboard-12 .fret-number:first-child,
    .fretboard1.fretboard-12 .sg-note-fret:first-child {
        width: 76px;
        min-width: 76px;
        max-width: 76px;
        flex: 0 0 76px;
        background: #444;
        flex-shrink: 0;
        flex-grow: 0;
    }
}  

    /* Media query for .fretboard1 when .fretboard-24 is also present */
    .fretboard1.fretboard-24 {
        width: 98vw;
        min-width: 350px;
        max-width: 100vw;
        padding: 7px;
        border-radius: 5px;
        overflow-x: auto;
    }
    .fretboard1.fretboard-24 .fret-number {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        text-align: center;
        border-right: 1px solid #444;
        line-height: 28px;
        height: 28px;
        background: #333;
        color: #fff;
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fretboard1.fretboard-24 .fret-number-row {
        min-width: calc(28px * 24 + 76px);
        width: min-content;
        display: flex;
        position: relative;
    }
    .fretboard1.fretboard-24 .sg-string {
        /* 24 frets at 28px each + 76px for the nut */
        min-width: calc(28px * 24 + 76px);
        width: min-content;
        display: flex;
        position: relative;
    }
    .fretboard1.fretboard-24 .sg-note-fret {
        flex: 0 0 28px;
        width: 28px;
        min-width: 28px;
        max-width: 28px;
    }
    .fretboard1.fretboard-24 .sg-note-fret:first-child {
        min-width: 76px;
        max-width: 76px;
        width: 76px;
    }
    .fretboard1.fretboard-24 .sg-string::before {
        content: '';
        position: absolute;
        left: 0;
        top: calc(var(--string-top-position) * 1px);
        height: calc(var(--string-height) * 1px);
        width: 100%;
        background: linear-gradient(#eee, #999);
        z-index: 1;
        pointer-events: none;
    }

        .fretboard1.fretboard-24 .fret-number:first-child {
        width: 76px;
        min-width: 76px;
        max-width: 76px;
        background: #444;
        flex-shrink: 0;
        flex-grow: 0;
    }    

    /* Adjust the logo size */
    .logo {
        width: 40px; /* Smaller logo */
        height: 40px;
    }

    /* Adjust the note name section */
    .note-name-section {
        font-size: 1.5em; /* Smaller font size */
    }

    /* Hide unnecessary elements for smaller screens */
    .settings {
        display: none;
    }
}



/* Footer */
.footer {
    background-color: #3B82F6;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}