/* ---- Tuner ---- */

/* Tuner page: body flex column, exact viewport height */
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.tool-page {
  min-height: 0 !important;
  flex: 1 1 0 !important;
  padding: 1.5rem 1rem 3rem !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
}

/* Stage: fixed height so dots stay in same position whether mic is on or off */
.tuner-stage {
  width: 100%;
  max-width: 540px;
  height: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Dots flush, no padding/margin */
.chromatic-string-dots { display: flex; gap: 10px; justify-content: center; padding: 0; margin: 0; min-height: 46px; flex-shrink: 0; }
.chromatic-string-dots.hidden { display: none; }

/* Mic start circle — flush */
.tuner-mic-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tuner-mic-circle-btn {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1.5px solid #2a2d3a;
  background: #13151f;
  color: #888;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
}
.tuner-mic-circle-btn:hover { border-color: #555; color: #ccc; }
.tuner-mic-circle.hidden { display: none; }

/* Chromatic */
.chromatic-view { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 500px; padding: 43px 0; }
.chromatic-view.hidden { display: none; }
.chromatic-note-display { position: relative; margin: 0; }
.chromatic-note { font-size: 6rem; font-weight: 800; color: #fff; line-height: 1; text-align: center; min-width: 140px; transition: color 0.2s; }
.chromatic-note.in-tune { color: #4caf50; }
.chromatic-hz { font-size: 1.2rem; color: #888; text-align: center; }

.chr-dot {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid #2a2d3a; background: #13151f;
  color: #888; font-size: 0.72rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all 0.2s;
}
.chr-dot:hover { border-color: #555; color: #ccc; }
.chr-dot.active { border-color: #7cb8ff; color: #fff; }
.chr-dot.tuned { border-color: #4caf50; background: #0d1f12; color: #4caf50; }
.chr-dot.playing { border-color: #7cb8ff; background: #1c3a5c; color: #7cb8ff; }

/* Needle meter — enlarged */
.needle-meter { position: relative; width: 100%; max-width: 500px; height: 180px; margin: 0 auto; overflow: hidden; }
.needle-meter-bg { position: absolute; inset: 0; }
.needle-meter-bg canvas { width: 100%; height: 100%; }

/* Title row */
.tool-page .page-title-row { margin-bottom: 0; }

/* Controls row */
.tuner-controls { margin-bottom: 10px !important; }

/* Slider row */
.tuner-sliders { display: flex; gap: 14px; justify-content: center; align-items: center; margin: 0; }
.tuner-slider-label { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: #666; white-space: nowrap; }
.tuner-a4-slider { width: 60px; accent-color: #2a6cb0; transition: opacity 0.15s; }
.tuner-a4-slider:disabled { opacity: 0.3; pointer-events: none; }
.tuner-a4-value { font-size: 0.68rem; color: #888; min-width: 38px; text-align: center; }
.tuner-sens-slider { width: 60px; accent-color: #2a6cb0; transition: opacity 0.15s; }
.tuner-sens-slider:disabled { opacity: 0.3; pointer-events: none; }
.tuner-slider-label:has(:disabled) { opacity: 0.4; }

/* Reset button */
.tuner-reset-btn {
  background: none; border: none; color: #555; font-size: 0.68rem; font-weight: 600;
  cursor: pointer; padding: 6px 12px; margin-top: 4px; flex-shrink: 0;
  transition: color 0.15s;
}
.tuner-reset-btn:hover { color: #7cb8ff; }

/* Fireworks overlay */
.fireworks-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 999;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .tool-page { padding: 1rem 0.5rem 2rem !important; }
  .tuner-mic-circle-btn { width: 120px; height: 120px; font-size: 0.75rem; }
  .chromatic-note { font-size: 4rem; min-width: 100px; }
  .chromatic-hz { font-size: 1rem; }
  .needle-meter { height: 140px; }
  .chr-dot { width: 34px; height: 34px; font-size: 0.62rem; }
  .chromatic-string-dots { gap: 6px; min-height: 38px; }
  .tuner-stage { height: 320px; }
  .chromatic-view { padding: 20px 0; }
}