/* =====================================================================
   Nút nhạc nổi: MỘT nút tròn 44px hình dấu sáp vàng (assets/seal-gold.webp),
   cách góc dưới phải 16px + vùng an toàn. Ghi đè kiểu .music cũ trong style.css.
   Đang phát: vòng sóng âm vàng mảnh lan ra. Chạm → menu nhỏ (nhạc nền / playlist).
   ===================================================================== */
#music.music {
  position: fixed; z-index: 90;
  right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: url("../assets/seal-gold.webp") center / 112% auto no-repeat, radial-gradient(circle at 40% 32%, #7A1E2A, #4A0F18 72%);
  box-shadow: 0 0 0 1px rgba(184, 146, 90, .75), 0 4px 12px -2px rgba(46, 9, 16, .45);
  color: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
  animation: none;
}
#music.music[hidden] { display: none; }
#music.music .disc { display: none; }               /* bỏ đĩa than + chữ lồng: dấu sáp đã có monogram PP */
#music.music:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px #B8925A, 0 6px 16px -2px rgba(46, 9, 16, .5); }
#music.music:active { transform: scale(.94); }
#music.music:focus-visible { outline: 1.5px solid #B8925A; outline-offset: 3px; }
#music.music:not(.playing) { filter: saturate(.8) brightness(.94); }

/* vòng sóng âm: hai vòng vàng 1px lan ra lần lượt khi đang phát */
#music.music::before, #music.music::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(184, 146, 90, .85); opacity: 0;
}
#music.music.playing::before { animation: muWave 2.4s cubic-bezier(.25, .6, .35, 1) infinite; }
#music.music.playing::after { animation: muWave 2.4s cubic-bezier(.25, .6, .35, 1) 1.2s infinite; }
@keyframes muWave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }

/* chờ cú chạm đầu tiên để bật nhạc (mở thiệp bằng rê chuột) */
#music.music.ask { animation: muAsk 1.8s ease-out infinite; }
@keyframes muAsk { 0% { box-shadow: 0 0 0 1px rgba(184, 146, 90, .75), 0 0 0 0 rgba(184, 146, 90, .5), 0 4px 12px -2px rgba(46, 9, 16, .45); }
  100% { box-shadow: 0 0 0 1px rgba(184, 146, 90, .75), 0 0 0 12px rgba(184, 146, 90, 0), 0 4px 12px -2px rgba(46, 9, 16, .45); } }

/* tự ẩn khi đang cuộn / đang gõ (trượt xuống + mờ đi, không nhận chạm) */
#music.music.mu-away { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }

