:root{
  --bg-grad: hsla(210,18%,50%,.12);
  --shadowA: .15;

  --scale:.5;
  --ink: rgba(60,60,60,.80);
  --muted: rgba(60,60,60,.65);
  --track: rgba(60,60,60,.25);
  --left-w: 260px; /* 新增：左側控制區固定寬度（會再被 scale 縮放） */
}
*{box-sizing:border-box}
body{margin:0;background:transparent;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;}
.wrap{
  transform: none !important;
  display: block;
  width: 100%;
  margin: 28px 0 0;
}

/* 卡片與背景（依你要求的 padding） */
.card{
  display:inline-block; padding: 8px 10px 8px 10px; border-radius:22px; color:var(--ink);
  position:relative; overflow:hidden; isolation:isolate; background:transparent; box-shadow:0 10px 32px rgba(0,0,0,var(--shadowA));
 width:fit-content; max-width:100%;}
.card::before,.card::after{
  content:""; position:absolute; inset:-40% -40% -40% -40%; z-index:-1;
  filter:blur(90px) opacity(.8) saturate(140%);
  background:
    radial-gradient(50% 40% at 20% 30%, var(--bg-grad) 0%, transparent 70%),
    radial-gradient(40% 50% at 78% 20%, var(--bg-grad) 0%, transparent 70%),
    radial-gradient(45% 35% at 30% 80%, var(--bg-grad) 0%, transparent 70%),
    radial-gradient(40% 45% at 75% 75%, var(--bg-grad) 0%, transparent 70%);
  animation:swirl1 18s linear infinite;
  pointer-events:none; /* 防遮點擊 */
}
.card::after{ animation:swirl2 24s linear infinite reverse; filter:blur(100px) opacity(.6) saturate(140%); pointer-events:none; }
@keyframes swirl1{to{transform:rotate(360deg) translateX(2%)}}
@keyframes swirl2{to{transform:rotate(-360deg) translateY(2%)}}

/* 兩欄 */
.layout{
  display:grid;
  grid-template-columns: var(--left-w) auto; /* 原本 auto auto → 固定左欄 */
  gap:14px; align-items:center;
}

/* 上排 */
.row{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.btn{
  width:53px;height:53px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:transparent;border:2px solid var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.btn:hover{ background: rgba(0,0,0,.04) }
.btn svg{ width:24px;height:24px;fill:var(--ink) }
.icon-pause{ display:none; }
.title{ font-weight:700; font-size:2.4em; margin-right:30px; }
.time{ font-variant-numeric: tabular-nums; font-size:1.2em; }

/* 播放條 */
.bar{ margin:8px 0 0 }
.seek{
  -webkit-appearance:none; appearance:none; width:100%;
  background:linear-gradient(90deg, var(--ink) var(--p,0%), var(--track) var(--p,0%));
  height:6px; border-radius:999px; outline:none;
}
.seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:conic-gradient(#ff6a88,#f9d423,#1fe4f5,#74f2ce,#ff6a88);
  border:2px solid rgba(255,255,255,.85); box-shadow:0 3px 10px rgba(0,0,0,.20);
  margin-top:-5px; cursor:pointer;
}
.seek::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg,#ff6a88,#f9d423,#1fe4f5,#74f2ce);
  border:2px solid rgba(255,255,255,.85); box-shadow:0 3px 10px rgba(0,0,0,.20);
}

/* 迷你工具列（放大 50%，無播放鈕；前後曲靠近） */
.tools{ display:flex; align-items:center; gap:10px; margin-top:6px; height:28px; position:relative; z-index:10; }
.tbtn{
  width:30px; height:30px; border:none; background:transparent; padding:0; cursor:pointer; opacity:.9;
  display:grid; place-items:center; position:relative; z-index:11; /* 防覆蓋 */
}
.tbtn svg{ width:24px; height:24px; fill:var(--ink); }
.tbtn:hover{ opacity:1; }

/* 音量條（略小） */
.vol{ -webkit-appearance:none; appearance:none; width:72px; height:4px; border-radius:99px; outline:none;
  background:linear-gradient(90deg, var(--ink) var(--vp, 50%), rgba(60,60,60,.25) var(--vp, 50%)); }
.vol::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--ink) inset; margin-top:-4px; }
.vol::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--ink) inset; }

/* 簡化的循環按鈕（文字 NA / All / 1） */
.loopBtn{
  width:30px;height:30px; display:grid; place-items:center;
  font-size:13px; font-weight:bold; color:var(--ink);
  border:none;background:transparent; cursor:pointer;
}

