/* Miragician shared tuner styles — Duolingo-inspired chunky cards.
   Prefixed tn- to avoid collisions with per-app stylesheets. */

.tn-wrap{ max-width:480px; margin:0 auto; padding:4px 2px 24px; }

.tn-card{
  background:#fff; border:2px solid #e9e1d3; border-radius:18px;
  box-shadow:0 4px 0 #e9e1d3; padding:22px 18px 18px; margin:10px 0 14px;
  text-align:center; transition:box-shadow .25s, border-color .25s;
}
.tn-card.in-tune{
  border-color:#58cc02; box-shadow:0 4px 0 #58cc02, 0 0 26px rgba(88,204,2,.45);
}
.tn-note{
  font-family:Nunito,system-ui,sans-serif; font-weight:900;
  font-size:84px; line-height:1; color:#2a231b;
}
.tn-note small{ font-size:34px; color:#8a7d6b; font-weight:800; margin-left:2px; }
.tn-sub{ margin-top:6px; font-weight:800; color:#8a7d6b; font-size:17px; }
.tn-sub .tn-dot{ margin:0 8px; }
#tnCents.good{ color:#58a700; }
#tnCents.low{ color:#1cb0f6; }
#tnCents.high{ color:#ff4b4b; }

.tn-gauge{
  position:relative; height:26px; margin:20px 6px 8px;
  background:#f4efe4; border:2px solid #e9e1d3; border-radius:999px;
  overflow:hidden;
}
.tn-zone{
  position:absolute; top:0; bottom:0; left:40%; right:40%;
  background:rgba(88,204,2,.28);
}
.tn-tick{ position:absolute; top:5px; bottom:5px; width:2px; background:#d8cdb6; }
.tn-tick.tn-zero{ background:#58a700; width:3px; }
.tn-needle{
  position:absolute; top:-2px; bottom:-2px; width:6px; margin-left:-3px;
  background:#2a231b; border-radius:3px; left:50%;
  transition:left .12s ease-out;
  box-shadow:0 0 0 2px #fff;
}
.tn-card.in-tune .tn-needle{ background:#58a700; }

.tn-verdict{ min-height:64px; margin-top:10px; font-size:16px; color:#8a7d6b; }
.tn-verdict b{ display:block; font-size:19px; color:#2a231b; margin-bottom:2px; }
.tn-verdict span{ display:block; font-size:14px; }
.tn-verdict.in-tune b{ color:#58a700; }
.tn-verdict.low b{ color:#1899d6; }
.tn-verdict.high b{ color:#d33131; }
.tn-verdict.denied b, .tn-verdict.no-mic b{ color:#d33131; }

.tn-modes{ display:flex; gap:8px; justify-content:center; margin:2px 0 10px; }
.tn-mode{
  font-family:Nunito,system-ui,sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:1px; font-size:13px; color:#8a7d6b;
  background:#fff; border:2px solid #e9e1d3; border-radius:999px;
  padding:10px 18px; cursor:pointer; min-height:44px;
}
.tn-mode.on{
  color:#fff; background:#1cb0f6; border-color:#1cb0f6;
  box-shadow:0 3px 0 #1899d6;
}
.tn-mode:active{ transform:translateY(2px); }

.tn-strings{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 0 12px; }
.tn-str{
  font-family:Nunito,system-ui,sans-serif; color:#2a231b;
  background:#fff; border:2px solid #e9e1d3; border-bottom-width:4px; border-radius:14px;
  min-width:58px; min-height:64px; padding:8px 10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tn-str b{ font-size:24px; font-weight:900; }
.tn-str span{ font-size:13px; font-weight:800; color:#8a7d6b; }
.tn-str.near{ border-color:#1cb0f6; box-shadow:0 0 0 3px rgba(28,176,246,.25); }
.tn-str.sel{ border-color:#58cc02; background:#f2fbe4; box-shadow:0 0 0 3px rgba(88,204,2,.25); }
.tn-str:active{ transform:translateY(2px); border-bottom-width:2px; }

.tn-refs{ display:flex; flex-direction:column; gap:8px; margin:0 0 4px; }
.tn-foot{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.tn-foot .btn{ width:100%; }
.tn-start:disabled{ opacity:.6; }

@media (prefers-reduced-motion: reduce){
  .tn-needle{ transition:none; }
}