/*
The MIT License

Copyright (c) 2016 Frank Modica

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

.fretboard-container, .fretboard-container * {
	position: relative;
}

.fretboard-container {
	overflow: hidden;
	/* If width is calculated in the JS this value will be 
	overridden. */
	width: 100%;
	/* At a certain point it doesn't make sense for the fretboard
	size to decrease, so we set a min-width. A scroll-bar will 
	be displayed. */
	min-width: 700px;
	/* If height is calculated in the JS this value will be 
	overridden. */
	height: 210px; 
	margin: 0 auto;
	padding-bottom: 20px;
}

.fretboard-scroll-wrapper {
	overflow: auto;
}

.fretboard-container .fretboard-body {
	overflow: visible !important;
	background: wheat;
	border: 1px solid gray;
	/* -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); */
	/* The margin should be as big as the box-shadow because the 
	default JS functionality fits the body inside the 
	container and won't take into account drop-shadow size,
	but will take into account margin */
	margin: 10px;
	box-sizing: content-box;
	/* z-index: -5; */
}

.fretboard-container .string {
	/* We don't want this affecting the placement of other 
	elements, so it will have absolute positioning */
	position: absolute;
	height: 1px;
	width: 100%;
	background: black;
	z-index: 1;
}

.fretboard-container .note {
	border-radius: 50%;
	border: 1px solid black;
	width: 32px;
	height: 32px;
	position: absolute;
	cursor: pointer;
	z-index: 10;
	
	/* These will be animated */
	opacity: 0;
	background: white;
}

/* .fretboard-container .note.hover {
	opacity: 1;
	
	transition: opacity .15s linear;
	-moz-transition: opacity .15s linear;
	-webkit-transition: opacity .15s linear;
	-ms-transition: background .15s linear;
	-o-transition: opacity .15s linear;
}

.fretboard-container.is-disabled .note.hover {
	cursor: not-allowed;
} */

.fretboard-container .note.clicked {
	background: blue;
	border: 1px solid white;
	opacity: 1;
}

.fretboard-container .note-display {
	position: absolute;
	top: 0 !important;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 12;
	font-size: 12px;
	font-weight: 700;
	font-family: 'Outfit', sans-serif;
	/* Firefox treats '/' as a soft-wrap opportunity, so labels like
	   'G#/Ab' break onto two lines and overflow the circle (fine in
	   Chrome). Keep the label on a single line. */
	white-space: nowrap;

	/* Make text unselectable */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	color: black;
}

