/* ===== PLAYER DOS HINOS ===== */
nav a.navlink.active{
  color:var(--gold-bright)!important;
}
nav a.navlink.active::after{
  width:100%!important;
  height:2px;
  box-shadow:0 0 14px rgba(227,195,77,.45);
}
nav a.navlink.active{
  text-shadow:0 0 14px rgba(227,195,77,.14);
}

.hymn-panel{
  max-width:940px!important;
}
.hymn-player{
  margin-top:28px;
  text-align:left;
}
.hymn-player audio{
  display:none;
}
.player-shell{
  border:1px solid rgba(201,162,39,.26);
  border-radius:18px;
  padding:22px;
  background:
    radial-gradient(circle at 15% 0%,rgba(227,195,77,.08),transparent 34%),
    linear-gradient(160deg,rgba(16,27,60,.82),rgba(6,11,26,.74));
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.player-main{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
}
.player-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.audio-control{
  appearance:none;
  border:1px solid rgba(201,162,39,.30);
  background:rgba(6,11,26,.55);
  color:var(--ivory);
  height:42px;
  min-width:42px;
  padding:0 12px;
  border-radius:12px;
  cursor:pointer;
  font-family:var(--body);
  transition:.25s;
}
.audio-control:hover{
  border-color:var(--gold);
  color:var(--gold-bright);
  transform:translateY(-1px);
}
.audio-control.primary{
  min-width:94px;
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  color:var(--navy-950);
  border:0;
  font-weight:600;
  box-shadow:0 7px 20px rgba(201,162,39,.24);
}
.audio-control .control-label{
  margin-left:7px;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.audio-control.muted{
  opacity:.55;
}
.player-timeline{
  min-width:0;
}
.audio-seek{
  width:100%;
  accent-color:var(--gold-bright);
  cursor:pointer;
}
.audio-seek:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.time-row{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.08em;
}
.player-tools{
  display:flex;
  gap:10px;
  align-items:center;
}
.volume-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.audio-volume{
  width:80px;
  accent-color:var(--gold);
}
.audio-speed{
  border:1px solid rgba(201,162,39,.28);
  background:rgba(6,11,26,.72);
  color:var(--ivory-dim);
  border-radius:9px;
  padding:9px 8px;
  font-family:var(--body);
}
.audio-status{
  margin-top:12px;
  min-height:20px;
  color:var(--muted);
  font-size:.78rem;
  text-align:center;
}
.lyrics-card{
  margin-top:18px;
  border-top:1px solid rgba(201,162,39,.16);
  padding-top:18px;
}
.lyrics-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:13px;
}
.lyrics-head strong{
  font-family:var(--serif);
  color:var(--gold-bright);
  font-size:.95rem;
}
.lyrics-head span{
  color:var(--muted);
  font-size:.76rem;
}
.lyrics-lines{
  height:320px;
  overflow-y:auto;
  scroll-behavior:smooth;
  padding:28px 22px;
  border-radius:15px;
  background:rgba(3,8,20,.45);
  border:1px solid rgba(244,239,227,.07);
  scrollbar-width:thin;
  scrollbar-color:rgba(201,162,39,.5) transparent;
}
.lyrics-lines::-webkit-scrollbar{width:6px}
.lyrics-lines::-webkit-scrollbar-thumb{
  background:rgba(201,162,39,.48);
  border-radius:10px;
}
.lyric-line{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:rgba(201,196,180,.52);
  font-family:var(--garamond);
  font-size:1.12rem;
  line-height:1.55;
  padding:7px 10px;
  text-align:center;
  transition:.28s ease;
}
button.lyric-line{
  cursor:pointer;
}
.lyric-line.passed{
  color:rgba(201,196,180,.32);
}
.lyric-line.current{
  color:var(--ivory);
  transform:scale(1.035);
  font-weight:600;
  text-shadow:0 0 18px rgba(227,195,77,.26);
}
.lyric-line.current::before,
.lyric-line.current::after{
  content:" ✦ ";
  color:var(--gold-bright);
  font-size:.65rem;
  vertical-align:middle;
}
.lyric-line-static{
  color:var(--ivory-dim);
}
.lyric-empty{
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--muted);
  font-family:var(--garamond);
  font-style:italic;
  font-size:1.08rem;
}
.hymn-static-source{
  display:none!important;
}
@media(max-width:820px){
  .player-main{
    grid-template-columns:1fr;
  }
  .player-controls,
  .player-tools{
    justify-content:center;
    flex-wrap:wrap;
  }
  .player-timeline{
    order:3;
  }
  .lyrics-lines{
    height:280px;
    padding:22px 10px;
  }
  .audio-volume{width:110px}
}

.hymn-credit{
  margin:12px 4px 0;
  color:var(--muted);
  font-size:.72rem;
  text-align:center;
  letter-spacing:.03em;
  opacity:.82;
}


