/* 版本2.2.102 - 字体大小修复 */

/* 简谱容器整体优化 */
.numbered-notation {
  font-family: 'Arial', 'Microsoft YaHei', sans-serif;
  font-size: clamp(10px, 1.2vw, 13px);  /* 进一步缩小字体，最大13px */
  line-height: 1.2;
  max-width: 100%;
  transform: scale(0.75);                /* 整体缩小25% */
  transform-origin: top left;
  margin-bottom: 15px;
}

/* 简谱音符 */
.numbered-note {
  font-size: 1em;                       /* 相对父容器，约10-13px */
  font-weight: 500;
  margin: 0 3px;
  display: inline-block;
  min-width: 15px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

/* 简谱小节 */
.numbered-measure {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 4px;
  border-right: 1px solid #ddd;
  min-height: 25px;
  vertical-align: top;
  max-width: 120px;                     /* 限制小节宽度确保一行4个 */
}

/* 八度标记优化 */
.octave-high {
  position: relative;
}

.octave-high::before {
  content: "·";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: bold;
}

.octave-low {
  position: relative;
}

.octave-low::after {
  content: "·"; 
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: bold;
}

/* 五线谱容器优化 */
#staff-container {
  margin-top: 15px;
  transform: none;
  transform-origin: top left;
  overflow: visible;
}

/* 简谱输出容器强制布局优化 */
#numbered-output {
  font-size: 11px !important;          /* 强制小字体 */
  line-height: 1.1 !important;
  letter-spacing: -0.5px;               /* 紧凑字符间距 */
}

#numbered-output .numbered-measure {
  display: inline-block !important;
  margin-right: 6px !important;
  vertical-align: top !important;
  width: auto !important;
  max-width: 100px !important;
}

/* 强制每行显示4个小节 */
#numbered-output {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

/* 简谱行布局 */
.numbered-line {
  display: block;
  margin-bottom: 10px;
  white-space: nowrap;
}

/* 确保小节不换行 */
.measure-group {
  display: inline-block;
  margin-right: 15px;
}

#staff-container svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 对照高亮样式 */
.note-highlight {
  background-color: #fff3cd !important;
  border: 2px solid #ffc107 !important;
  border-radius: 3px;
  padding: 1px 2px;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
  z-index: 10;
}

/* 信息提示框 */
.note-info-tooltip {
  position: fixed;
  background: #2c3e50;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: pre-line;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  max-width: 200px;
}

/* 休止符标记 */
.rest-note {
  font-size: 1.2em;
  color: #666;
  font-weight: normal;
}

/* 节奏标记 */
.rhythm-mark {
  font-size: 0.8em;
  color: #333;
  margin-left: 2px;
}

/* 调号和拍号 */
.key-signature, .time-signature {
  font-size: 0.9em;
  font-weight: bold;
  margin-right: 8px;
  color: #444;
}

/* 小节线 */
.measure-line {
  border-right: 2px solid #333;
  margin-right: 8px;
  padding-right: 8px;
}

/* 反复记号 */
.repeat-start::after {
  content: ":|";
  font-weight: bold;
  margin-left: 4px;
  color: #333;
}

.repeat-end::before {
  content: "|:";
  font-weight: bold;
  margin-right: 4px;
  color: #333;
}

/* 移动端进一步优化 */
@media (max-width: 768px) {
  .numbered-notation {
    font-size: 10px;
    transform: scale(0.75);
  }
  
  #staff-container {
    transform: none;
  }
  
  .numbered-note {
    min-width: 12px;
    margin: 0 2px;
  }
  
  .numbered-measure {
    margin-right: 6px;
    padding: 2px 3px;
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .numbered-notation {
    font-size: 9px;
    transform: scale(0.65);
  }
  
  #staff-container {
    transform: none;
  }
  
  .numbered-measure {
    max-width: 80px;
  }
}

/* 五线谱音符对照 */
.staff-note {
  cursor: pointer;
  transition: all 0.2s ease;
}

.staff-note:hover {
  stroke: #ffc107;
  stroke-width: 2px;
}

/* 播放高亮效果 */
.playing-note {
  animation: playingPulse 1s ease-in-out;
  background-color: #28a745 !important;
  color: white;
  border-color: #28a745 !important;
}

@keyframes playingPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.8; 
  }
}