.DJ {
        position: absolute;
        top: 0%;
      }
      .phonetic {
        font-size: 120%;
      }
      table {
        color: rgb(1, 255, 245);
      }
      /*图*/
      body {
        background-image: url("/images/Nikolai\ Lockertsen.jpg");
        background-repeat: no-repeat;
        background-size: auto 110%;
        background-attachment: fixed;
      }
      p {
        font-size: 11px;
        color: #fff;
      }
      .text {
        background: rgba(0, 0, 0, 0.2); /* 半透明背景 */
        color: #fff;
        padding: 15px 20px; /* PC 上内边距更大 */
        border-radius: 8px;
        max-width: 900px; /* PC 屏幕宽度限制 */
        margin: 20px auto;
        font-size: 16px; /* PC 上字体稍大 */
        line-height: 1.6;
        box-sizing: border-box;
      }

      .text p {
        margin: 0;
        padding: 0;
      }

      .text a {
        color: #01fff5;
        text-decoration: underline;
        word-break: break-word;
        font-size: 16px;
      }

      .phonetic {
        font-size: 120%;
        cursor: pointer;
        user-select: none;
        transition: background-color 0.2s;
        touch-action: manipulation; /* 优化移动端点击延迟 */
      }
      .phonetic:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
      .phonetic.playing {
        background-color: rgba(0, 200, 255, 0.4);
        box-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
      }

      /* 控制区 */
      #controls {
        text-align: center;
        padding: 8px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        max-width: 95%;
        margin: 15px auto;
        box-sizing: border-box;
      }

      /* 按钮容器 */
      #buttonContainer {
        display: flex;
        justify-content: center;
        gap: 6px; /* 按钮间距 */
        flex-wrap: nowrap; /* 保持一行 */
        margin-bottom: 6px;
      }

      #controls button {
        padding: 5px 10px;
        margin: 1px;
        font-size: 13px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        min-width: 60px;
        flex: 0 1 auto; /* 不自动拉伸，保持紧凑 */
      }

      #toggleLoop {
        background: #6c63ff;
        color: white;
        font-weight: 600;
      }
      #stopBtn {
        background: #ff6b6b;
        color: white;
        display: none;
        font-weight: 600;
      }
      #playAllBtn,
      #playRandomBtn {
        background: #4ecdc4;
        color: white;
        font-weight: 500;
      }

      #volumeContainer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        justify-content: center;
        margin-top: 6px;
      }

      #volumeContainer label {
        font-size: 14px;
        color: white;
      }

      #volumeContainer input[type="number"] {
        width: 40px;
        font-size: 12px;
        padding: 2px;
        border-radius: 4px;
        border: none;
        text-align: center;
      }

      #volumeContainer input[type="range"] {
        width: 80px;
      }

      #volumeValue,
      #progressDisplay {
        color: white;
        font-weight: bold;
        min-width: 35px;
        text-align: center;
        font-size: 12px;
      }