/* ==========================================================
   vivi's player · 随身听模块样式
   所有样式都限定在 .wm 下，类名统一 wm- 前缀，不会影响网站其他部分。
   层级可通过 --wm-z 调整（默认 9999）。
   ========================================================== */
@import url("../assets/fonts/gf/fonts.css");

.wm{position:fixed;inset:0;z-index:var(--wm-z,9999);background:#000;color:#eee;font-family:var(--sans);
  overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;-webkit-font-smoothing:antialiased}
.wm.is-mounted{opacity:1;visibility:visible;transition:opacity .35s}
html.wm-lock,html.wm-lock body{overflow:hidden}
.wm{
  --bg:#000; --paper:#f4f1ea; --ink:#1d1b18; --muted:#8a857c; --line:#d9d3c7;
  --hl1:#6b9bea; --hl2:#2f63c4;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Noto Sans SC",system-ui,sans-serif;
  --serif:"Noto Serif SC",serif;
}
.wm,.wm *{box-sizing:border-box}
.wm :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.wm) button:focus{outline:none}:where(.wm) button:focus-visible{outline:2px solid var(--hl1);outline-offset:2px}
@media (min-width:901px){.wm-panel{max-height:calc(100vh - 60px);overflow-y:auto;scrollbar-width:none}.wm-panel::-webkit-scrollbar{display:none}}

