/* Import the Inter font for a clean look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Define a color palette using CSS variables for easy theming */
:root {
 --gold: #D4AF37;
 --dark-gold: #B8860B;
 --green: #22c55e;
 --black: #121212;
 --black-light: #1E1E1E;
 --white: #F5F5F5;
 --gray: #888;
}

body {
 font-family: 'Inter', sans-serif;
 background-color: var(--black);
 color: var(--white);
}

/* Styling for the main content container */
.container-box {
 background-color: var(--black-light);
 border-radius: 1rem;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 max-width: 800px;
 margin: 2rem auto;
 padding: 1.5rem;
 position: relative;
}

/* CSS for the new gold bar */
.gold-bar {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 4px;
 background: linear-gradient(90deg, #D4AF37, #B89930, #D4AF37);
}

.premium-header {
 position: absolute;
 top: 0;
 right: 0;
 background: linear-gradient(45deg, #D4AF37, #B89930);
 color: #121212;
 font-weight: bold;
 padding: 5px 15px;
 border-radius: 0 0 0 20px;
 font-size: 12px;
 letter-spacing: 1px;
 z-index: 10;
 animation: pulse-effect 2s infinite;
}

@keyframes pulse-effect {
 0% { transform: scale(1); box-shadow: 0 0 5px #D4AF37; }
 50% { transform: scale(1.05); box-shadow: 0 0 15px #B89930; }
 100% { transform: scale(1); box-shadow: 0 0 5px #D4AF37; }
}

/* Tuner-specific display styling */
#tuner-note-display {
 font-size: 5rem;
 font-weight: 700;
 color: var(--gold);
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#tuner-frequency-display, #tuner-cents-display, .text-xl, .text-lg, .text-sm {
 color: var(--gray);
}

/* Tuner needle meter container, creates a semi-circle effect */
#tuner-meter-container {
 position: relative;
 width: 250px;
 height: 125px;
 margin: 2rem auto 0.5rem;
 overflow: hidden;
}

/* The semi-circular arc of the meter */
#tuner-meter-arc {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 200%;
 border-radius: 50%;
 border: 4px solid var(--gray);
 box-sizing: border-box;
 transform: translateY(50%);
}

/* The needle itself, which rotates based on the pitch */
#tuner-needle {
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 3px;
 height: 100px;
 background-color: var(--gold);
 transform-origin: bottom center;
 transition: transform 0.1s ease-out;
 transform: translateX(-50%) rotate(0deg);
}

/* The accuracy indicator at the top of the meter */
#accuracy-indicator {
 position: absolute;
 top: -5px;
 left: 50%;
 transform: translateX(-50%);
 width: 0;
 height: 0;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
 border-top: 20px solid var(--gray);
 border-bottom: none;
 transition: all 0.3s ease;
}

/* New class for when the indicator is in the green range */
#accuracy-indicator.pulse-green {
 animation: pulseGreen 1.5s infinite;
}

/* New animation for a smooth, pulsing green glow */
@keyframes pulseGreen {
 0% { border-top-color: var(--green); }
 50% { border-top-color: rgba(34, 197, 94, 0.5); }
 100% { border-top-color: var(--green); }
}

/* Add the following styles to apply the look from Code 2 */
#instrument-select, #tuning-select {
 background-color: #0A0A0A;
 color: #F8F5F0;
 border: 1px solid #D4AF37;
 border-radius: 8px;
 padding: 10px 15px;
 font-size: 16px;
}

/* General button styling */
.btn-gold {
 background-color: var(--gold);
 color: var(--black);
 padding: 0.5rem 1rem;
 font-weight: 700;
 border-radius: 9999px; /* Full rounded corners */
 transition: background-color 0.2s;
}
.btn-gold:hover {
 background-color: var(--dark-gold);
}
.btn-stop {
 background-color: #E53E3E;
 color: var(--white);
 padding: 0.5rem 1rem;
 font-weight: 700;
 border-radius: 9999px;
 transition: background-color 0.2s;
}
.btn-stop:hover {
 background-color: #C53030;
}

/* Tailwind-like utility classes for layout and spacing */
.p-4 { padding: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.w-64 { width: 16rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-6xl { font-size: 4rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.font-bold { font-weight: 700; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; }
.duration-200 { transition-duration: 200ms; }
.block { display: block; }
.w-full { width: 100%; }
.bg-black { background-color: var(--black); }
.p-2 { padding: 0.5rem; }
.flex-col { flex-direction: column; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
@media (min-width: 768px) {
 .md\:flex-row { flex-direction: row; }
 .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
 .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
}