/* ==========================================================================
   PWP 手机端样式（player.html）
   ========================================================================== */

body.mb{ padding-bottom:env(safe-area-inset-bottom); }

/* -------------------------- 顶部栏 -------------------------- */
.mnav{
  position:sticky; top:0; z-index:60; height:54px;
  display:flex; align-items:center; padding:0 16px; gap:10px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:color-mix(in srgb, var(--c-bg) 84%, transparent);
  border-bottom:1px solid var(--c-border);
}
.mnav-brand{
  display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px;
}
.mnav-brand .mark{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--c-ink); color:var(--c-surface); font-size:11px; font-weight:800;
}
.mnav-brand em{ font-style:normal; color:var(--c-accent); }
.mnav-acts{ margin-left:auto; display:flex; gap:6px; }
.micon{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--c-border);
  background:var(--c-surface); display:grid; place-items:center; font-size:15px;
  cursor:pointer; color:var(--c-text-2);
}
.micon:active{ transform:scale(.94); }

/* -------------------------- 抽屉菜单 -------------------------- */
.mdrawer{ position:fixed; inset:0; z-index:120; pointer-events:none; }
.mdrawer.on{ pointer-events:auto; }
.md-ov{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .25s; backdrop-filter:blur(2px);
}
.mdrawer.on .md-ov{ opacity:1; }
.md-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(76vw,300px);
  background:var(--c-surface); border-left:1px solid var(--c-border);
  box-shadow:-10px 0 40px rgba(0,0,0,.16);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.3,1);
  display:flex; flex-direction:column; padding:0 0 20px;
}
.mdrawer.on .md-panel{ transform:none; }
.md-hd{
  display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--c-border);
  font-size:14.5px;
}
.md-hd .micon{ margin-left:auto; border:none; background:transparent; }
.md-panel a{
  padding:14px 20px; font-size:14.5px; font-weight:600; color:var(--c-text-2);
  border-bottom:1px solid color-mix(in srgb,var(--c-border) 55%, transparent);
}
.md-panel a:active{ background:var(--c-surface-2); }

/* -------------------------- 封面 -------------------------- */
.mhero{ padding:34px 18px 28px; }
.mhero h1{ font-size:30px; line-height:1.25; letter-spacing:-.02em; }
.mhero h1 .hl{
  background:linear-gradient(transparent 60%, color-mix(in srgb,var(--c-accent) 22%, transparent) 60%);
}
.mlead{ margin-top:12px; font-size:14px; color:var(--c-text-2); line-height:1.7; }

.mcta{ display:grid; gap:10px; margin-top:22px; }
.mbtn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 18px; border-radius:14px; border:1px solid var(--c-border);
  background:var(--c-surface); font-size:15px; font-weight:700; color:var(--c-text);
  cursor:pointer; min-height:50px; box-shadow:var(--sh-1);
  transition:transform .12s;
}
.mbtn:active{ transform:scale(.975); }
.mbtn-accent{ background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.mbtn-primary{ background:var(--c-ink); color:var(--c-surface); border-color:var(--c-ink); }
.mbtn-block{ width:100%; }

.mstat4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px; }
.mstat{
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px;
  padding:10px 8px; text-align:center; box-shadow:var(--sh-1);
}
.mstat .k{ font-size:10.5px; color:var(--c-text-3); }
.mstat .v{ font-size:15px; font-weight:800; margin-top:3px; letter-spacing:-.02em; }

/* -------------------------- 区块 -------------------------- */
.msec{ padding:26px 16px; }
.msec-hd{ margin-bottom:16px; }
.msec-hd h2{ font-size:21px; margin-top:8px; }

.mcard{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:16px; box-shadow:var(--sh-1); padding:16px;
}
.mrow{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--c-border) 60%, transparent);
  font-size:14px;
}
.mrow:last-child{ border-bottom:none; padding-bottom:0; }
.mrow:first-child{ padding-top:0; }
.mrow .k{ color:var(--c-text-2); }
.mrow .v{ font-weight:700; text-align:right; }

/* -------------------------- 步骤 -------------------------- */
.msteps{ display:grid; gap:10px; }
.mstep{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:14px; padding:14px 16px; box-shadow:var(--sh-1);
  border-left:3px solid var(--c-accent);
}
.mstep .t{ font-weight:700; font-size:14.5px; }
.mstep .d{ font-size:13.5px; color:var(--c-text-2); margin-top:4px; line-height:1.65; }

/* -------------------------- 特色 -------------------------- */
.mfeats{ display:grid; gap:10px; }
.mfeat{
  display:flex; gap:12px; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:14px; padding:14px; box-shadow:var(--sh-1);
}
.mfeat .ic{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--c-surface-2); border:1px solid var(--c-border); font-size:18px; flex:none;
}
.mfeat b{ font-size:14.5px; }
.mfeat p{ font-size:13px; color:var(--c-text-2); margin-top:3px; line-height:1.6; }

/* -------------------------- 标签 -------------------------- */
.mtabs{
  display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px;
  background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:14px;
}
.mtabs button{
  padding:11px; border:none; background:transparent; border-radius:10px;
  font-size:14px; font-weight:700; color:var(--c-text-2); cursor:pointer;
}
.mtabs button.on{ background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-1); }

/* -------------------------- 页脚 -------------------------- */
.mfoot{
  padding:32px 18px 40px; text-align:center; border-top:1px solid var(--c-border);
  margin-top:14px;
}
.mfoot-links{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px; font-size:13.5px;
}
.mfoot-links a{ color:var(--c-text-2); }
.mfoot-links a:active{ color:var(--c-accent); }

/* 手机端微调 */
body.mb .console{ font-size:11.5px; height:260px; }
body.mb .inv-grid{ grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); }
body.mb .pd-stats{ grid-template-columns:repeat(2,1fr); }
body.mb .pd-head{ flex-direction:column; text-align:center; }
body.mb .tbl{ font-size:13px; }
body.mb .tbl td{ padding:9px 8px; }