/* Mobile chrome density pass. Loaded last so the compact layout is stable. */
@media (max-width: 720px) {
  html { scroll-padding-top: 138px; }
  .prototype-notice { padding-block: 4px; font-size: 8.5px; line-height: 1.35; letter-spacing: .055em; }
  .header-inner { min-height: 50px; }
  .brand { gap: 8px; }
  .brand-mark { width: 25px; height: 25px; }
  .brand strong { font-size: 13px; }
  .brand small { display: none; }
  .language-label { font-size: 9px; }
  .site-bgm-bar { padding-block: 3px; }
  .site-bgm-inner { width: calc(100% - 28px); min-height: 0; padding: 0; flex-wrap: nowrap; }
  .site-bgm-capsule { position: relative; width: 100%; height: 38px; padding: 3px 6px; border-radius: 9px; box-shadow: none; }
  .site-bgm-main { width: 100%; height: 29px; gap: 0; align-items: flex-start; }
  .site-bgm-label { position: static; width: 0; height: auto; padding: 0; overflow: hidden; opacity: 0; }
  .site-bgm-transport { gap: 0; }
  .site-bgm-transport button,
  .site-bgm-modes button { min-width: 23px; height: 23px; padding: 0 3px; }
  .site-bgm-transport .sound-toggle { width: 27px; min-width: 27px; height: 27px; }
  .site-bgm-picker { flex: 1 1 auto; width: auto; min-width: 56px; margin-inline: 1px 2px; }
  .site-bgm-picker select { height: 25px; padding-inline: 6px 15px; font-size: 8.5px; }
  .site-bgm-modes { display: inline-flex; gap: 0; padding-left: 2px; }
  .site-bgm-modes button { width: 22px; min-width: 22px; }
  .site-bgm-volume { display: inline-flex; width: 38px; margin-left: 1px; }
  .site-bgm-meta { position: absolute; right: 7px; bottom: 1px; left: 80px; display: block; height: 8px; overflow: hidden; pointer-events: none; }
  .site-bgm-note { display: block; max-width: none; overflow: hidden; color: rgb(241 236 225 / 34%); font-size: 6.5px; line-height: 1.1; letter-spacing: .01em; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .section-nav { top: var(--sticky-header-height, 88px); min-height: 36px; padding: 5px 14px 4px; gap: 16px; }
  .section-nav a { padding: 4px 0 3px; font-size: 10px; letter-spacing: .025em; }
}

@media (max-width: 350px) {
  .site-bgm-inner { width: calc(100% - 20px); }
  .site-bgm-meta { left: 66px; }
  .site-bgm-note { display: block; font-size: 5.8px; }
  .section-nav { gap: 14px; }
}