/* Bảng nhạc nền (features/music.js) và bảng góp ý (features/feedback.js) */
#hud .panel.music { text-align: left; width: 320px; }
#hud .music .mTitle { font-weight: 700; color: var(--gold); text-align: center; margin-bottom: 8px; }
#hud .music .tracks { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
#hud .music .tracks button { width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(20,12,6,.4); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s; }
#hud .music .tracks button:hover { border-color: var(--gold); }
#hud .music .tracks button.cur { border-color: var(--gold); background: rgba(232,181,74,.14); }
#hud .music .tracks b { display: block; font-size: 14px; font-weight: 600; }
#hud .music .tracks small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
#hud .music .tracks button.cur b::before { content: '♪ '; color: var(--gold); }
#hud .music .mCtl { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#hud .music .play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; font-size: 16px;
  background: linear-gradient(#f0c35e, #c8902f); color: #2a1a08; transition: transform .12s var(--ease), filter .2s; }
#hud .music .play:hover { filter: brightness(1.08); }
#hud .music .play:active { transform: scale(.94); }
#hud .music .vol { flex: 1; accent-color: var(--gold); }
#hud .music .mState { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  #hud .panel.music { width: min(320px, calc(100% - 24px)); }
}

/* Bảng góp ý */
#hud .panel.feedback { text-align: left; width: 340px; }
#hud .feedback .fTitle { font-weight: 700; color: var(--gold); text-align: center; }
#hud .feedback .fSub { margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); text-align: center; }
#hud .feedback textarea, #hud .feedback .fContact { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(10,6,3,.6); color: var(--text); font: 14px/1.45 system-ui, sans-serif; user-select: text; resize: none; }
#hud .feedback textarea:focus, #hud .feedback .fContact:focus { outline: none; border-color: var(--gold); }
#hud .feedback .fCount { text-align: right; font-size: 11px; color: var(--muted); margin: 2px 2px 8px; }
#hud .feedback .fSend:disabled { opacity: .6; cursor: wait; }
@media (max-width: 600px) { #hud .panel.feedback { width: min(340px, calc(100% - 24px)); } #hud .feedback textarea { height: 104px; } }