/* tên bản nhạc (kèm ghi công Canon in D — Kevin MacLeod, CC BY 3.0): rê chuột / focus */
#music .music-tip {
  right: 54px; max-width: min(70vw, 22rem); overflow: hidden; text-overflow: ellipsis;
  background: #5A1620; color: #F6EEE4; box-shadow: 0 0 0 1px rgba(184, 146, 90, .55), 0 4px 12px rgba(0, 0, 0, .25);
  font: italic 400 0.8125rem/1 var(--f-soft, Georgia), serif;
}
#music.music:hover .music-tip, #music.music:focus-visible .music-tip { opacity: 1; }
#music.music.menu-open .music-tip, #music.music.mu-away .music-tip { opacity: 0 !important; animation: none; }
@media (hover: none) { #music.music:not(.ask) .music-tip { display: none; } }

/* menu nhỏ phía trên nút */
.mu-menu {
  position: fixed; z-index: 91;
  right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + 44px + 10px + env(safe-area-inset-bottom));
  min-width: 13.5rem; max-width: min(80vw, 18rem); padding: 6px;
  border-radius: 12px; background: #FBF6EE; color: #5A1620;
  box-shadow: 0 0 0 1px rgba(184, 146, 90, .55), 0 14px 32px -10px rgba(46, 9, 16, .45);
  opacity: 0; transform: translateY(6px) scale(.98); transform-origin: 100% 100%;
  transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.mu-menu[hidden] { display: none; }
.mu-menu.on { opacity: 1; transform: none; }
.mu-now {
  margin: 4px 10px 6px; padding-bottom: 7px; border-bottom: 1px solid rgba(184, 146, 90, .35);
  font: italic 400 0.75rem/1.35 var(--f-soft, Georgia), serif; color: rgba(90, 22, 32, .72);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mu-now[hidden] { display: none; }
.mu-i {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer;
  font: 400 0.9375rem/1.2 var(--f-soft, Georgia), serif;
  -webkit-tap-highlight-color: transparent;
}
.mu-i:hover, .mu-i:focus-visible { background: rgba(184, 146, 90, .14); outline: none; }
.mu-i:focus-visible { box-shadow: inset 0 0 0 1px #B8925A; }
.mu-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: #B8925A; }
.mu-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

body.locked .mu-menu { display: none; }

/* Trình phát nhạc YouTube nhỏ (phải hiện khi đang phát theo điều khoản YouTube; khung ≥200×200) */
.yt-card {
  position: fixed; z-index: 60; right: max(14px, env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom));
  width: 220px; border-radius: 14px; overflow: hidden; background: #2E0910;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 164, 106, .35);
  opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
/* hơi trong suốt cho đỡ che chữ; rõ hẳn khi rê chuột / chạm / đang kéo */
.yt-card.on { opacity: .72; transform: none; }
.yt-card.on:hover, .yt-card.on:focus-within, .yt-card.on.touched, .yt-card.on.drag, .yt-card.on.need-tap { opacity: 1; }
.yt-frame { position: relative; width: 220px; height: 200px; background: #000; }
.yt-frame iframe, .yt-frame > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-hint {
  position: absolute; left: 50%; bottom: 10px; z-index: 2; transform: translateX(-50%); margin: 0;
  padding: 5px 11px; border-radius: 999px; background: rgba(46, 9, 16, .86); color: #F5EFE6; white-space: nowrap;
  font: 500 12px/1.2 var(--f-soft, Georgia), serif; pointer-events: none; opacity: 0; transition: opacity .3s;
}
.yt-card.need-tap .yt-hint { opacity: 1; animation: ytHint 1.6s ease-in-out infinite; }
@keyframes ytHint { 50% { transform: translate(-50%, -3px); } }
.yt-bar { display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 10px; color: #F5EFE6; }
.yt-title { flex: 1; min-width: 0; font: italic 400 13px/1.25 var(--f-soft, Georgia), serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-b { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #E3C99A; font: 600 20px/1 Georgia, serif; cursor: pointer; position: relative; }
.yt-b::after { content: ""; position: absolute; inset: -5px; }
.yt-b:hover { background: rgba(227, 201, 154, .14); }
.yt-b:focus-visible { outline: 2px solid #E3C99A; outline-offset: 1px; }
@media (min-width: 900px) { .yt-card { width: 260px; } .yt-frame { width: 260px; height: 200px; } }
/* điện thoại: mặc định góc dưới bên trái (nút dấu sáp ở bên phải), không che tên ở giữa màn hình */
@media (max-width: 899px) {
  .yt-card { right: auto; left: max(12px, env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); width: 200px; }
  .yt-frame { width: 200px; height: 200px; }
}

/* kéo thả */
.yt-bar { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.yt-card.drag { transition: none; box-shadow: 0 22px 44px -10px rgba(0, 0, 0, .65), 0 0 0 1px rgba(227, 201, 154, .6); }
.yt-card.drag .yt-bar { cursor: grabbing; }
.yt-card.drag .yt-frame { pointer-events: none; }
.yt-grip { flex: none; width: 10px; height: 16px; margin-right: 4px; opacity: .7;
  background: radial-gradient(circle, #E3C99A 1.2px, transparent 1.6px) 0 0 / 5px 5px; }