/* 播放清單（展開推高卡片；最多 5 首可捲動） */
.plWrap{ margin-top:6px; overflow:hidden; height:0; transition:height .25s ease; position:relative; z-index:1; }
.plWrap.open{ height:auto; }
.playlist{
  background:rgba(255,255,255,.9); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,var(--shadowA));
  border:1px solid rgba(0,0,0,.06); backdrop-filter: blur(6px);
  width:260px; max-height:200px; overflow:auto; padding:6px;
}
.playlist button{
  width:100%; text-align:left; background:transparent; border:none; padding:6px 8px; border-radius:8px; cursor:pointer; color:#333;
}
.playlist button:hover{ background:rgba(0,0,0,.06); }

/* 右側歌詞 */
.lyrics{
  display:inline-block; max-width:320px; min-width:110px; margin-right:8px;
  border-radius:14px; background:rgba(255,255,255,.38); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35); overflow:hidden;
}
.lyr-viewport{ position:relative; height:120px; overflow:hidden; }
.lyr-body{ position:relative; will-change:transform; transform:translateY(0);
  padding:8px 10px; font-size:17px; line-height:1.55; white-space:pre-wrap; word-break:break-word; color:var(--ink); }

.msg{ grid-column:1 / -1; text-align:center; font-size:12px; color:var(--muted); margin-top:4px; min-height:0 }
.msg:empty{ display:none; }

/* UrMusic: 將現有 .wrap 視為播放器外框 */
.wrap.urmusic-wrap{background:transparent !important;}

/* === UrMusic patch: 水平置中 + 尺寸倍數 === */
.wrap.urmusic-wrap{
  display:flex;
  justify-content:center;
}
.wrap.urmusic-wrap .card{ margin:0 auto; will-change: transform; }


/* === UrMusic center + scale patch (v1.7.2) === */
.wrap.urmusic-wrap{
  display:flex;
  justify-content:center;
}
.wrap.urmusic-wrap .urmusic-player{
  margin:0 auto;
}


/* === Marquee title (prevents button squashing, slow scroll while playing) === */
.row .btn{ flex:0 0 auto; } /* don't let play button shrink */
.title-viewport{ position:relative; overflow:hidden; max-width:100%; flex:1 1 auto; min-width:0; }
.title-scroller{ display:inline-block; white-space:nowrap; will-change:transform; }
.title-scroller span{ display:inline-block; padding-right:48px; }


/* === 對齊控制（left / center / right） === */
.wrap.urmusic-wrap.align-left{ justify-content:flex-start; }
.wrap.urmusic-wrap.align-center{ justify-content:center; }
.wrap.urmusic-wrap.align-right{ justify-content:flex-end; }

/* 水平位移微調：可傳 offset="20px" 或 "-10%" 作用在播放器本體 */
.wrap.urmusic-wrap .card{ margin-left: var(--urm-offset, 0px); }

/* 背景完全透明時，移除裝飾層與陰影 */
.card.bg-none{ background:transparent !important; box-shadow:none !important; }
.card.bg-none::before, .card.bg-none::after{ display:none !important; }

.urmusic-player-bg {
    transform-origin: center center;
    padding: 5px; /* 背景比內容稍微大一點 */
    display: inline-block;
}



/* === UrMusic: 背景與內容一致縮放（加入 zoom 作為 layout 縮放，transform 作為視覺備援） === */
.wrap.urmusic-wrap{ width:fit-content; }
.wrap.urmusic-wrap .card{
  /* 讓版面大小也跟著縮放（Chrome/Edge/Opera 有效） */
  zoom: calc(var(--urm-scale, 1) * 0.6666667);
}
@supports not (zoom: 1) {
  /* 瀏覽器不支援 zoom 時，維持原 transform 縮放做視覺備援 */
  .wrap.urmusic-wrap .card{
    transform: scale(calc(var(--urm-scale, 1) * 0.6666667));
    transform-origin: top center;
  }
}
/* 稍微放大背景留白（相對於內容），會與縮放等比 */
.wrap.urmusic-wrap .card{ padding: calc(12px * 0.6666667) calc(14px * 0.6666667); }



/* === 背景隨內容縮放：以 zoom 控制版面，避免 transform 只縮視覺 === */

@supports not (zoom: 1) {
  /* 瀏覽器不支援 zoom 時才用 transform 視覺縮放（版面尺寸不變） */
  .wrap.urmusic-wrap .card{
    transform: scale(calc(var(--urm-scale, 1) * 0.6666667));
    transform-origin: top center;
  }
}



/* === 全域縮放：套在 .wrap（連同背景與內容一起縮放） === */
@supports (zoom: 1) {
  .wrap.urmusic-wrap{
    zoom: calc(var(--urm-scale, 1) * 0.6666667);
  }
  .wrap.urmusic-wrap .card{ transform: none !important; } /* 避免雙重縮放 */
}
@supports not (zoom: 1) {
  /* 沒有 zoom 的瀏覽器用 transform；為避免影響置中，將縮放套在 wrapper */
  .wrap.urmusic-wrap{
    transform: scale(calc(var(--urm-scale, 1) * 0.6666667));
    transform-origin: top center;
  }
  .wrap.urmusic-wrap .card{ transform: none !important; }
}