/* ===== Afinador (/tuner) ===== */

.tn {
  --tn-radius: 20px;
  --tn-muted: var(--bs-secondary-color);
  --tn-border: var(--bs-border-color);
  --tn-brand: #667eea;
  --tn-green: #22b573;
  --tn-amber: #e7a008;
  --tn-red: #f0506e;
  --tn-accent: var(--tn-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* --- Cabeçalho --- */
.tn-head { text-align: center; margin-bottom: 18px; }
.tn-head h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; }
.tn-head p { color: var(--tn-muted); margin: 0; font-size: 0.95rem; }

/* --- Instrumento e afinação --- */
.tn-instruments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}
.tn-instruments::-webkit-scrollbar { display: none; }
.tn-chip {
  flex: none;
  border: 1px solid var(--tn-border);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tn-chip:hover { border-color: var(--tn-brand); }
.tn-chip.is-active { background: var(--tn-brand); border-color: var(--tn-brand); color: #fff; }

.tn-tuning { display: flex; justify-content: center; margin-bottom: 14px; }
.tn-tuning select {
  width: auto;
  min-width: 220px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* --- Mostrador --- */
.tn-card {
  position: relative;
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  background: var(--bs-body-bg);
  padding: 26px 22px 22px;
  text-align: center;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.tn-card[data-state="far"] { --tn-accent: var(--tn-red); }
.tn-card[data-state="near"] { --tn-accent: var(--tn-amber); }
.tn-card[data-state="in-tune"] {
  --tn-accent: var(--tn-green);
  border-color: var(--tn-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-green) 18%, transparent);
}
.tn-card[data-state="error"] { --tn-accent: var(--tn-red); }

.tn-note {
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tn-accent);
  transition: color 0.2s, opacity 0.3s;
  font-variant-numeric: tabular-nums;
}
.tn-card[data-state="idle"] .tn-note,
.tn-card[data-state="listening"] .tn-note { color: var(--tn-border); }
.tn-note sup { font-size: 1.6rem; font-weight: 600; top: -2.2em; margin-left: 2px; opacity: 0.55; }
.tn-sub { color: var(--tn-muted); font-size: 0.9rem; min-height: 1.4em; margin: 6px 0 22px; }

.tn.is-holding .tn-note,
.tn.is-holding .tn-meter,
.tn.is-holding .tn-cents { opacity: 0.45; }

/* Régua de cents */
.tn-meter {
  position: relative;
  height: 44px;
  margin: 0 6px;
  transition: opacity 0.3s;
}
.tn-meter-ticks {
  position: absolute;
  inset: 8px 0;
  background:
    linear-gradient(to right, transparent calc(50% - 4%), color-mix(in srgb, var(--tn-green) 22%, transparent) calc(50% - 4%) calc(50% + 4%), transparent calc(50% + 4%)),
    repeating-linear-gradient(to right, var(--tn-border) 0 2px, transparent 2px 10%) 0 50% / 100% 70% no-repeat,
    repeating-linear-gradient(to right, var(--tn-border) 0 1px, transparent 1px 5%) 0 50% / 100% 36% no-repeat;
  border-radius: 6px;
}
.tn-meter-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--tn-green);
  border-radius: 2px;
}
.tn-needle {
  --pos: 0;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: calc(50% + var(--pos) * 50%);
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--tn-accent);
  opacity: 0;
  transition: opacity 0.25s, background 0.2s;
}
.tn-needle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: inherit;
}
.tn-needle.is-active { opacity: 1; }

.tn-scale {
  display: flex;
  justify-content: space-between;
  color: var(--tn-muted);
  font-size: 0.75rem;
  margin: 6px 0 0;
  padding: 0 2px;
}
.tn-scale span:nth-child(2) { color: var(--tn-green); font-weight: 700; }

.tn-status { min-height: 58px; margin-top: 14px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tn-hint { font-size: 1.1rem; font-weight: 700; color: var(--tn-accent); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tn-hint small { font-size: 0.8rem; font-weight: 600; opacity: 0.8; }
.tn-card[data-state="listening"] .tn-hint { color: var(--tn-muted); font-weight: 600; font-size: 0.95rem; }
.tn-cents { font-size: 0.85rem; color: var(--tn-muted); font-variant-numeric: tabular-nums; min-height: 1.3em; transition: opacity 0.3s; }

/* Ligar / desligar */
.tn-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 99px;
  padding: 13px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--tn-brand);
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tn-brand) 35%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tn-start:hover { transform: translateY(-1px); }
.tn-start:disabled { opacity: 0.6; cursor: wait; }
.tn-stop {
  border: 0;
  background: none;
  color: var(--tn-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 10px;
  margin-top: 8px;
  cursor: pointer;
}
.tn-stop:hover { color: var(--bs-body-color); }

.tn-start-wrap { margin-top: 18px; }
.tn.is-running .tn-start-wrap { display: none; }
.tn-stop { display: none; }
.tn.is-running .tn-stop { display: inline-block; }
.tn.is-running .tn-status,
.tn-card[data-state="error"] .tn-status { display: flex; }

/* --- Cordas --- */
.tn-strings-wrap { margin-top: 18px; }
.tn-strings {
  --count: 6;
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  gap: 8px;
}
.tn-string {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 2px solid var(--tn-border);
  border-radius: 14px;
  padding: 10px 0 8px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.tn-string:hover { border-color: var(--tn-brand); }
.tn-string-note { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.tn-string-num { font-size: 0.72rem; font-weight: 600; color: var(--tn-muted); }
.tn-string.is-current { border-color: var(--tn-brand); background: color-mix(in srgb, var(--tn-brand) 10%, transparent); transform: translateY(-2px); }
.tn-string.is-locked { border-color: var(--tn-brand); background: var(--tn-brand); color: #fff; }
.tn-string.is-locked .tn-string-num { color: rgba(255, 255, 255, 0.8); }
.tn-string.is-tuned:not(.is-locked) .tn-string-num { color: var(--tn-green); }
.tn-string.is-tuned:not(.is-current):not(.is-locked) { border-color: color-mix(in srgb, var(--tn-green) 55%, var(--tn-border)); }
.tn-strings-help { color: var(--tn-muted); font-size: 0.8rem; text-align: center; margin: 10px 0 0; }

/* --- Rodapé: calibragem --- */
.tn-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--tn-muted);
  font-size: 0.85rem;
}
.tn-foot b { color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.tn-step {
  width: 28px;
  height: 28px;
  border: 1px solid var(--tn-border);
  border-radius: 50%;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.tn-step:hover { border-color: var(--tn-brand); }

@media (max-width: 576px) {
  .tn-head h1 { font-size: 1.35rem; }
  .tn-card { padding: 22px 14px 18px; }
  .tn-note { font-size: 4.5rem; }
  .tn-instruments {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px 10px;
    padding: 0 16px;
  }
  .tn-strings { gap: 6px; }
  .tn-string-note { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-string.is-current { transform: none; }
}