.fretboard-container .note.clicked .note-display {
	color: white;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.fretboard-container .fret-line-container,
.fretboard-container .note-circle-container {
	position: absolute;
	height: 100%;
	width: 100%;
}

.fretboard-container .fret-line {
	background: black;
	width: 2px;
	position: absolute;
	height: 100%;
}

.fretboard-container .fret-line.first {
	width: 10px;
}

.fretboard-container .fret-line.last {
	width: 0;
}

.fretboard-container .note-circle {
	border-radius: 50%;
	border: 1px solid black;
	width: 10px;
	height: 10px;
	position: absolute;
	background: black;
}

@media (max-width: 1024px) {
	.fretboard-container .note {
		width: 26px;
		height: 26px;
	}

	.fretboard-container .note-display {
		font-size: 10px;
	}
}

/* Theme Examples */

/* Dark Theme Overhaul for Fretboard */
.fretboard-container.dark-theme .fretboard-body {
	background-color: #141416;
	background-image: 
		/* Subtle horizontal wood grain lines */
		repeating-linear-gradient(to right, 
			rgba(255, 255, 255, 0.007) 0px, 
			rgba(255, 255, 255, 0.007) 1px, 
			transparent 1px, 
			transparent 12px
		),
		repeating-linear-gradient(to right, 
			rgba(0, 0, 0, 0.15) 0px, 
			rgba(0, 0, 0, 0.15) 2px, 
			transparent 2px, 
			transparent 7px
		),
		/* Vertically aligned lighting/curve gradient representing the neck radius */
		linear-gradient(to bottom, 
			#0f0f11 0%, 
			#19191d 15%, 
			#1e1e24 35%, 
			#222228 50%, 
			#1a1a20 65%, 
			#141416 85%, 
			#0a0a0d 100%
		);
	border-top: 3px solid rgba(255, 255, 255, 0.18);    /* Neck binding (top) */
	border-bottom: 3px solid rgba(255, 255, 255, 0.18); /* Neck binding (bottom) */
	border-left: 1px solid rgba(255, 255, 255, 0.05);
	border-right: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	box-shadow: 
		inset 0 8px 16px rgba(0, 0, 0, 0.6), 
		inset 0 -8px 16px rgba(0, 0, 0, 0.6), 
		0 12px 28px rgba(0, 0, 0, 0.45);
	margin: 12px 10px;
}

/* Metallic Strings with 3D shadow and realistic gauges */
.fretboard-container.dark-theme .string {
	background: linear-gradient(to bottom, #8b929a 0%, #d5dde6 50%, #5d636b 100%);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.65);
	z-index: 5; /* Sit above fret markers but below notes */
}

.fretboard-container.dark-theme #string1 {
	height: 1px;
	background: linear-gradient(to bottom, #a0a6ae, #e2e7ec 50%, #767d86);
}

.fretboard-container.dark-theme #string2 {
	height: 1.5px;
	background: linear-gradient(to bottom, #9ea4ac, #e0e5eb 50%, #737a83);
}

.fretboard-container.dark-theme #string3 {
	height: 2px;
	background: linear-gradient(to bottom, #959ba3, #dadfe5 50%, #686f77);
}

/* Wound strings (D, A, E) have slightly more textured brass/nickel sheen */
.fretboard-container.dark-theme #string4 {
	height: 2.5px;
	background: repeating-linear-gradient(to right, #7a8189 0px, #7a8189 1px, #d5dde6 1px, #d5dde6 2px, #5d636b 2px, #5d636b 3px);
}

.fretboard-container.dark-theme #string5 {
	height: 3.2px;
	background: repeating-linear-gradient(to right, #747a82 0px, #747a82 1px, #cfd7e0 1px, #cfd7e0 2px, #575c63 2px, #575c63 3px);
}

.fretboard-container.dark-theme #string6 {
	height: 4.2px;
	background: repeating-linear-gradient(to right, #6d737a 0px, #6d737a 1px, #c9d1da 1px, #c9d1da 2px, #50555c 2px, #50555c 3px);
}

/* Modernized Clicked Note Styles - Glassmorphic Glowing Bubbles */
.fretboard-container.dark-theme .note.clicked {
	background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
	border: 2px solid #ffffff;
	box-shadow: 0 0 15px rgba(59, 130, 246, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	opacity: 1;
}

.fretboard-container.dark-theme .note {
	background: rgba(15, 23, 42, 0.25);
	border: 1.5px solid rgba(59, 130, 246, 0.4);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover only applies to a note that has no state of its own.
   `:not(.clicked)` is load bearing: this rule is more specific than
   `.dark-theme .note.clicked` above it, so without the exclusion the pointer
   repaints a just-clicked note with this translucent blue and hides the answer
   colour underneath. The cursor is still on the note you clicked - that is the
   normal case, not the edge case - so the feedback was invisible unless you
   deliberately moved the mouse away. */
.fretboard-container.dark-theme .note:not(.clicked):hover {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.85);
	box-shadow: 0 0 10px rgba(59, 130, 246, 0.45), inset 0 0 4px rgba(0, 0, 0, 0.2);
}

/* 3D Fret Wires */
.fretboard-container.dark-theme .fret-line {
	background: linear-gradient(to right, #555 0%, #dcdcdc 35%, #ffffff 50%, #b0b0b0 70%, #3c3c3c 100%);
	width: 3px;
	box-shadow: 1px 0 3px rgba(0, 0, 0, 0.75), -1px 0 1px rgba(255, 255, 255, 0.15);
	z-index: 2;
}

/* Bone nut for the first fret line */
.fretboard-container.dark-theme .fret-line.first {
	background: linear-gradient(to right, #d3cbbd 0%, #eae5da 45%, #fbf8f0 55%, #ded7c8 100%);
	width: 8px;
	box-shadow: 2px 0 6px rgba(0, 0, 0, 0.8), -1px 0 1px rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	z-index: 3;
}

/* Pearloid Fret Markers (Dots) */
.fretboard-container.dark-theme .note-circle {
	background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e8e8ed 50%, #cccccc 85%, #b3b3b8 100%);
	border: 1px solid rgba(0, 0, 0, 0.6);
	box-shadow: 
		inset 0 1px 2px rgba(0, 0, 0, 0.5), 
		0 1px 0 rgba(255, 255, 255, 0.12),
		0 0 4px rgba(255, 255, 255, 0.1); /* Subtle glowing inlay */
	opacity: 0.9;
	z-index: 1; /* Embedded in wood, below strings and frets */
}

button {
	margin: 15px 1%;
	cursor: pointer;
	height: 60px;
	width: 20%;
	float: left;
	/* padding: 10px; */
	font-size: 12px;
	overflow: auto;
	border-width: 1px;
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	background-color: rgb(239, 239, 239);
}

.disclaimer {
	text-align: center;
}

/* Glowing Note Colors for Games/Scale modes */
.fretboard-container .note.clicked.green,
.fretboard-container .note.clicked.successColor {
	background: linear-gradient(135deg, #34d399 0%, #059669 100%);
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.red {
	background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
	box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.orange {
	background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
	box-shadow: 0 0 15px rgba(249, 115, 22, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.blue {
	background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
	box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

/* Hint colors for practice/scale exercises. wrongColor stays a faint, muted
   cue; correctColor is a solid blue so the two can't be confused at a glance,
   still cooler and glow-free next to the rose rootColor marker. */
.fretboard-container .note.clicked.wrongColor {
	background: rgba(148, 163, 184, 0.3);
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.3);
}

.fretboard-container .note.clicked.correctColor {
	background: linear-gradient(135deg, rgba(96, 165, 250, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
	box-shadow: 0 0 10px rgba(59, 130, 246, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.75);
}

.fretboard-container .note.clicked.defaultNoteColor {
	background: linear-gradient(135deg, #94a3b8 0%, #475569 100%);
	box-shadow: 0 0 12px rgba(71, 85, 105, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.rootColor {
	background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
	box-shadow: 0 0 15px rgba(225, 29, 72, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.seventhColor {
	background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
	box-shadow: 0 0 15px rgba(6, 182, 212, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

/* CAGED colors with glow styling */
.fretboard-container .note.clicked.CColor {
    background: var(--CColor);
	/*background: linear-gradient(135deg, #b07cb9 0%, var(--CColor) 100%);*/
	box-shadow: 0 0 15px rgba(149, 96, 159, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.CAColor {
	background: linear-gradient(90deg, var(--CColor) 40%, var(--AColor) 60%);
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.AColor {
    background: var(--AColor);
	/*background: linear-gradient(135deg, #34d399 0%, var(--AColor) 100%);*/
	box-shadow: 0 0 15px rgba(16, 185, 129, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.AGColor {
	background: linear-gradient(90deg, var(--AColor) 40%, var(--GColor) 60%);
	box-shadow: 0 0 15px rgba(6, 182, 212, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.GColor {
    background: var(--GColor);
	/*background: linear-gradient(135deg, #22d3ee 0%, var(--GColor) 100%);*/
	box-shadow: 0 0 15px rgba(6, 182, 212, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.GEColor {
	background: linear-gradient(90deg, var(--GColor) 40%, var(--EColor) 60%);
	box-shadow: 0 0 15px rgba(244, 63, 94, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.EColor {
    background: var(--EColor);
	/*background: linear-gradient(135deg, #fb7185 0%, var(--EColor) 100%);*/
	box-shadow: 0 0 15px rgba(244, 63, 94, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.EDColor {
	background: linear-gradient(90deg, var(--EColor) 40%, var(--DColor) 60%);
	box-shadow: 0 0 15px rgba(234, 179, 8, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.DColor {
    background: var(--DColor);
	/*background: linear-gradient(135deg, #fde047 0%, var(--DColor) 100%);*/
	box-shadow: 0 0 15px rgba(234, 179, 8, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.fretboard-container .note.clicked.DCColor {
	background: linear-gradient(90deg, var(--DColor) 40%, var(--CColor) 60%);
	box-shadow: 0 0 15px rgba(149, 96, 159, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
	border-color: #ffffff;
}

.json {
	width: 100%;
	clear: both;
	padding-top: 10px;
}

.json p {
	text-align: center;
}

@media (max-width: 767px) {
	button {
		width: 49%;
		height: 45px;
		overflow: hidden;
		margin: 2px .5%;
		padding: 2px;
		font-size: 12px;
	}

	.disclaimer {
		font-size: 14px;
	}
}

.fretNum{
	margin-top: 108px;
	color: #f1f5f9;
}

.fretNum12{
	margin-top: 158px;
	color: #f1f5f9;
}

@media (max-width: 735px) {
	.fretNum{
		margin-top: 88px;
	}
	
	.fretNum12{
		margin-top: 131px;
	}
}