/* Karaokê: letra grande, voz, gravação e mixagem (celular primeiro) */
.karaoke-pagina { display: grid; gap: 1rem; padding: .5rem 1rem 7rem; max-width: 34rem; margin: 0 auto; min-width: 0; }
.karaoke-pagina [hidden] { display: none !important; }
.k-bloco { display: grid; gap: .7rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.k-bloco h2 { margin: 0; font-size: .95rem; letter-spacing: .02em; }
.k-bloco h2 small { color: var(--fog); font-weight: 500; }

.k-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.k-titulo h1 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.k-titulo p { margin: .1rem 0 0; color: var(--fog); font-size: .88rem; }

/* ---- a letra ---- */
.k-letra {
  display: grid; align-content: center; justify-items: center; gap: .55rem; text-align: center;
  min-height: 15rem; padding: 1.1rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 0%, rgba(196, 23, 42, .18), transparent 70%), var(--surface); overflow: hidden;
}
.k-letra p { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.k-ant { color: rgba(255, 255, 255, .28); font-size: .95rem; min-height: 1.3em; }
.k-prox { color: rgba(255, 255, 255, .5); font-size: 1.05rem; min-height: 1.3em; }
.k-prox + .k-prox { color: rgba(255, 255, 255, .3); font-size: .95rem; }
.k-atual { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.45rem, 6.2vw, 2.2rem); line-height: 1.22; min-height: 2.5em; display: grid; align-items: center; }
.k-atual span {
  --p: 0%;
  background: linear-gradient(90deg, var(--ember-bright) var(--p), var(--paper) var(--p));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.k-vazio { color: var(--ember-bright); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; }
.k-vazio b { font-family: var(--font-mono); font-size: 1.3rem; }
.k-aviso-letra { padding: .7rem .9rem; border: 1px solid var(--ember); border-radius: var(--radius); background: rgba(196, 23, 42, .12); font-size: .88rem; line-height: 1.45; }
.k-aviso-letra button { margin-top: .5rem; }

.k-transporte { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.k-transporte .vs-mini { min-height: 2.75rem; min-width: 2.75rem; }
.k-transporte .vs-tocar.tocando .icone-play { display: none; }
.k-transporte .vs-tocar.tocando .icone-parar { display: block; }

.k-controle { display: grid; gap: .3rem; font-size: .82rem; color: var(--fog); }
.k-controle input[type="range"] { width: 100%; min-height: 2.5rem; }
.k-fone { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--paper-dim); }
.k-medidor { height: .6rem; border-radius: 999px; background: var(--void); border: 1px solid var(--line); overflow: hidden; }
.k-medidor span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #35d07f, #f0cd85 70%, var(--ember-bright)); transition: width .06s linear; }
#k-mic-painel { display: grid; gap: .7rem; }
.k-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.k-acoes > button { min-height: 2.75rem; }
#k-take-audio { width: 100%; }

.k-sinc-lista { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; }
.k-sinc-lista li { display: grid; grid-template-columns: auto 5.2rem auto minmax(0, 1fr) auto; align-items: center; gap: .4rem; font-size: .85rem; }
.k-sinc-lista li .k-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper-dim); }
.k-sinc-lista input { width: 100%; min-height: 2.5rem; padding: 0 .4rem; }
.k-sinc-lista button { min-height: 2.5rem; min-width: 2.5rem; padding: 0 .5rem; }
@media (max-width: 26rem) {
  .k-sinc-lista li { grid-template-columns: auto 4.6rem auto auto; }
  .k-sinc-lista li .k-texto { grid-column: 1 / -1; order: 5; }
}

.k-grav-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.k-grav-lista li { display: grid; gap: .35rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.k-grav-lista strong { overflow-wrap: anywhere; }
.k-grav-lista small { color: var(--fog); }
.k-grav-lista audio { width: 100%; }
.k-grav-lista button { justify-self: start; min-height: 2.5rem; }

@media (prefers-reduced-motion: reduce) { .k-medidor span { transition: none; } }

/* alvos de toque confortaveis no celular */
.karaoke-pagina .vs-passos button { min-height: 2.75rem; min-width: 2.75rem; }
.karaoke-pagina .vs-link-cifra { display: inline-flex; align-items: center; min-height: 2.75rem; }
.karaoke-pagina #k-gravar { min-height: 2.75rem; }