/* ===========================================================================
   問題集 — assets/dpg-t-music.css
   2026-10-30 区間T18 担当M3: 曲を自動で消す・かけ直すの札「♪ 曲をかける」（本人だけに見える 'm-music-auto'）。
   study-music.js が流れの切れた時に1回だけ body に足す（12 秒で消える・×で閉じる・音なし）。休みは勧めない。
   声の操作の数秒の知らせ（.dpg-voice-note・dpg-t-quiz.css）と同じ所（上の帯のすぐ下の真ん中）に重ねて出し、中身は押し下げない（場所を取らない）。
   位置の top・left は JS が上の帯から決める。押す所は 44px 以上。動きを減らす設定では薄く出す・消すの動きなし。
   札が無い時は .dpg-music-ask が作られないので、何も変わらない。色・角丸・余白はトークンだけ。
   =========================================================================== */
.dpg-music-ask {
  position: fixed;
  z-index: 70;
  top: var(--g-s1);
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 2 * var(--g-s1));
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--g-card-shadow-lift);
  font-size: var(--g-fs-small);
  font-weight: 700;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.dpg-music-ask.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-fast) var(--ease-out); }
.dpg-music-ask__play,
.dpg-music-ask__close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dpg-music-ask__play { padding: 0 var(--g-s1) 0 var(--g-s2); color: var(--accent); font-weight: 800; white-space: nowrap; }
.dpg-music-ask__close { padding: 0; color: var(--text-2); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .dpg-music-ask, .dpg-music-ask.is-on { transition: none; }
}