/* o afinador aberto (/afinador/, /es/afinador/, /en/tuner/) — escuro como o violão, botões opacos, nada transparente por cima */
:root { --fundo: #120d1f; --cartao: #1e1733; --cartao2: #2a2145; --texto: #f4f0ff; --suave: #cfc4ec; --ouro: #ffd23f; --laranja: #ff8a3d; --ok: #3ddc84; --perto: #ffb020; --longe: #ff5a7a; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { min-height: 100vh; -webkit-text-size-adjust: 100%; }
a { color: var(--ouro); }
.escondido { display: none !important; }
.topo { display: flex; align-items: center; gap: 10px; padding: 10px max(14px, env(safe-area-inset-left)); background: #0d0918; position: sticky; top: 0; z-index: 3; }
.topo .casa { color: var(--texto); text-decoration: none; font-weight: 900; font-size: 17px; background: var(--cartao2); padding: 9px 14px; border-radius: 999px; }
.topo .linguas { margin-left: auto; display: flex; gap: 4px; background: var(--cartao); padding: 4px; border-radius: 999px; }
.topo .linguas a { color: var(--suave); text-decoration: none; font-weight: 800; font-size: 14px; padding: 6px 10px; border-radius: 999px; }
.topo .linguas a[aria-current] { background: var(--ouro); color: #1a1020; }
main { max-width: 980px; margin: 0 auto; padding: 12px max(14px, env(safe-area-inset-left)) 40px; }
h1 { font-size: clamp(24px, 5.4vw, 38px); margin: 8px 0 4px; text-align: center; }
.lead { text-align: center; color: var(--suave); margin: 0 0 12px; font-size: 16px; }
/* a escolha do instrumento: cartões com desenho, em rolagem horizontal */
.insts { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.af-i { flex: none; scroll-snap-align: center; width: 108px; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px;
  background: var(--cartao); color: var(--texto); border: 2px solid #3a2f5c; border-radius: 16px; font: inherit; cursor: pointer; }
.af-i b { font-size: 14px; line-height: 1.15; text-align: center; }
.af-i small { font-size: 11px; color: var(--suave); text-align: center; line-height: 1.15; }
.af-i-ic svg { width: 40px; height: 40px; display: block; }
.af-i.ativo { border-color: var(--ouro); background: #3a2c12; box-shadow: 0 0 0 3px rgba(255,210,63,.25); }
.linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 4px 0 10px; }
.campo { display: flex; align-items: center; gap: 8px; background: var(--cartao); padding: 6px 10px; border-radius: 14px; font-weight: 700; color: var(--suave); }
.campo select { font: inherit; font-weight: 800; color: var(--texto); background: var(--cartao2); border: 0; border-radius: 10px; padding: 8px 10px; max-width: 70vw; }
.campo button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--cartao2); color: var(--texto); font-size: 20px; font-weight: 900; cursor: pointer; }
.campo b { color: var(--texto); min-width: 62px; text-align: center; }
/* o palco: o mostrador, a nota, o estado */
.palco { position: relative; background: var(--cartao); border-radius: 22px; padding: 10px 10px 14px; text-align: center; }
#af-mostrador { width: min(100%, 460px, calc((100vh - 360px) * 1.875)); min-width: 240px; display: block; margin: 0 auto; }
#af-mostrador .arco { fill: none; stroke-width: 16; stroke-linecap: butt; }
#af-mostrador .arco.longe { stroke: #4a2638; } #af-mostrador .arco.perto { stroke: #4d3b16; } #af-mostrador .arco.ok { stroke: #1d5236; }
.palco[data-estado="longe"] #af-mostrador .arco.longe { stroke: var(--longe); }
.palco[data-estado="perto"] #af-mostrador .arco.perto { stroke: var(--perto); }
.palco[data-estado="ok"] #af-mostrador .arco.ok { stroke: var(--ok); }
#af-mostrador .risco { stroke: #7d74a0; stroke-width: 3; } #af-mostrador .risco.zero { stroke: var(--ok); stroke-width: 6; }
#af-mostrador .num { fill: var(--suave); font: 800 22px system-ui; text-anchor: middle; }
#af-mostrador .bem, #af-mostrador .sus { fill: #5d547d; font: 900 64px system-ui; text-anchor: middle; }
#af-mostrador .aceso { fill: var(--perto); }
#af-mostrador .agulha { fill: #fff; } #af-mostrador .eixo { fill: #fff; }
.palco[data-estado="ok"] #af-mostrador .agulha, .palco[data-estado="ok"] #af-mostrador .eixo { fill: var(--ok); }
.palco[data-estado="mudo"] #af-mostrador .agulha { fill: #5d547d; }
.nota { font: 900 clamp(44px, 10vw, 72px)/1 system-ui; margin-top: 2px; position: relative; }
.nota sub { font-size: .4em; color: var(--suave); }
.palco[data-estado="ok"] .nota { color: var(--ok); }
.status { font: 900 clamp(20px, 4.6vw, 28px)/1.2 system-ui; margin-top: 8px; min-height: 1.2em; }
.status span { display: inline-block; min-width: 1em; }
.palco[data-estado="ok"] .status { color: var(--ok); } .palco[data-estado="perto"] .status { color: var(--perto); } .palco[data-estado="longe"] .status { color: var(--longe); }
.hz { color: var(--suave); font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
/* o botão grande de ligar (por cima do palco enquanto o microfone está desligado — fundo sólido) */
.ligar { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #1e1733; border-radius: 22px; padding: 16px; }
body.ligado .ligar { display: none; }
.ligar button { display: flex; align-items: center; gap: 12px; border: 0; border-radius: 999px; padding: 18px 30px; font: 900 clamp(20px, 5vw, 26px) system-ui; color: #1a1020; cursor: pointer;
  background: linear-gradient(160deg, #ffb347, #ff5e3a); box-shadow: 0 0 0 8px rgba(255,179,71,.25), 0 16px 30px -10px #000; }
.ligar button[disabled] { opacity: .6; }
.ligar small { color: var(--suave); font-weight: 700; font-size: 15px; }
.espera { display: flex; align-items: center; gap: 10px; color: var(--suave); font-weight: 700; }
.roda { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #4a3f6e; border-top-color: var(--ouro); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.erro { color: #ffb3c2; font-weight: 700; max-width: 520px; white-space: pre-line; }
.barra-mic { display: none; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.barra-mic .campo select { max-width: 46vw; font-size: 14px; padding: 6px 8px; }
body.ligado .barra-mic { display: flex; }
.sinal { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.sinal i { width: 6px; background: #4a3f6e; border-radius: 2px; }
.sinal i:nth-child(1) { height: 6px; } .sinal i:nth-child(2) { height: 11px; } .sinal i:nth-child(3) { height: 16px; } .sinal i:nth-child(4) { height: 22px; }
.sinal[data-nb="1"] i:nth-child(-n+1), .sinal[data-nb="2"] i:nth-child(-n+2), .sinal[data-nb="3"] i:nth-child(-n+3) { background: var(--ok); }
.sinal[data-nb="4"] i { background: var(--longe); }
.parar { border: 0; border-radius: 999px; padding: 10px 18px; font: 800 15px system-ui; background: var(--cartao2); color: var(--texto); cursor: pointer; }
/* as cordas */
.cordas { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.palco .dica { margin: 4px 0 0; }
.af-c { position: relative; min-width: 54px; height: 54px; border-radius: 14px; border: 2px solid #3a2f5c; background: var(--cartao2); color: var(--texto); font: 900 20px system-ui; cursor: pointer; }
.af-c sub { font-size: 11px; color: var(--suave); }
.af-c i { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #0d2a19; font: 900 14px/22px system-ui; font-style: normal; display: none; }
.af-c.ativa { border-color: var(--ouro); background: #3a2c12; } .af-c.ok i { display: block; }
.dica { text-align: center; color: var(--suave); font-size: 14px; margin: 6px 0 0; }
/* o texto (para quem lê e para o Google) */
.texto { margin-top: 28px; color: #e6e0f7; line-height: 1.6; }
.texto h2 { font-size: 22px; margin: 26px 0 8px; color: #fff; }
.texto table { border-collapse: collapse; width: 100%; font-size: 15px; }
.texto td, .texto th { border-bottom: 1px solid #3a2f5c; padding: 8px 6px; text-align: left; }
.texto details { background: var(--cartao); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.texto summary { font-weight: 800; cursor: pointer; }
.texto .mais { display: flex; gap: 10px; flex-wrap: wrap; }
.texto .mais a { background: var(--cartao2); color: var(--texto); text-decoration: none; font-weight: 800; padding: 10px 14px; border-radius: 12px; }
@media (max-width: 480px) { .af-i { width: 88px; min-height: 88px; padding: 6px 4px; } .af-i-ic svg { width: 32px; height: 32px; } h1 { margin-top: 2px; } .lead { display: none; }
  .palco { padding: 6px 8px 10px; } .af-c { min-width: 46px; height: 46px; font-size: 18px; } .status { margin-top: 4px; } }
/* no PC (tela larga): o mostrador à esquerda, a nota, o estado e as cordas à direita — tudo na primeira tela */
@media (min-width: 900px) {
  .palco { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 24px; align-items: center; padding: 16px 20px; }
  #af-mostrador { grid-column: 1; grid-row: 1 / span 6; width: 100%; max-width: 460px; }
  .palco > :not(svg):not(.ligar) { grid-column: 2; }
  .nota { font-size: 84px; }
}