/* Màn hình tụng kinh (features/chant.js) */
#hud .chant { position: absolute; inset: 0; pointer-events: auto; z-index: 5;
  background: linear-gradient(rgba(20,12,6,.35), rgba(20,12,6,.8) 40%, rgba(20,12,6,.92)); }
#hud:has(.chant:not([hidden])) .actions, #hud:has(.chant:not([hidden])) .top { display: none; }
#hud .chant:not([hidden]) { animation: fadeIn .3s ease; }
#hud .chant .close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; background: none;
  border: 1px solid var(--gold-dim); color: var(--text); padding: 6px 16px; border-radius: 8px; cursor: pointer; }
#hud .chant .tabs { position: absolute; top: 96px; left: 0; right: 0; display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; padding: 0 16px; }
#hud .chant .tabs button { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--gold-dim);
  background: rgba(36,24,16,.7); color: var(--text); font-size: 15px; cursor: pointer; }
#hud .chant .tabs button[aria-selected="true"] { background: linear-gradient(#f0c35e, #c8902f); color: #2a1a08; font-weight: 700; border-color: transparent; }
#hud .chant .note { position: absolute; top: 160px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--muted); padding: 0 16px; }
#hud .chant .lines { position: absolute; top: 190px; bottom: 150px; left: 0; right: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
#hud .chant .track { position: absolute; top: 50%; left: 0; right: 0; transition: transform .45s ease; }
#hud .chant .track p { margin: 0; padding: 12px 16px; text-align: center; font-size: 20px; color: rgba(244,233,216,.4); transition: color .3s, transform .3s; }
#hud .chant .track p.on { color: #fff3d6; font-weight: 700; transform: scale(1.08); }
#hud .chant .mo { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 160px; height: 130px; cursor: pointer; touch-action: none; }
#hud .chant .count { position: absolute; left: 20px; bottom: 28px; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
#hud .chant .count b { font-size: 40px; color: var(--gold); }
#hud .chant .count small { display: block; font-size: 13px; }
#hud .chant .count small::before { content: '+'; }
#hud .chant .opts { position: absolute; right: 16px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 14px; }
#hud .chant .opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
#hud .chant .opts small { font-size: 12px; color: var(--muted); }

@media (max-width: 600px) {
  #hud .chant .tabs { top: 56px; gap: 6px; } #hud .chant .tabs button { padding: 7px 12px; font-size: 13px; }
  #hud .chant .note { top: 150px; } #hud .chant .lines { top: 175px; bottom: 210px; }
  #hud .chant .track p { font-size: 17px; padding: 9px 12px; }
  #hud .chant .mo { bottom: 70px; }
  #hud .chant .count { left: 14px; bottom: 14px; } #hud .chant .count b { font-size: 30px; }
  #hud .chant .opts { right: 12px; bottom: 12px; font-size: 13px; } #hud .chant .opts small { display: none; }
}