/* ECR301 · Chủ đề âm nhạc (bảng màu "neon" của skill web-am-nhac). Nạp SAU style.css: chỉ đổi token màu và thêm sân khấu EQ + Góc nhạc.
   Màu lấy từ gen_music_tokens.js (neon sáng / tối, đã kiểm WCAG ở bản gốc). Muốn bỏ chủ đề: gỡ music.css, eq3d.js, eqhome.js, mt-shim.js, bgm.js và nút #snd. */
:root{
  --bg:#F6F4FF;--card:#FFFFFF;--ink:#1B1740;--mute:#585387;--line:#D9D3F7;
  --acc:#6C47FF;--acc-d:#4B2BD6;--acc-soft:#E9E4FF;--on-acc:#FFFFFF;
  --pink:#FF5FA8;--gold:#F2A93B;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0A0820;--card:#14113A;--ink:#EFEBFF;--mute:#BAB4EC;--line:#35307A;
  --acc:#A58BFF;--acc-d:#CDBFFF;--acc-soft:#251F60;--on-acc:#140B3D;
  --pink:#FF9FCB;--gold:#FFC764}}
.brand{flex-direction:row;align-items:center;gap:10px}
.brand .t{display:flex;flex-direction:column;line-height:1.25}
.top{position:relative}
.top:after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--acc) 25%,var(--pink) 75%,transparent);opacity:.7}
.tabs a.on{border-top-color:var(--pink)}
@media (min-width:860px){.tabs a.on{border-bottom-color:var(--pink)}}
.top .row{gap:8px;flex-wrap:nowrap}
#snd{gap:6px}
#snd[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
/* biểu tượng equalizer nhỏ cạnh tên web: chỉ chuyển động khi đang phát nhạc */
.eqi{display:inline-flex;align-items:flex-end;gap:2px;height:24px;width:26px}
.eqi i{flex:1;height:100%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--pink),var(--acc));transform-origin:50% 100%;transform:scaleY(var(--h))}
html.bgm-on .eqi i{animation:eqb .7s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes eqb{from{transform:scaleY(var(--h))}to{transform:scaleY(.2)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* sân khấu */
.stage{background:#07041f;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:12px 0 4px}
.stage canvas{display:block;width:100%;height:clamp(260px,46vw,400px);cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage-cap{margin:6px 0 12px}
/* ---------- Góc nhạc: full = thẻ đầy đủ, mini = ô video 200×200 vẫn phát, closed = ẩn (đã dừng) ---------- */
:root{--bgm-w:0px;--bgm-h:0px}
.bgm{position:fixed;z-index:70;--g:#A58BFF;--gh:#CDBFFF;--gl:#35307A}
.bgm.closed{display:none}
.bgm-card{background:#14113A;border:1px solid var(--gl);border-radius:14px;padding:10px;color:#EFEBFF;box-shadow:0 18px 50px #000000b0}
.bgm-head{display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--g)}
.bgm-hb{display:flex;gap:.3rem}
.bgm-ib{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--gl);background:#1C1850;color:#EFEBFF;cursor:pointer;padding:0}
.bgm-ib .ic{width:18px;height:18px}
.bgm-ib:hover{border-color:var(--g);color:#fff}.bgm-ib.big{background:var(--g);border-color:var(--g);color:#140B3D;width:40px;height:40px}
.bgm.full .mini-only{display:none}
.bgm.mini .bgm-head,.bgm.mini .bgm-hint,.bgm.mini .bgm-c,.bgm.mini .bgm-yt{display:none}
.bgm.mini #bgmMute{display:none}.bgm.mini .bgm-ctl{flex-wrap:nowrap}.bgm.mini .bgm-ib{width:34px;height:34px}.bgm.mini .bgm-ib.big{width:38px;height:38px}
.bgm-stage{position:relative;width:100%;height:200px;border-radius:10px;overflow:hidden;background:#000}
.bgm-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.bgm-stage.loading::after{content:'';position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border:3px solid #ffffff44;border-top-color:var(--g);border-radius:50%;animation:spin .9s linear infinite}
.bgm-sound{margin:6px 2px 0;font-size:.74rem;color:var(--gh);line-height:1.35;text-align:center}
.bgm-hint{margin:8px 2px 0;font-size:.76rem;color:#BAB4EC;line-height:1.4}
.bgm-t{margin:6px 2px 0;font-weight:600;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bgm-c{margin:2px 2px 0;font-size:.7rem;color:#BAB4EC;line-height:1.4}
.bgm-ctl{display:flex;align-items:center;gap:.35rem;margin-top:8px;flex-wrap:wrap}
.bgm-vol{display:flex;align-items:center;flex:1;min-width:56px}.bgm-vol input{width:100%;accent-color:var(--g)}
.bgm-yt{font-size:.72rem;color:var(--gh);width:100%}
.bgm-msg{margin:.6rem 2px 0;padding:.5rem .7rem;border-radius:8px;background:#3F1D1A;color:#FFD9D4;font-size:.78rem}.bgm-msg a{color:var(--gh)}
/* từ 700px: cột nhỏ ở GÓC TRÁI TRÊN; nội dung dịch sang phải đúng bề rộng cột (--bgm-w) nên không bị đè */
@media (min-width:700px){
  .bgm{top:70px;left:10px}
  .bgm-card{width:216px;padding:6px;max-height:calc(100vh - 80px);overflow-y:auto}
  .bgm.full .bgm-card{width:300px;padding:8px}
  html.bgm-open{--bgm-w:236px}html.bgm-full{--bgm-w:320px}
  html.bgm-open .top,html.bgm-open main,html.bgm-open .foot{margin-left:max(var(--bgm-w),calc((100% - 1040px)/2))}
}
@media (min-width:860px){.bgm{top:132px}}
/* điện thoại: thanh nằm TRÊN thanh tab dưới đáy, nội dung có đệm đáy */
@media (max-width:699px){
  .bgm{left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom))}
  .bgm-card{width:100%;border-radius:14px 14px 0 0;border-bottom:0;display:grid;grid-template-columns:204px minmax(0,1fr);column-gap:12px;align-content:start;padding:8px 12px;max-height:60vh;overflow-y:auto}
  .bgm-head{grid-column:1/-1;grid-row:1}
  .bgm-stage{grid-column:1;grid-row:2/span 7;width:204px}
  .bgm-card>:not(.bgm-head):not(.bgm-stage){grid-column:2;margin-top:0}
  .bgm-card>.bgm-ctl{margin-top:8px}
  html.bgm-open{--bgm-h:232px}html.bgm-full{--bgm-h:330px}
  html.bgm-open body{padding-bottom:calc(64px + var(--bgm-h) + env(safe-area-inset-bottom))}
}
@media (max-width:420px){.bgm-card{grid-template-columns:204px minmax(0,1fr);column-gap:8px;padding-left:8px;padding-right:8px}.bgm.mini .bgm-ctl{flex-wrap:wrap}}
@media print{.bgm,.stage,.stage-cap,#snd,.eqi{display:none!important}}
@media (prefers-reduced-motion:reduce){html.bgm-on .eqi i{animation:none}}