/* Custom CSS Variables for Crisp Light Textbook Theme */
:root {
  --bg-primary: #faf8f5;     /* Warm off-white textbook page */
  --bg-secondary: #f1ede4;   /* Slightly darker beige for inputs */
  --bg-card: #ffffff;        /* Pure white cards */
  --border-color: #cbd5e1;   /* Clean light gray borders */
  --border-active: #d97706;  /* Warm wood/orange active border */
  
  --text-primary: #0f172a;   /* Dark slate (almost black) for primary text */
  --text-secondary: #475569; /* Slate gray for secondary text */
  --text-muted: #94a3b8;

  --accent-emerald: #059669; /* Darker emerald for light theme */
  --accent-cyan: #0891b2;    /* Darker cyan for text labels */
  --accent-orange: #d97706;  /* Warm amber/orange */
  
  --glow-cyan: 0 0 10px rgba(8, 145, 178, 0.2);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);

  --font-main: 'Outfit', 'Noto Sans JP', sans-serif;
}

/* Global resets and typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* App Container */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  gap: 24px;
}

/* Header */
.app-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

h1 {
  display: flex;
  flex-direction: column;
}

.title-sub {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-orange);
  font-weight: 700;
}

.title-main {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Settings Panel */
.settings-panel {
  display: flex;
  gap: 20px;
  align-items: center;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Switch (Sound toggle) */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: .3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-secondary);
  transition: .3s;
}

input:checked + .slider {
  background-color: var(--accent-emerald);
  border-color: var(--accent-emerald);
}

input:checked + .slider:before {
  transform: translateX(24px);
  background-color: #ffffff;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Main Layout Grid */
.app-main {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  flex: 1;
}

@media (max-width: 820px) {
  .app-main {
    grid-template-columns: 1fr;
  }
}

/* Crisp Cards */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.glass-card:hover {
  border-color: #94a3b8;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  border-left: 3px solid var(--accent-orange);
  padding-left: 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Keyboard Section (Horizontal Bar at Top) */
.keyboard-section {
  padding: 12px 20px;
}

.keyboard-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.key-btn {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 18px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  min-width: 65px;
}

.key-btn:hover {
  transform: translateY(-1.5px);
  border-color: var(--accent-orange);
  background: #fdfbf7;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.key-btn:active {
  transform: translateY(0.5px);
}

.key-btn.active {
  background: #fffbeb; /* Warm amber light bg */
  border-color: var(--accent-orange);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);
}

/* Specific styling for smaller high notes buttons */
.key-btn-high {
  padding: 6px 12px;
  min-width: 48px;
  background: #f8fafc;
}

.key-btn-high .key-syllable {
  font-size: 0.95rem;
}

.key-syllable {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.overline-text {
  text-decoration: overline;
  text-decoration-thickness: 2.5px;
}

.key-btn.active .key-syllable {
  color: #b45309; /* Warm brown active text */
}

/* Score Section (Sheet Music) */
.score-container {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
}

.staff-line {
  stroke: #1e293b; /* Dark sharp music staff lines */
  stroke-width: 1.5;
}

.ledger-line {
  stroke: #1e293b;
  stroke-width: 2.2;
  transition: opacity 0.3s ease;
}

.ledger-line.hide {
  opacity: 0;
}

/* Note Head & Stem (Printed textbook style) */
#note-head {
  fill: #1e293b; /* Solid dark music note */
  filter: none;
  transition: cy 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#note-stem {
  stroke: #1e293b;
  stroke-width: 2.5;
  transition: x1 0.3s ease, y1 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), x2 0.3s ease, y2 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Note Info Container */
.note-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.note-names {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.note-syllable {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Recorder Visualizer (Center Column) */
.recorder-visualizer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex: 1;
}

.front-body-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recorder-silhouette {
  fill: #14161c;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2.5;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.recorder-windway {
  fill: #0c0e15;
}

.recorder-hole {
  fill: #ffffff; /* Default open state is empty white */
  stroke: #92400e;
  stroke-width: 2.5;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State Classes for Holes - Closed/Covered holes are solid black */
.recorder-hole.state-closed {
  fill: #000000; /* Solid black when closed */
  stroke: #92400e;
  filter: none;
}

.recorder-hole.state-open {
  fill: #ffffff;
  stroke: #92400e;
}

.recorder-hole.state-half {
  fill: url(#thumb-half-filled); /* Half-black, half-white */
  stroke: #92400e;
}

.hole-inner-label {
  display: none; /* Completely hide inner labels as requested */
}

/* Back Hole Specific Styles (Hole 0) */
.recorder-hole.back-hole-svg {
  fill: #ffffff;
  stroke: #92400e;
  stroke-width: 2.2;
  stroke-dasharray: 2 2;
  transition: all 0.3s ease;
}

.recorder-hole.back-hole-svg.state-closed {
  fill: #000000;
  stroke: #92400e;
  stroke-dasharray: none;
}

.recorder-hole.back-hole-svg.state-half {
  fill: url(#thumb-half-filled);
  stroke: #92400e;
  stroke-dasharray: none;
}

.hole-inner-label-back {
  display: none; /* Completely hide inner labels */
}

/* Double Hole Inner Circles (Hole 7) */
.double-hole-inner {
  fill: #ffffff; /* White openings when open */
  stroke: #92400e;
  stroke-width: 0.8;
  pointer-events: none;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.recorder-hole.state-closed ~ .double-hole-inner {
  fill: #000000; /* Solid black when covered */
  stroke: #000000;
}

/* Realistic Finger Graphic Pointers & Slide Transitions */
.finger-pill {
  fill: url(#skin-gradient);          /* Creamy peach skin color with 3D gradient */
  stroke: #92400e;        /* Clean brown outline */
  stroke-width: 1.5;
  pointer-events: none;
}

/* Interactive Finger groups - slide forward when active, slide back when inactive */
.finger-group {
  transform: translateX(-24px); /* Flipped back to the left when resting */
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.95; /* Keep clearly visible as requested */
}

.finger-group.state-active {
  transform: translateX(0); /* Slides forward to cover the hole */
}

.finger-group-right {
  transform: translateX(24px); /* Flipped back to the right when resting */
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.95;
}

.finger-group-right.state-active {
  transform: translateX(0); /* Slides forward to cover the hole */
}

/* Diagonal translation for left thumb */
.finger-group-thumb {
  transform: translate(-18px, 18px); /* Slides back diagonally down-left */
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.95;
}

.finger-group-thumb.state-active {
  transform: translate(0, 0); /* Reaches to touch back hole */
}

.finger-pill-label {
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 800;
  fill: #78350f; /* High contrast dark brown on skin */
  pointer-events: none;
  transition: all 0.28s ease;
}

/* Fingernail rendering styling */
.finger-nail {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 0.8;
  transition: all 0.28s ease-in-out;
  pointer-events: none;
}

/* Glow/highlight the nail slightly when active */
.state-active .finger-nail {
  stroke: #94a3b8;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

.state-active .finger-pill {
  fill: url(#skin-gradient-active); /* High quality healthy pinkish active color with 3D gradient */
  stroke: #92400e;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

.hand-title-label {
  font-family: var(--font-main);
  font-size: 9.5px;
  font-weight: 800;
  fill: var(--text-secondary);
  letter-spacing: 0.1em;
}

/* Footer styling */
.app-footer {
  text-align: center;
  padding: 16px 0;
  color: #94a3b8;
  font-size: 0.8rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}