/* ---------- 舞台 ---------- */
.wm-stage{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:56px;padding:40px 16px;position:relative}
.wm-close{position:fixed;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid #333;color:#aaa;font-size:20px;opacity:0;pointer-events:none;transition:.3s;z-index:5}
.wm-close:hover{color:#fff;border-color:#777}
.wm.is-open .wm-close{opacity:1;pointer-events:auto}

/* ---------- 随身听本体 ---------- */
.wm-player-wrap{transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:scale(.62) rotate(-8deg);flex:none}
.wm.is-open .wm-player-wrap{transform:none;cursor:default}
.wm-player{width:300px;height:500px;border-radius:36px;position:relative;
  background:linear-gradient(160deg,#f7f7f5 0%,#d6d7d6 38%,#eeeeec 62%,#c3c4c3 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 -8px 18px rgba(0,0,0,.18),inset 0 8px 14px rgba(255,255,255,.6),0 50px 90px rgba(0,0,0,.75),0 0 0 1px #9a9b9a;}
.wm-player::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 1px,rgba(0,0,0,.05) 1px 2px)}
.wm-screen{position:absolute;top:24px;left:22px;width:256px;height:196px;border-radius:9px;background:#0b0b0b;padding:6px;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.9)}
.wm-lcd{width:100%;height:100%;border-radius:4px;overflow:hidden;background:#fbfaf6;color:#111;position:relative;font-size:12px}
.wm-lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%)}
.wm-bar{height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;font-size:10.5px;font-weight:700;
  background:linear-gradient(#fdfdfd,#d9dadb);border-bottom:1px solid #a9aaab}
.wm-bar .wm-bat{width:20px;height:9px;border:1px solid #444;border-radius:2px;position:relative;padding:1px}
.wm-bar .wm-bat i{display:block;height:100%;width:78%;background:linear-gradient(#9be27b,#3fae2a)}
.wm-bar .wm-bat::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:3px;background:#444}
.wm-view{position:absolute;top:20px;left:0;right:0;bottom:0;display:flex}
.wm-list{width:58%;overflow:hidden;position:relative}
.wm-rows{transition:transform .15s}
.wm-row{height:22px;line-height:22px;padding:0 16px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;position:relative;cursor:pointer}
.wm-row.wm-on{background:linear-gradient(var(--hl1),var(--hl2));color:#fff}
.wm-row.wm-go::after{content:"›";position:absolute;right:6px;font-weight:700}
.wm-preview{width:42%;border-left:1px solid #ddd;position:relative;overflow:hidden;background:#eee}
.wm-preview img,.wm-preview .wm-sw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wm-sw{display:flex;align-items:flex-end;padding:7px;font-family:var(--serif);font-weight:900;font-size:17px;line-height:1.1;color:#fff}
/* Now playing */
.wm-now{padding:9px 10px;width:100%;display:grid;grid-template-columns:78px 1fr;gap:10px;align-content:start}
.wm-now .wm-art{width:78px;height:78px;border-radius:3px;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.3);position:relative}
.wm-now .wm-art img,.wm-now .wm-art .wm-sw{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;font-size:13px}
.wm-now .wm-meta{min-width:0;padding-top:2px}
.wm-now .wm-k{font-size:9.5px;color:#666;font-family:var(--mono);letter-spacing:.06em}
.wm-now .wm-t{font-weight:700;font-size:13px;margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-now .wm-a{font-size:11px;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-now .wm-pos{grid-column:1/-1;margin-top:6px}
.wm-prog{height:8px;border-radius:4px;background:linear-gradient(#ddd,#f5f5f5);border:1px solid #aaa;overflow:hidden}
.wm-prog i{display:block;height:100%;width:0;background:linear-gradient(var(--hl1),var(--hl2))}
.wm-strip{height:12px;background:#111;border-radius:1px;position:relative;overflow:hidden}
.wm-strip::before,.wm-strip::after{content:"";position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 7px);opacity:.8}
.wm-strip::before{top:1px}.wm-strip::after{bottom:1px}
.wm-strip i{position:absolute;top:4px;bottom:4px;left:0;width:0;background:#e9c46a}
.wm-times{display:flex;justify-content:space-between;font-size:9.5px;font-family:var(--mono);color:#555;margin-top:3px}
.wm-paused .wm-k::after{content:" ❚❚"}

/* 转盘 */
.wm-wheel{position:absolute;left:50%;top:262px;width:196px;height:196px;margin-left:-98px;border-radius:50%;touch-action:none;user-select:none;
  background:radial-gradient(circle at 50% 35%,#ffffff,#ebebe9 55%,#d5d5d3);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 6px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.25)}
.wm-wheel .wm-lbl{position:absolute;font-family:var(--mono);font-size:11px;font-weight:600;color:#9a9b9c;letter-spacing:.1em;pointer-events:none}
.wm-wheel .wm-menu{top:15px;left:50%;transform:translateX(-50%)}
.wm-wheel .wm-prev{left:16px;top:50%;transform:translateY(-50%)}
.wm-wheel .wm-next{right:16px;top:50%;transform:translateY(-50%)}
.wm-wheel .wm-pp{bottom:14px;left:50%;transform:translateX(-50%)}
.wm-center{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;
  background:linear-gradient(#e2e2e0,#f8f8f6);box-shadow:inset 0 1px 2px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.07)}
.wm-center:active{background:linear-gradient(#d4d4d2,#ececea)}
.wm-engrave{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:#a5a6a6;text-shadow:0 1px 0 #fff}

/* ---------- 右侧卡片 ---------- */
.wm-panel{width:min(600px,100%);opacity:0;transform:translateX(30px);pointer-events:none;transition:.6s .15s;display:none}
.wm.is-open .wm-panel{display:block}
.wm.is-shown .wm-panel{opacity:1;transform:none;pointer-events:auto}
.wm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;position:sticky;top:0;z-index:3;padding:2px 0 8px;background:linear-gradient(#000 75%,rgba(0,0,0,0))}
.wm-tab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#999;border:1px solid #333;border-radius:20px;padding:6px 13px;transition:.2s}
.wm-tab:hover{color:#fff;border-color:#888}
.wm-tab.wm-on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.wm-tab.wm-home{margin-right:auto}
.wm-crumb{font-family:var(--mono);font-size:10.5px;color:#777;letter-spacing:.1em;margin:-4px 0 12px}
.wm-crumb button{color:#bbb;text-decoration:underline;text-underline-offset:3px}
.wm-crumb button:hover{color:#fff}
.wm-bar .wm-bk{cursor:pointer;display:flex;align-items:center;gap:3px;max-width:90px;overflow:hidden;white-space:nowrap}
.wm-bar .wm-bk:hover{color:var(--hl2)}
.wm-wheel .wm-menu{pointer-events:none}
.wm-card{background:var(--paper);color:var(--ink);border-radius:4px;padding:22px 26px 18px;box-shadow:0 30px 80px rgba(0,0,0,.6);position:relative;animation:wm-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes wm-in{from{opacity:0;transform:translateY(14px) rotate(.6deg)}to{opacity:1;transform:none}}
.wm-sec{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--muted);border-bottom:1.5px solid var(--ink);padding-bottom:5px;margin:14px 0 4px;display:flex;gap:8px;align-items:baseline}
.wm-sec span{font-family:var(--sans);letter-spacing:.05em}
.wm-f{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);align-items:baseline}
.wm-f b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;font-weight:600;color:#555}
.wm-f b small{display:block;font-family:var(--sans);letter-spacing:0;font-weight:400;color:var(--muted);font-size:10.5px}
.wm-f p{margin:0;font-size:14px;line-height:1.7}
.wm-hand{font-weight:600;color:#24211c}
.wm-todo{color:#b4ab9b!important;font-style:italic;font-size:13px!important}
.wm-ai{display:inline-block;font-family:var(--mono);font-size:9.5px;border:1px solid #c9bfae;color:#8a7f6c;border-radius:10px;padding:0 7px;margin-left:6px;vertical-align:2px;letter-spacing:.08em}
/* music head */
.wm-mhead{display:flex;align-items:center;height:200px;margin-bottom:6px}
.wm-sleeve{width:190px;height:190px;position:relative;z-index:2;box-shadow:0 10px 24px rgba(0,0,0,.35);flex:none;background:#ddd}
.wm-sleeve img{width:100%;height:100%;object-fit:cover;display:block}
.wm-disc{width:176px;height:176px;border-radius:50%;margin-left:-160px;z-index:1;flex:none;position:relative;transition:margin .8s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(circle,#f4f1ea 0 7px,#111 8px 22px,var(--label,#c33) 23px 38px,#111 39px),repeating-radial-gradient(circle,#161616 0 2px,#222 2px 3px);
  box-shadow:0 8px 18px rgba(0,0,0,.35)}
.wm-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 40deg,rgba(255,255,255,.12) 60deg,transparent 80deg 220deg,rgba(255,255,255,.1) 240deg,transparent 260deg)}
.wm-card.wm-playing .wm-disc{margin-left:-46px;animation:wm-spin 3.2s linear infinite}
@keyframes wm-spin{to{transform:rotate(360deg)}}
.wm-mtitle{margin-left:20px;min-width:0}
.wm-mtitle .wm-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}
.wm-mtitle h2{font-family:var(--serif);font-weight:900;font-size:24px;margin:6px 0 4px;line-height:1.2}
.wm-mtitle .wm-who{font-size:13px;color:#555}
/* film ticket */
.wm-ticket{display:flex;border-radius:6px;overflow:hidden;margin:-4px -6px 4px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.wm-poster{flex:1;min-height:200px;position:relative;padding:18px;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.wm-poster .wm-bigt{font-family:var(--serif);font-weight:900;font-size:34px;line-height:1.08;position:relative;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.wm-poster .wm-en{font-family:var(--mono);font-size:11px;letter-spacing:.22em;opacity:.85;margin-top:8px;position:relative;z-index:2;text-transform:uppercase}
.wm-poster .wm-deco{position:absolute;inset:0;z-index:1}
.wm-poster.wm-hasimg{min-height:0}
.wm-poster{height:236px;min-height:0!important}
.wm-poster .wm-pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;z-index:0}
.wm-poster.wm-hasimg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 45%,rgba(0,0,0,.78))}
.wm-stub{width:188px;background:#faf7f0;color:var(--ink);position:relative;padding:16px 12px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.wm-stub::before{content:"";position:absolute;left:-6px;top:0;bottom:0;width:12px;background:radial-gradient(circle at 6px 8px,var(--paper) 4.5px,transparent 5px) 0 0/12px 16px repeat-y}
.wm-stub .wm-big{font-family:var(--serif);font-size:26px;font-weight:900;letter-spacing:0;line-height:1}
.wm-stub .wm-kv{margin-top:8px}.wm-stub .wm-kv i{font-style:normal;display:block;color:#9a917f;font-size:9px;letter-spacing:.14em}
.wm-stub .wm-kv b{display:block;font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:0;line-height:1.35;margin-top:2px;color:var(--ink)}
.wm-cprog{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;color:#777;margin:2px 0 4px}
.wm-cprog .wm-bar2{flex:1;height:6px;border-radius:3px;background:#e2ddd2;overflow:hidden;cursor:pointer}
.wm-cprog .wm-bar2 i{display:block;height:100%;width:0;background:var(--ink);transition:width .1s linear}
.wm-welcome p{font-size:14px;line-height:1.85;margin:0 0 10px;color:#3a362f}
.wm-keys{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:2}
.wm-foot{margin-top:14px;font-family:var(--mono);font-size:10px;color:#b4ab9b;letter-spacing:.15em;display:flex;justify-content:space-between}

@media (max-width:900px){
  .wm-stage{flex-direction:column;gap:28px;justify-content:flex-start;padding-top:70px}
  .wm:not(.is-open) .wm-stage{justify-content:center}
  .wm-card{padding:22px 18px}
  .wm-f{grid-template-columns:78px 1fr}
  .wm-poster .wm-bigt{font-size:28px}
  .wm-sleeve{width:150px;height:150px}.wm-disc{width:140px;height:140px;margin-left:-126px}
  .wm-card.wm-playing .wm-disc{margin-left:-60px}
  .wm-mhead{height:160px}
}
.wm-welcome h2{font-family:var(--serif);font-weight:900;font-size:28px;margin:4px 0 10px}
@media (max-width:600px){
  .wm-ticket{flex-direction:column}
  .wm-poster{height:200px;flex:none}
  .wm-stub{width:auto;flex-direction:row;align-items:flex-end;gap:12px}
  .wm-stub::before{display:none}
}