#bgmBar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px max(12px, var(--safe-left));
    background: #161b2e;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: var(--text-on-dark);
    font-size: 12px;
  }
  #bgmBar[hidden] { display: none; }
  .bgm-note { font-size: 14px; line-height: 1; }
  .bgm-bar-text { flex: 1; min-width: 0; }
  .bgm-bar-status { display: block; color: #9aa4c8; font-size: 11px; }
  /* 곡/플레이리스트 이름은 제작자가 입력한 값이라 길이를 신뢰할 수 없다 — 한 줄로 자른다. */
  .bgm-bar-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bgm-bar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

  /* inline-flex + center: 이 클래스는 <button>과 <a> 양쪽에 붙는데, 버튼은 내용을 스스로
   * 가운데 정렬하지만 앵커는 그러지 않는다. 그대로 두면 "Video"만 위로 뜬 것처럼 보인다.
   * 높이도 고정해 옆의 톱니 아이콘 버튼과 정확히 같은 줄에 앉게 한다. */
  .bgm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font: inherit;
    font-size: 12px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
  }
  .bgm-btn:hover { background: var(--accent-dark); }
  .bgm-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .bgm-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .22);
    color: #c6cde8;
  }
  .bgm-btn-ghost:hover { background: rgba(255, 255, 255, .08); }

  /* 제목/출처 줄을 없앤 뒤로 이 섹션의 내용은 영상(+가끔 덮어쓰기 안내)뿐이라, 위쪽 여백을
   * 바 바로 아래 붙는 정도로만 남긴다. */
  #bgmSection {
    padding: 12px max(12px, var(--safe-left)) calc(20px + var(--safe-bottom)) max(12px, var(--safe-right));
    background: var(--navy-2);
    color: var(--text-on-dark);
  }
  #bgmSection[hidden] { display: none; }
  /* 덮어쓰기 안내: 경고가 아니라 설명이므로 눈에 띄되 위협적이지 않은 톤(호박색). */
  .bgm-override-note {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 217, 61, .28);
    background: rgba(255, 217, 61, .07);
    color: #e4d29a;
    font-size: 11.5px;
    line-height: 1.5;
  }
  .bgm-override-note[hidden] { display: none; }

  /* 16:9 비율 유지. aspect-ratio를 쓰되 미지원 브라우저에서도 최소 높이는 확보한다. */
  .bgm-player-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 180px;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0d16;
    border: 1px solid rgba(255, 255, 255, .1);
  }
  .bgm-player-box iframe { display: block; width: 100%; height: 100%; border: 0; }
  /* 자리표시자: iframe을 만들기 전까지 여기에 아무것도 로드하지 않는다(아래 JS 주석 참고). */
  .bgm-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 12px;
    font: inherit;
    font-size: 13px;
    text-align: center;
    color: #c6cde8;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .bgm-placeholder:hover { background: rgba(255, 255, 255, .04); }
  /* display:flex가 [hidden]의 기본 display:none을 이기므로 명시적으로 되돌린다
   * (#bgmBar도 같은 이유로 위에 같은 규칙이 있다). */
  .bgm-placeholder[hidden] { display: none; }
  .bgm-placeholder small { color: #7b85ab; font-size: 11px; }
  .bgm-placeholder-play {
    font-size: 26px;
    line-height: 1;
    color: var(--neon-cyan);
  }

  /* ---- level meter (decorative) ----
   * album/index.html의 세그먼트 LED 미터를 이 좁은 바에 맞게 옮긴 것. 다만 그쪽은
   * 같은-출처 오디오를 Web Audio AnalyserNode로 분석한 "진짜" 스펙트럼인 반면, 여기서
   * 소리를 내는 것은 교차-출처 YouTube iframe이라 오디오 스트림에 접근할 방법이 아예 없다.
   * 따라서 이 막대는 재생 상태에만 반응하는 장식이다(bgmMeterTick의 난수 워크 + 중력 낙하).
   * 그래서 aria-hidden이며, 정지 중에는 애니메이션을 멈춘다. */
  .bgm-meter {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
    flex: 0 0 auto;
  }
  .bgm-meter-bar {
    width: 3px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
  }
  .bgm-meter-seg {
    flex: 1;
    border-radius: 1px;
    background: rgba(94, 241, 255, .16);
    transition: background .12s linear, box-shadow .12s linear;
  }
  .bgm-meter-seg.on {
    background: var(--neon-cyan);
    box-shadow: 0 0 4px rgba(94, 241, 255, .7);
  }
  /* 정지 상태에서는 색만 죽여 "멈춰 있음"을 드러낸다. */
  .bgm-meter.idle .bgm-meter-seg.on {
    background: rgba(94, 241, 255, .3);
    box-shadow: none;
  }

  /* .icon-btn의 min-width/min-height(40px)가 width/height보다 우선하므로 함께 눌러줘야
   * 실제로 30px이 된다 -- 그러지 않으면 이 버튼만 40px이라 옆 알약 버튼들과 줄이 어긋난다. */
  .bgm-gear {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 999px;
    color: #c6cde8;
  }
  .bgm-gear:hover { background: rgba(255, 255, 255, .08); }

  /* ---- music settings dialog ----
   * #shopPanel과 같은 오버레이 규약(fixed + 게임 컬럼 폭으로 제한 + 불투명 배경)이라,
   * 열려 있는 동안 게임/자동재생이 클릭을 전혀 받지 않는다. */
  #bgmModal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: var(--game-max-width);
    transform: translateX(-50%);
    background: var(--navy-2);
    color: var(--text-on-dark);
    z-index: 70;
    display: flex;
    flex-direction: column;
  }
  #bgmModal[hidden] { display: none; }
  #bgmModalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(10px + var(--safe-top)) max(12px, var(--safe-right)) 10px max(12px, var(--safe-left));
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  #bgmModalTitle {
    margin: 0;
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--neon-cyan);
  }
  #bgmModalBody {
    padding: 16px max(12px, var(--safe-right)) calc(20px + var(--safe-bottom)) max(12px, var(--safe-left));
    overflow-y: auto;
  }
  .bgm-modal-now { margin: 0 0 16px; font-size: 12px; color: #9aa4c8; }
  .bgm-hint { margin-top: 6px; font-size: 11px; color: #6b7398; }

  .bgm-form { margin: 14px 0 0; }
  .bgm-label { display: block; font-size: 12px; color: #9aa4c8; margin-bottom: 6px; }
  .bgm-form-row { display: flex; gap: 8px; align-items: stretch; }
  /* 이 줄에서는 옆의 입력창 높이에 맞춘다 -- .bgm-btn의 고정 30px(바에서 톱니와 줄을 맞추기
   * 위한 값)를 그대로 두면 입력창(35px)보다 낮아 가운데가 어긋난다. */
  .bgm-form-row .bgm-btn { height: auto; }
  .bgm-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #0f1322;
    color: var(--text-on-dark);
  }
  .bgm-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .bgm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .bgm-message { margin: 10px 0 0; font-size: 12px; }
  .bgm-message.is-error { color: #ff9d9d; }
  .bgm-message.is-ok { color: #8fe3b6; }
  .bgm-privacy { margin: 12px 0 0; font-size: 11px; color: #6b7398; }


/* Shared Play music palette and type, isolated from each game's theme. */
#bgmBar,#bgmSection,#bgmModal{--accent:#3f8cff;--accent-dark:#1c5fd6;--neon-cyan:#5ef1ff;--focus:#ffd93d;font-family:-apple-system,"Segoe UI","Malgun Gothic",sans-serif;}
#bgmModalTitle{font-family:"Bungee","Malgun Gothic",sans-serif;}
#dexMusic,#matchMusic,#watchMusic{max-width:600px;margin:0 auto;color:var(--text-on-dark);}
#dexMusic #bgmModal,#matchMusic #bgmModal,#watchMusic #bgmModal{z-index:200;}