/* Author: Corentin Guichaoua, Philipp Legner — Adapted with Guitar Fretboard */

html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; color: #323248; }
[v-cloak] { display: none; }

h1 { text-align: center; text-transform: uppercase; margin: 12px 0 4px; font-size: 40px; }
h2 { text-align: center; text-transform: uppercase; color: #aaa; margin: 0 0 20px; }

div {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.reset { cursor: pointer; position: fixed; top: 30px; right: 10px; font-size: 14px; color: #aaa; }
.reset:hover { text-decoration: underline; }

.languageSwitcher { cursor: pointer; position: fixed; top: 30px; left: 10px; font-size: 14px; color: #aaa; }
.languageSwitcher div:hover { text-decoration: underline; }

.columns { display: flex; flex-wrap: wrap; justify-content: center; }
.col-1 { max-width: 950px; margin: 20px; flex: 3 1 420px; }
.col-2 { max-width: 320px; margin: 20px; flex: 1 1 135px; }

button { cursor: pointer; outline: none; font-size: 18px; font-family: inherit;
    line-height: 1.5em; padding: 0 10px; }

.button-row { display: flex; margin: 0 0 0 1px; }
.options { flex-grow: 1; display: flex; flex-wrap: wrap; }
.button-row button { width: 16%; border: 1px solid #323248; margin: -1px 0 0 -1px; flex-grow: 1;
    transition: background .2s, color .2s; }
.button-row button:hover { background-color: #ccc; }
.button-row button.active { background-color: #323248; color: #fff; }
.options + button { flex-shrink: 0; border-bottom-right-radius: 6px; width: 14%; }
.button-row button:nth-child(7) { border-bottom-left-radius: 6px; }

@media screen and (max-width: 820px) { button { font-size: 14px; } }
@media screen and (max-width: 490px) { button { font-size: 12px; } }

.warning { text-align: center; color: #aaa; font-style: italic; margin: 10px 0 0; }

circle { fill: white; stroke: #aaa; }
line { stroke: #aaa; }
polygon { stroke: #aaa; fill : white; }
text { fill: #aaa; }

.tonnetz, .clock { display: block; user-select: none; max-width: 100%; height: auto; }
.tonnetz { border: 1px solid #323248; border-radius: 6px 6px 0 0; box-sizing: border-box; }
.tonnetz text { font-size: 14px; text-anchor: middle; dominant-baseline: mathematical; }
.clock { stroke-width: 2px; margin-bottom: 10px;  }
.clock text { font-weight: 700; font-size: 24px; text-anchor: middle; dominant-baseline: mathematical; }
.noteClock circle { r: 24 }

.activeDichord, .activeTrichord { stroke: #323248; stroke-width: 2; fill: #ccc; }
.activeNode + text { fill: white; }
.activeTrichord + text { fill: #323248; }
.clockPolygon { fill: #ccc; stroke: #323248; stroke-width: 3; }

.visitedNode { fill: lightyellow; }
.visitedDichord { stroke-width : 2; }
.visitedTrichord { fill : lightgreen; }

.tonnetzNote circle { r: 12 }
.tonnetzNote text { dominant-baseline: central; }
.tonnetzDichord circle { r: 2}
.chickenDichord circle { r: 2}
.chickenTrichord circle { r: 10 }
.chickenTrichord text { font-size: 70%; dominant-baseline: central; }

.key-selector { display: flex; flex-wrap: wrap; justify-content: center; }
.key-selector button { background: white; width: 28px; height: 28px; border: 2px solid #aaa;
    color: #aaa; padding: 0; margin: 2px; line-height: 25px; font-size: 14px;
    border-radius: 20px; font-weight: 700; }
.key-selector .activeNode { color: white; }

.activeNode[data-key="3"]  { fill: #b30469; stroke: #b30469; background: #b30469; border-color: #b30469; }
.activeNode[data-key="4"] { fill: #822b9b; stroke: #822b9b; background: #822b9b; border-color: #822b9b; }
.activeNode[data-key="5"]  { fill: #5053cd; stroke: #5053cd; background: #5053cd; border-color: #5053cd; }
.activeNode[data-key="6"] { fill: #1f7aff; stroke: #1f7aff; background: #1f7aff; border-color: #1f7aff; }
.activeNode[data-key="7"]  { fill: #258dab; stroke: #258dab; background: #258dab; border-color: #258dab; }
.activeNode[data-key="8"]  { fill: #2ba058; stroke: #2ba058; background: #2ba058; border-color: #2ba058; }
.activeNode[data-key="9"] { fill: #31b304; stroke: #31b304; background: #31b304; border-color: #31b304; }
.activeNode[data-key="10"]  { fill: #76a90d; stroke: #76a90d; background: #76a90d; border-color: #76a90d; }
.activeNode[data-key="11"] { fill: #e6bd00; stroke: #e6bd00; background: #e6bd00; border-color: #e6bd00; }
.activeNode[data-key="0"]  { fill: #ff941f; stroke: #ff941f; background: #ff941f; border-color: #ff941f; }
.activeNode[data-key="1"] { fill: #e66438; stroke: #e66438; background: #e66438; border-color: #e66438; }
.activeNode[data-key="2"]  { fill: #cc3450; stroke: #cc3450; background: #cc3450; border-color: #cc3450; }

/* Transport controls — fixed below metronome */
.transport-controls {
    position: fixed;
    top: 136px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.transport-timer {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 1px;
    line-height: 1;
}
.transport-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: color 0.2s, transform 0.15s;
}
.transport-btn:hover {
    color: #555;
    transform: scale(1.08);
}
.transport-btn svg {
    display: block;
}
.rec-btn.recording {
    color: #e53935;
}
.stop-btn {
    color: #bbb;
}
.stop-btn.active {
    color: #555;
}

.modal-background { position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0,0,0,0.6); z-index: 1; }
.modal { position: fixed; z-index: 1; background: white; border-radius: 16px; font-size: 18px;
    width: 480px; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 40px);
    padding: 10px 20px; }
.modal p, .modal form { margin: .8em 0; }
.modal hr { border: 0; border-bottom: 1px solid #ccc; }
.modal input { max-width: 100%; box-sizing: border-box; font-family: inherit; text-align: center;
    font-size: 16px; }

.song-select { width: 100%; }

/* Guitar fretboard styles */
.fretboard-section {
    width: 100%;
    margin: 8px auto 20px;
    padding: 0 20px;
    box-sizing: border-box;
}
.guitar-fretboard {
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto;
}

.guitar-fretboard-wrap {
    width: 100%;
}
.guitar-fretboard-scaler {
    overflow: hidden;
}
/* Fretboard interaction */
.guitar-fretboard-wrap circle {
    transition: fill 0.15s, stroke 0.15s, opacity 0.15s;
    cursor: pointer;
}
.guitar-fretboard-wrap g:hover > circle:not(.activeNode):not(.dimmedNote) {
    stroke-width: 2;
    stroke: #666;
}

/* Active note highlighting (uses 12-key color system) */
.guitar-fretboard-wrap .activeNode {
    cursor: pointer;
}

/* Scale note ring — when a scale is active but note is not played */
.guitar-fretboard-wrap .scaleNoteRing {
    stroke: #999;
    stroke-width: 1.8;
    fill: #f4f0e6;
}

/* Dimmed note — when a scale is active but note is out of scale */
.guitar-fretboard-wrap .dimmedNote {
    opacity: 0.3;
}

/* Fretboard text: override global text defaults */
.guitar-fretboard-wrap text {
    font-size: 9.3px;
    fill: #888;
}
.guitar-fretboard-wrap .activeNode + text {
    fill: white;
}

/* Scale Reference Controls */
.scale-ref {
    margin: 12px auto 8px;
    max-width: 700px;
    text-align: center;
}
.scale-zoom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}
.scale-ctrl-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.scale-ref-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.scale-ref-heading {
    font-size: 10px;
    font-weight: 600;
    color: #b8a98a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Custom dropdown */
.custom-select-wrap {
    position: relative;
}
.scale-drop-btn {
    padding: 5px 10px 5px 10px;
    border: 1.5px solid #ddd6c8;
    border-radius: 4px;
    background: white;
    color: #555;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
    outline: none;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.4;
    text-align: left;
    pointer-events: auto;
}
.scale-drop-btn:hover {
    border-color: #b8a98a;
}
.scale-drop-btn:focus {
    border-color: #b8a98a;
    box-shadow: 0 0 0 2px rgba(184,169,138,0.15);
}
.drop-arrow {
    font-size: 8px;
    color: #b8a98a;
    flex-shrink: 0;
}
.drop-menu {
    position: fixed;
    background: white;
    border: 1.5px solid #ddd6c8;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 999;
    min-width: 140px;
    max-height: 260px;
    overflow-y: auto;
}
.drop-option {
    padding: 6px 12px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
    pointer-events: auto;
}
.drop-option:hover {
    background: #f5f3ee;
    color: #323248;
}
.drop-option.active {
    color: #323248;
    background: #f0ede5;
}

/* Root note selector row */
.scale-root-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}
.scale-root-btn {
    width: 30px;
    height: 30px;
    border: 2px solid #aaa;
    border-radius: 20px;
    background: white;
    color: #aaa;
    padding: 0;
    font-size: 13px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 26px;
}
.scale-root-btn:hover {
    border-color: #888;
    color: #555;
}
.scale-root-btn.active {
    color: white;
}
.scale-root-btn.active[data-key="0"]  { background: #ff941f; border-color: #ff941f; }
.scale-root-btn.active[data-key="1"]  { background: #e66438; border-color: #e66438; }
.scale-root-btn.active[data-key="2"]  { background: #cc3450; border-color: #cc3450; }
.scale-root-btn.active[data-key="3"]  { background: #b30469; border-color: #b30469; }
.scale-root-btn.active[data-key="4"]  { background: #822b9b; border-color: #822b9b; }
.scale-root-btn.active[data-key="5"]  { background: #5053cd; border-color: #5053cd; }
.scale-root-btn.active[data-key="6"]  { background: #1f7aff; border-color: #1f7aff; }
.scale-root-btn.active[data-key="7"]  { background: #258dab; border-color: #258dab; }
.scale-root-btn.active[data-key="8"]  { background: #2ba058; border-color: #2ba058; }
.scale-root-btn.active[data-key="9"]  { background: #31b304; border-color: #31b304; }
.scale-root-btn.active[data-key="10"] { background: #76a90d; border-color: #76a90d; }
.scale-root-btn.active[data-key="11"] { background: #e6bd00; border-color: #e6bd00; }

/* Scale quick-select buttons */
.scale-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.scale-btn {
    padding: 5px 14px;
    border: 1.5px solid #ddd6c8;
    border-radius: 4px;
    background: white;
    color: #888;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.scale-btn:hover {
    border-color: #b8a98a;
    color: #555;
}
.scale-btn.active {
    background: #323248;
    color: white;
    border-color: #323248;
}

/* Sound / Timbre selector buttons */
.sound-btn-row {
    display: flex;
    gap: 4px;
}
.sound-btn {
    padding: 3px 8px;
    border: 1.5px solid #ddd6c8;
    border-radius: 3px;
    background: white;
    color: #888;
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.sound-btn:hover {
    border-color: #b8a98a;
    color: #555;
}
.sound-btn.active {
    background: #323248;
    color: white;
    border-color: #323248;
}

/* Segmented control for major/minor toggle */
.segmented-control {
    display: flex;
    border: 1.5px solid #ddd6c8;
    border-radius: 4px;
    overflow: hidden;
}
.seg-btn {
    padding: 5px 12px;
    border: none;
    background: white;
    color: #888;
    font-size: 11px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.seg-btn:first-child {
    border-right: 1px solid #ddd6c8;
}
.seg-btn.active {
    background: #323248;
    color: white;
}
.seg-btn:hover:not(.active) {
    background: #f5f5f5;
}

.scale-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 11px;
    color: #888;
    font-family: inherit;
    white-space: nowrap;
    margin-top: 2px;
}
.scale-toggle input {
    margin: 0;
    cursor: pointer;
}
.scale-ref-zoom-label {
    margin-bottom: 0;
    white-space: nowrap;
}
.zoom-slider {
    width: 100px;
    height: 4px;
    cursor: pointer;
    accent-color: #b8a98a;
    margin: 0;
}
.zoom-value {
    font-size: 10px;
    color: #888;
    width: 34px;
    text-align: right;
}

/* Chord Reference Table */
.chord-ref-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 20px;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Root note tabs */
.chord-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 18px;
}
.chord-tab-btn {
    width: 30px;
    height: 30px;
    border: 2px solid #aaa;
    border-radius: 20px;
    background: white;
    color: #aaa;
    padding: 0;
    font-size: 13px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 26px;
}
.chord-tab-btn:hover {
    border-color: #888;
    color: #555;
}
.chord-tab-btn.active {
    color: white;
}
.chord-tab-btn.active[data-key="0"]  { background: #ff941f; border-color: #ff941f; }
.chord-tab-btn.active[data-key="1"]  { background: #e66438; border-color: #e66438; }
.chord-tab-btn.active[data-key="2"]  { background: #cc3450; border-color: #cc3450; }
.chord-tab-btn.active[data-key="3"]  { background: #b30469; border-color: #b30469; }
.chord-tab-btn.active[data-key="4"]  { background: #822b9b; border-color: #822b9b; }
.chord-tab-btn.active[data-key="5"]  { background: #5053cd; border-color: #5053cd; }
.chord-tab-btn.active[data-key="6"]  { background: #1f7aff; border-color: #1f7aff; }
.chord-tab-btn.active[data-key="7"]  { background: #258dab; border-color: #258dab; }
.chord-tab-btn.active[data-key="8"]  { background: #2ba058; border-color: #2ba058; }
.chord-tab-btn.active[data-key="9"]  { background: #31b304; border-color: #31b304; }
.chord-tab-btn.active[data-key="10"] { background: #76a90d; border-color: #76a90d; }
.chord-tab-btn.active[data-key="11"] { background: #e6bd00; border-color: #e6bd00; }

/* Chord grid */
.chord-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    max-width: 920px;
    margin: 0 auto;
}

/* Individual chord card */
.chord-card {
    cursor: pointer;
    transition: transform 0.15s;
    text-align: center;
    padding: 6px 4px 8px;
    border-radius: 6px;
}
.chord-card:hover {
    transform: translateY(-2px);
    background: #f9f9f9;
}
.chord-mini-svg {
    display: block;
    width: 100%;
    height: auto;
}
.chord-card-name {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

@media screen and (max-width: 820px) {
    .chord-grid { grid-template-columns: repeat(6, 1fr); max-width: 600px; }
    .chord-card-name { font-size: 9px; }
}
@media screen and (max-width: 490px) {
    .chord-grid { grid-template-columns: repeat(4, 1fr); max-width: 340px; gap: 5px; }
    .chord-card { padding: 4px 2px 6px; }
    .chord-card-name { font-size: 8px; }
}

/* Metronome */
.metronome-root {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: 10;
}
.metronome-icon {
    width: 46px;
    height: 59px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metronome-icon svg {
    overflow: visible;
}
.metronome-icon:hover {
    color: #888;
}
.metronome-icon.active {
    color: #323248;
}

/* Pendulum */
.metronome-pendulum {
    transform-origin: 50% 100%;
    transform-box: fill-box;
}
.metronome-needle {
    stroke-width: 1.2;
    transition: stroke-width 0.3s;
}
.metronome-icon.active .metronome-needle {
    stroke-width: 2.5;
}
.metronome-icon.active .metronome-pendulum {
    animation: metro-swing 1.2s ease-in-out infinite;
}

@keyframes metro-swing {
    0%, 100% { transform: rotate(0deg); }
    25%  { transform: rotate(-20deg); }
    75%  { transform: rotate(20deg); }
}

/* Metronome Modal */
.metro-modal-background {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.metro-modal {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 340px;
    max-width: calc(100% - 40px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.metro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.metro-title {
    font-size: 16px;
    font-weight: 700;
    color: #323248;
}
.metro-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #aaa;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.metro-close:hover {
    color: #323248;
}
.metro-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.metro-bpm-display {
    text-align: center;
}
.metro-bpm-val {
    font-size: 56px;
    font-weight: 800;
    color: #323248;
    line-height: 1;
    letter-spacing: -2px;
}
.metro-bpm-label {
    display: block;
    font-size: 11px;
    color: #aaa;
    letter-spacing: 3px;
    font-weight: 700;
    margin-top: 4px;
}
.metro-slider-wrap {
    width: 100%;
}
.metro-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #e8e8e8;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.metro-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #323248;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.metro-bpm-btns {
    display: flex;
    gap: 10px;
    width: 100%;
}
.metro-btn-sq {
    flex: 1;
    padding: 10px 0;
    border: 1.5px solid #ddd6c8;
    border-radius: 8px;
    background: white;
    font-size: 20px;
    font-family: inherit;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
}
.metro-btn-sq:hover {
    background: #f5f5f5;
    border-color: #b8a98a;
}
.metro-tap-btn {
    width: 100%;
    padding: 10px 0;
    border: 2px dashed #ddd6c8;
    border-radius: 8px;
    background: transparent;
    color: #888;
    font-size: 12px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s;
}
.metro-tap-btn:hover {
    border-color: #b8a98a;
    color: #555;
}
.metro-beats-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.metro-beats-label {
    font-size: 11px;
    font-weight: 600;
    color: #b8a98a;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.metro-beat-adj {
    width: 32px;
    height: 32px;
    border: 1.5px solid #ddd6c8;
    border-radius: 6px;
    background: white;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    font-family: inherit;
}
.metro-beat-adj:hover {
    border-color: #b8a98a;
}
.metro-beats-count {
    font-size: 18px;
    font-weight: 700;
    color: #323248;
    min-width: 20px;
    text-align: center;
}
.metro-beat-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.metro-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #f5f5f5;
    transition: all 0.08s;
}
.metro-dot.active {
    transform: scale(1.3);
    border-color: #323248;
}
.metro-dot.first {
    border-width: 2.5px;
    border-color: #ccc;
}
.metro-play-btn {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 10px;
    background: #323248;
    color: white;
    font-size: 15px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s;
}
.metro-play-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.metro-play-btn.playing {
    background: #e66438;
}