/* ===== CORREÇÃO KARAOKÊ / LETRA SINCRONIZADA ===== */
.lyrics-lines{
  position:relative!important;
  scroll-behavior:auto!important;
  padding:135px 22px!important;
  overscroll-behavior:contain;
}
.lyric-line{
  opacity:.45;
  transform:none!important;
}
.lyric-line.passed{
  opacity:.26;
}
.lyric-line.upcoming{
  opacity:.42;
}
.lyric-line.current{
  opacity:1!important;
  color:var(--gold-bright)!important;
  font-size:1.28rem!important;
  transform:scale(1.035)!important;
  text-shadow:0 0 20px rgba(227,195,77,.28)!important;
}
.lyric-line.current::before,
.lyric-line.current::after{
  color:var(--gold-bright)!important;
}


/* ===== TRANSIÇÃO SUAVE DA LETRA ===== */
.lyrics-lines{
  scroll-behavior:auto!important;
}
.lyric-line{
  transition:
    color .62s ease,
    opacity .62s ease,
    transform .62s cubic-bezier(.22,.61,.36,1),
    text-shadow .62s ease,
    filter .62s ease!important;
  will-change:opacity,transform;
}
.lyric-line.passed{
  opacity:.24!important;
  transform:scale(.985)!important;
  filter:blur(.15px);
}
.lyric-line.upcoming{
  opacity:.38!important;
  transform:scale(.992)!important;
}
.lyric-line.current{
  opacity:1!important;
  color:var(--gold-bright)!important;
  transform:scale(1.035)!important;
  filter:none!important;
  text-shadow:0 0 20px rgba(227,195,77,.30)!important;
}


