/* ==========================================================
   player.css —— 播放器窗口（方案 B：媒体播放器 + 播放列表）
   依赖 index-canvas.html 里的 :root 变量（--face/--navy 等）
   ========================================================== */

/* 窗口本体：固定定位（初始 left/top 由 js/player.js 按视口算，避免 right/bottom 被静态位置覆盖） */
.window.player-win{
  position:fixed; left:0; top:0;
  margin:0; width:400px; min-width:0; max-width:calc(100vw - 24px); z-index:110;
}
.player-win .title-btns button{width:17px; height:15px;}

.p-body{padding:8px;}

/* 分组框 */
.player-win fieldset{
  margin:0 0 8px; padding:9px 10px 10px; border:0;
  box-shadow:inset -1px -1px var(--white),inset 1px 1px var(--gray),
             inset -2px -2px var(--gray),inset 2px 2px var(--white);
}
.player-win fieldset:last-of-type{margin-bottom:0;}
.player-win legend{padding:0 4px; font-size:12px; font-weight:700;}

/* 显示区 */
.p-lcd{
  background:#fff; padding:9px 10px 8px;
  box-shadow:inset -1px -1px var(--white),inset 1px 1px var(--dark),
             inset -2px -2px var(--face-lt),inset 2px 2px var(--gray);
}
.p-row1{display:flex; align-items:baseline; gap:7px; margin-bottom:6px;}
.p-idx{
  flex:none; padding:1px 5px; background:var(--navy); color:#fff;
  font:700 11px/1.4 "Courier New",monospace;
}
.p-song{
  flex:1; min-width:0; font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.p-row2{display:flex; align-items:center; gap:8px;}
.p-time{font:11px/1 "Courier New",monospace; color:#303030; white-space:nowrap;}

/* 进度条（可拖动） */
.p-bar{
  flex:1; height:13px; background:var(--face); position:relative; cursor:pointer;
  touch-action:none;
  box-shadow:inset -1px -1px var(--white),inset 1px 1px var(--gray),
             inset -2px -2px var(--face-lt),inset 2px 2px var(--dark);
  padding:2px;
}
.p-bar i{
  display:block; height:100%; width:0%;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.55) 7px 9px),
             linear-gradient(180deg,#5b9bd5,#1f5aa8);
}
/* 拖动把手：Win95 小方块，跟着进度走 */
.p-bar b{
  position:absolute; top:50%; left:0%; width:7px; height:11px;
  margin-left:-3.5px; transform:translateY(-50%);
  background:var(--face); pointer-events:none;
  box-shadow:inset -1px -1px var(--dark),inset 1px 1px var(--white),
             inset -2px -2px var(--gray),inset 2px 2px var(--face-lt);
}
.p-bar:active b{background:var(--face-lt);}

/* 传输控制 */
.p-ctrl{display:flex; align-items:center; gap:5px; margin-bottom:8px;}
.p-ctrl button{
  height:26px; min-width:34px; padding:0 7px; border:0; cursor:pointer;
  background:var(--face); color:#000;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset -1px -1px var(--dark),inset 1px 1px var(--white),
             inset -2px -2px var(--gray),inset 2px 2px var(--face-lt);
}
.p-ctrl button:active,.p-ctrl button.on{
  box-shadow:inset -1px -1px var(--white),inset 1px 1px var(--dark),
             inset -2px -2px var(--face-lt),inset 2px 2px var(--gray);
}
.p-ctrl .p-mode{min-width:56px; font-size:11px;}
.p-ctrl .p-spacer{flex:1;}

/* 喇叭图标 + 音量 */
.p-vol-icon{display:flex; align-items:center; margin-right:1px;}
.p-vol-icon svg{display:block;}

.p-vol{
  -webkit-appearance:none; appearance:none; width:82px; height:20px;
  margin:0; background:transparent; cursor:pointer;
}
.p-vol::-webkit-slider-runnable-track{
  height:6px; background:var(--face);
  box-shadow:inset -1px -1px var(--white),inset 1px 1px var(--gray),
             inset -2px -2px var(--face-lt),inset 2px 2px var(--dark);
}
.p-vol::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:19px; margin-top:-7px;
  background:var(--face); border:0;
  box-shadow:inset -1px -1px var(--dark),inset 1px 1px var(--white),
             inset -2px -2px var(--gray),inset 2px 2px var(--face-lt);
}
.p-vol::-moz-range-track{
  height:6px; background:var(--face);
  box-shadow:inset -1px -1px var(--white),inset 1px 1px var(--gray);
}
.p-vol::-moz-range-thumb{
  width:11px; height:19px; border-radius:0; border:0; background:var(--face);
  box-shadow:inset -1px -1px var(--dark),inset 1px 1px var(--white),
             inset -2px -2px var(--gray),inset 2px 2px var(--face-lt);
}

/* 播放列表 */
.p-list{
  height:168px; overflow-y:auto; background:#fff;
  box-shadow:inset -1px -1px var(--white),inset 1px 1px var(--dark),
             inset -2px -2px var(--face-lt),inset 2px 2px var(--gray);
}
.p-list::-webkit-scrollbar{width:16px;}
.p-list::-webkit-scrollbar-track{background:var(--face-lt); box-shadow:inset 1px 1px var(--gray);}
.p-list::-webkit-scrollbar-thumb{
  background:var(--face);
  box-shadow:inset -1px -1px var(--dark),inset 1px 1px var(--white),
             inset -2px -2px var(--gray),inset 2px 2px var(--face-lt);
}
.p-item{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:4px 7px; border:0; background:transparent; cursor:pointer;
  text-align:left; font-size:11px; color:#000;
}
.p-item:hover{background:#e8e8e8;}
.p-item.sel{background:var(--navy); color:#fff;}
.p-item .n{font:700 10px/1 "Courier New",monospace; opacity:.75; width:16px; flex:none;}
.p-item .t2{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}