/* ============================================================================
 * 红色留声机 · 红歌播放器样式
 * 与老日报共用 --paper / --red / --ink 变量；所有选择器带 hg- 前缀，
 * 且一律不用裸 h1/li/ol/button，避免污染原页面版式。
 * ========================================================================== */
#hg-root{
  position:fixed;right:20px;bottom:20px;z-index:9999;
  font-family:"SimSun","宋体","Songti SC","STSong",serif;
  color:var(--ink,#26231B);text-align:left;line-height:1.5;
}
#hg-root *{box-sizing:border-box}
#hg-root [hidden]{display:none !important}

/* —— 折叠态：朱红印章 + 黑胶唱片 —— */
.hg-toggle{
  width:62px;height:62px;border-radius:50%;cursor:pointer;position:relative;
  border:3px double var(--red,#9C2A20);
  background:var(--red,#9C2A20);
  box-shadow:inset 0 0 0 3px var(--paper,#EFE4C3),inset 0 0 0 5px rgba(156,42,32,.72),
             0 3px 0 rgba(90,68,32,.25),0 8px 20px rgba(52,38,16,.35);
  display:grid;place-items:center;padding:0;
  transition:transform .25s ease,box-shadow .25s ease;
}
.hg-toggle:hover{transform:translateY(-3px) rotate(-6deg)}
.hg-toggle .hg-glyph{
  font-family:"KaiTi","楷体","STKaiti",serif;font-size:25px;line-height:1;
  color:#F7EACB;text-shadow:1px 1px 0 rgba(60,20,12,.5);letter-spacing:0;
}
.hg-toggle .hg-ring{
  position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(156,42,32,.75);
  animation:hg-spin 14s linear infinite;animation-play-state:paused;
}
#hg-root.is-playing .hg-toggle .hg-ring{animation-play-state:running}
.hg-toggle .hg-dot{
  position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;
  background:#F5ECD1;border:2px solid var(--red,#9C2A20);
}
#hg-root.is-playing .hg-toggle .hg-dot{background:var(--red,#9C2A20)}

.hg-tip{
  position:absolute;right:74px;bottom:14px;white-space:nowrap;
  background:#F5ECD1;border:1px solid var(--rule,#8B7B58);
  box-shadow:2px 2px 0 rgba(90,68,32,.22);
  padding:6px 10px;font-size:11px;letter-spacing:.1em;color:var(--red,#9C2A20);
  cursor:pointer;
}
.hg-tip:after{content:"";position:absolute;right:-6px;top:50%;margin-top:-4px;
  width:8px;height:8px;background:#F5ECD1;border-right:1px solid var(--rule,#8B7B58);
  border-top:1px solid var(--rule,#8B7B58);transform:rotate(45deg)}

/* —— 展开态：一张泛黄小报 —— */
.hg-panel{
  position:absolute;right:0;bottom:76px;width:330px;
  max-height:min(600px,calc(100vh - 110px));display:flex;flex-direction:column;
  background:var(--paper,#EFE4C3);
  border:3px double var(--ink,#26231B);
  box-shadow:inset 0 0 40px rgba(132,102,52,.20),0 10px 32px rgba(52,38,16,.42);
  background-image:radial-gradient(rgba(120,100,60,.06) .6px,transparent .6px);
  background-size:5px 5px;
}
.hg-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:3px double var(--ink,#26231B);padding:8px 11px;
  background:rgba(255,250,230,.45);flex:none;
}
.hg-head .hg-name{font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--red,#9C2A20)}
.hg-head .hg-name:before{content:"◆ ";font-size:9px}
.hg-head .hg-sub{font-size:9px;letter-spacing:.14em;color:var(--ink-3,#6E634C);margin-left:7px;font-weight:400}
.hg-min{
  border:1px solid var(--rule,#8B7B58);background:transparent;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--ink-2,#494236);
  width:22px;height:22px;line-height:1;padding:0;flex:none;
}
.hg-min:hover{background:var(--red,#9C2A20);border-color:var(--red,#9C2A20);color:#F7EACB}

.hg-now{display:flex;gap:12px;align-items:center;padding:13px 12px 9px;flex:none}
.hg-disc{
  width:58px;height:58px;border-radius:50%;flex:none;position:relative;
  border:2px solid var(--ink,#26231B);
  background:repeating-radial-gradient(circle at 50% 50%,#26231B 0 2px,#3B362B 2px 3px);
  animation:hg-spin 5s linear infinite;animation-play-state:paused;
}
#hg-root.is-playing .hg-disc{animation-play-state:running}
.hg-disc:after{
  content:"";position:absolute;inset:34%;border-radius:50%;
  background:var(--red,#9C2A20);border:1px solid #F5ECD1;
  box-shadow:0 0 0 3px rgba(156,42,32,.35);
}
.hg-disc i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:#F5ECD1;transform:translate(-50%,-50%);z-index:2}
.hg-meta{min-width:0;flex:1}
.hg-no{font-size:10px;letter-spacing:.2em;color:var(--ink-3,#6E634C)}
.hg-title{
  font-family:"SimHei","黑体","Heiti SC",serif;font-size:16px;font-weight:700;
  line-height:1.4;margin:2px 0 3px;word-break:break-all;
}
.hg-artist{font-size:11px;color:var(--ink-2,#494236);letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-state{font-size:10px;color:var(--red,#9C2A20);letter-spacing:.12em;margin-top:3px}

.hg-progress{padding:2px 12px 8px;flex:none}
.hg-times{display:flex;justify-content:space-between;font-size:10px;
  color:var(--ink-3,#6E634C);font-variant-numeric:tabular-nums;margin-bottom:3px}
.hg-range{
  -webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;
  cursor:pointer;display:block;margin:0;
}
.hg-range::-webkit-slider-runnable-track{height:3px;background:var(--rule-l,#C7B68D);
  border:1px solid rgba(139,123,88,.5)}
.hg-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin-top:-5px;border-radius:0;
  background:var(--red,#9C2A20);border:1px solid #F5ECD1;transform:rotate(45deg)}
.hg-range::-moz-range-track{height:3px;background:var(--rule-l,#C7B68D)}
.hg-range::-moz-range-thumb{width:10px;height:10px;border-radius:0;
  background:var(--red,#9C2A20);border:1px solid #F5ECD1}

.hg-ctrls{display:flex;gap:5px;padding:0 12px 10px;flex-wrap:wrap;flex:none}
.hg-btn{
  border:1px solid var(--rule,#8B7B58);background:rgba(255,250,230,.55);
  color:var(--ink-2,#494236);font-family:inherit;font-size:11px;
  letter-spacing:.06em;padding:5px 8px;cursor:pointer;line-height:1.3;
  white-space:nowrap;transition:.15s;
}
.hg-btn:hover{border-color:var(--red,#9C2A20);color:var(--red,#9C2A20)}
.hg-btn.on{background:var(--red,#9C2A20);border-color:var(--red,#9C2A20);color:#F7EACB}
.hg-btn.main{font-weight:700;border-color:var(--red,#9C2A20);color:var(--red,#9C2A20)}

.hg-vol{display:flex;align-items:center;gap:8px;padding:0 12px 10px;flex:none;
  font-size:10px;color:var(--ink-3,#6E634C);letter-spacing:.12em}
.hg-vol .hg-range{flex:1;width:auto}

.hg-listhead{
  border-top:3px double var(--ink,#26231B);border-bottom:1px solid var(--rule-l,#C7B68D);
  padding:6px 12px;font-size:10px;letter-spacing:.24em;color:var(--ink-2,#494236);
  display:flex;justify-content:space-between;flex:none;background:rgba(255,250,230,.35)}
.hg-listhead b{color:var(--red,#9C2A20);font-weight:400}
.hg-list{overflow-y:auto;flex:1;min-height:80px;padding:4px 0 8px;scrollbar-width:thin}
.hg-item{
  display:flex;align-items:baseline;gap:8px;padding:6px 12px;cursor:pointer;
  border-bottom:1px dotted rgba(139,123,88,.42);font-size:12px;line-height:1.5;
}
.hg-item:hover{background:rgba(156,42,32,.10)}
.hg-item.on{background:var(--red,#9C2A20);color:#F7EACB}
.hg-item .hg-i{font-size:10px;color:var(--red,#9C2A20);flex:none;width:18px;
  font-variant-numeric:tabular-nums}
.hg-item.on .hg-i{color:#F0D9AE}
.hg-item .hg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-item .hg-a{font-size:10px;color:var(--ink-3,#6E634C);flex:none;max-width:96px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-item.on .hg-a{color:#EFD9B4}
.hg-foot{border-top:1px solid var(--rule-l,#C7B68D);padding:6px 12px;flex:none;
  font-size:9px;line-height:1.6;color:var(--ink-3,#6E634C);letter-spacing:.04em}

@keyframes hg-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media(max-width:760px){
  #hg-root{right:12px;bottom:12px}
  .hg-panel{width:calc(100vw - 24px);bottom:74px;max-height:calc(100vh - 100px)}
  .hg-tip{right:66px;font-size:10px}
  .hg-toggle{width:56px;height:56px}
  .hg-toggle .hg-glyph{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
  .hg-disc,.hg-toggle .hg-ring{animation:none !important}
}