/* ===== V17 — seletor integrado + sincronização manual ===== */
.hymn-interface{
  max-width:980px;
  margin:0 auto;
  padding:22px;
  border:1px solid rgba(201,162,39,.20);
  border-radius:24px;
  background:
    radial-gradient(circle at 15% 0%,rgba(227,195,77,.06),transparent 34%),
    linear-gradient(160deg,rgba(16,27,60,.34),rgba(6,11,26,.16));
}
.hymn-interface .hymn-tabs{
  margin:0 auto 10px!important;
}
.hymn-interface .hymn-selector-tip{
  margin:4px auto 24px!important;
}
.hymn-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  min-width:238px!important;
  text-align:left!important;
}
.hymn-tab .tab-flag-wrap{
  width:52px!important;
  height:38px!important;
  flex:0 0 52px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:rgba(3,8,20,.45)!important;
}
.hymn-tab .tab-flag{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.hymn-tab .tab-copy{
  display:grid!important;
  gap:2px!important;
}
.hymn-tab .tab-copy small{
  display:block!important;
  opacity:.72!important;
  font-size:.62rem!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
.hymn-hero{
  margin:0 auto 18px!important;
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
}
.hymn-hero .hero-flag-wave{
  width:92px!important;
  height:72px!important;
  display:grid!important;
  place-items:center!important;
}
.hymn-hero .hero-flag{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.hymn-hero .hero-flag-note{
  font-size:.68rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
}
.hymn-static-source{display:none!important}

.sync-toggle{
  white-space:nowrap;
}
.sync-recorder{
  display:none;
  margin-top:16px;
  padding:16px;
  border-radius:15px;
  border:1px solid rgba(201,162,39,.22);
  background:rgba(4,10,24,.72);
}
.hymn-player.sync-mode .sync-recorder{display:block}
.sync-recorder .sync-title{
  color:var(--gold-bright);
  font-family:var(--serif);
  font-size:.94rem;
  margin-bottom:7px;
}
.sync-recorder .sync-help{
  color:var(--ivory-dim);
  line-height:1.55;
  font-size:.82rem;
  margin-bottom:12px;
}
.sync-recorder .sync-current{
  min-height:42px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(201,162,39,.07);
  color:var(--ivory);
  font-size:.83rem;
  margin-bottom:12px;
}
.sync-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.sync-actions .audio-control{height:auto;min-height:40px}
.hymn-player.sync-mode .lyric-line.sync-target{
  color:var(--gold-bright)!important;
  opacity:1!important;
  outline:1px dashed rgba(227,195,77,.38);
  outline-offset:-2px;
  border-radius:8px;
}
.sync-saved{
  color:var(--gold-bright);
  text-align:center;
  margin-top:9px;
  font-size:.76rem;
}
@media(max-width:820px){
  .hymn-interface{padding:14px}
  .hymn-tab{width:100%!important;min-width:0!important}
}

/* ===== V25 — correção definitiva do player no celular ===== */
/* Fallback nativo: se o JS não iniciar no aparelho, o áudio continua tocável. */
.hymn-player > .native-audio-fallback{
  display:block;
  width:100%;
  height:44px;
  margin:0 0 14px;
}
.hymn-player.player-ready > .native-audio-fallback{
  display:none!important;
}

/* A letra permanece legível mesmo antes do primeiro play. */
.lyric-line-static{
  display:block;
  width:100%;
  color:rgba(244,239,227,.74);
  font-family:var(--garamond);
  font-size:1.08rem;
  line-height:1.55;
  text-align:center;
  padding:7px 8px;
}

@media(max-width:820px){
  .hymn-interface{
    width:100%;
    max-width:100%;
    padding:12px!important;
    border-radius:18px;
    box-sizing:border-box;
  }
  .hymn-panel,
  .hymn-player,
  .player-shell{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box;
  }
  .player-shell{
    padding:14px 11px!important;
    border-radius:15px;
  }
  .player-main{
    display:flex!important;
    flex-direction:column!important;
    gap:13px!important;
    width:100%;
  }
  .player-controls{
    display:grid!important;
    grid-template-columns:56px minmax(110px,1fr) 56px!important;
    gap:8px!important;
    width:100%!important;
    align-items:center!important;
  }
  .player-controls .audio-control{
    width:100%!important;
    min-width:0!important;
    padding:0 6px!important;
    white-space:nowrap!important;
    font-size:.76rem!important;
  }
  .player-controls .audio-control.primary{
    min-width:0!important;
    padding:0 10px!important;
  }
  .audio-control .control-label{
    margin-left:5px!important;
    font-size:.68rem!important;
  }
  .player-timeline{
    order:2!important;
    width:100%!important;
  }
  .audio-seek{
    width:100%!important;
    min-width:0!important;
  }
  .player-tools{
    order:3!important;
    display:grid!important;
    grid-template-columns:46px minmax(90px,1fr) 72px!important;
    gap:8px!important;
    width:100%!important;
    align-items:center!important;
  }
  .player-tools > .audio-control:not(.sync-toggle){
    min-width:46px!important;
    width:46px!important;
    padding:0!important;
  }
  .volume-wrap{
    width:100%!important;
    min-width:0!important;
  }
  .audio-volume{
    width:100%!important;
    min-width:0!important;
  }
  .audio-speed{
    width:72px!important;
    min-width:72px!important;
    padding:9px 5px!important;
  }
  .sync-toggle{
    grid-column:1 / -1!important;
    width:100%!important;
    height:38px!important;
    min-width:0!important;
    white-space:normal!important;
  }
  .audio-status{
    margin-top:10px!important;
    font-size:.72rem!important;
    line-height:1.4!important;
  }
  .lyrics-head{
    align-items:flex-start!important;
    gap:8px!important;
    flex-direction:column!important;
  }
  .lyrics-head span{
    font-size:.70rem!important;
    line-height:1.35!important;
  }
  .lyrics-lines{
    display:block!important;
    height:300px!important;
    min-height:300px!important;
    padding:92px 8px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .lyric-line,
  .lyric-line-static{
    font-size:1rem!important;
    line-height:1.45!important;
    padding:8px 4px!important;
    min-height:36px!important;
  }
  .lyric-line.current{
    font-size:1.08rem!important;
  }
  .sync-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .sync-actions .audio-control{
    width:100%!important;
    min-width:0!important;
  }
}

@media(max-width:420px){
  .hymn-interface{padding:9px!important}
  .player-shell{padding:12px 9px!important}
  .player-controls{grid-template-columns:52px minmax(104px,1fr) 52px!important}
  .player-controls .audio-control{font-size:.71rem!important}
  .player-tools{grid-template-columns:44px minmax(80px,1fr) 68px!important}
  .audio-speed{width:68px!important;min-width:68px!important}
  .lyrics-lines{height:285px!important;min-height:285px!important;padding:84px 6px!important}
}


/* ===== V30 — editor de sincronia confiável ===== */
.sync-recorder code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gold-bright);font-size:.92em}
.sync-current .sync-time{display:inline-block;margin-top:4px;color:var(--muted);font-size:.76rem}
.sync-actions-main{margin-bottom:8px}
.sync-actions-fine{margin-top:4px;margin-bottom:12px}
.sync-actions-fine .audio-control{min-width:92px}
.sync-export-box{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:center;margin-top:12px;padding:13px 14px;border:1px solid rgba(201,162,39,.22);border-radius:12px;background:rgba(201,162,39,.055)}
.sync-export-box strong{color:var(--gold-bright);font-family:var(--serif);font-size:.8rem}
.sync-export-box span{color:var(--ivory-dim);font-size:.78rem;line-height:1.45}
.sync-download{white-space:nowrap}
.sync-actions-reset{margin-top:10px}
@media(max-width:820px){
  .sync-export-box{grid-template-columns:1fr;text-align:left}
  .sync-download{width:100%!important}
  .sync-actions-fine{grid-template-columns:1fr 1fr!important}
}

.sync-export-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}.sync-export-actions .audio-control{height:auto;min-height:40px}@media(max-width:820px){.sync-export-actions{display:grid;grid-template-columns:1fr}.sync-export-actions .audio-control{width:100%!important}}