/* 汉语典 · 笔顺动画播放器样式（随单字页明/暗主题自适应） */
.bihua-player{
  margin:0 0 14px;
  padding:14px;
  border:1px solid var(--border-color, rgba(0,0,0,.08));
  border-radius:6px;
  background:rgba(127,127,127,.04);
}
html[data-theme="dark"] .bihua-player{
  background:rgba(255,255,255,.04);
  border-color:rgba(99,99,99,.45);
}

/* 田字格舞台 */
.bp-stage{
  position:relative;
  width:184px;
  height:184px;
  max-width:100%;
  margin:0 auto 12px;
  border:1px solid rgba(208,64,64,.55);
  border-radius:4px;
  background:#fff;
  overflow:hidden;
}
html[data-theme="dark"] .bp-stage{
  background:#141414;
  border-color:rgba(220,80,80,.5);
}
.bp-grid-lines span{position:absolute;display:block;pointer-events:none;}
.bp-grid-lines .bp-h{left:0;right:0;top:50%;height:0;border-top:1px dashed rgba(208,64,64,.35);}
.bp-grid-lines .bp-v{top:0;bottom:0;left:50%;width:0;border-left:1px dashed rgba(208,64,64,.35);}
.bp-grid-lines .bp-d1,
.bp-grid-lines .bp-d2{
  top:50%;left:50%;width:141.4%;height:0;
  border-top:1px dashed rgba(208,64,64,.18);
  transform-origin:0 0;
}
.bp-grid-lines .bp-d1{transform:rotate(45deg) translateX(-50%);}
.bp-grid-lines .bp-d2{transform:rotate(-45deg) translateX(-50%);}

.bp-svg-slot{
  position:absolute;inset:6px;
  display:flex;align-items:center;justify-content:center;
}
.bp-svg-slot svg{width:100%;height:100%;display:block;}

/* 当前笔画序号徽标 */
.bp-badge{
  position:absolute;top:6px;left:8px;
  min-width:34px;padding:1px 7px;
  font-size:12px;line-height:1.5;font-weight:600;
  color:#fff;background:#007bff;border-radius:10px;
  text-align:center;
}
/* 当前笔画名 */
.bp-stroke-name{
  position:absolute;right:8px;bottom:6px;
  max-width:60%;padding:1px 8px;
  font-size:12px;font-weight:600;
  color:#dc3545;background:rgba(255,255,255,.85);
  border:1px solid rgba(220,53,69,.35);border-radius:10px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="dark"] .bp-stroke-name{background:rgba(0,0,0,.7);color:#ff6b72;border-color:rgba(220,53,69,.45);}

/* 控制条 */
.bp-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;
}
.bp-btn{
  appearance:none;cursor:pointer;
  padding:5px 14px;font-size:13px;line-height:1.4;
  color:rgb(33,33,18);background:#f9f9f9;
  border:1px solid #ced4da;border-radius:4px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.bp-btn:hover{background:#eef0f2;border-color:#adb5bd;}
.bp-btn:active{transform:translateY(1px);}
html[data-theme="dark"] .bp-btn{
  color:#eee;background:#222;border-color:#444;
}
html[data-theme="dark"] .bp-btn:hover{background:#2c2c2c;border-color:#555;}
.bp-btn-primary{color:#fff;background:#007bff;border-color:#007bff;}
.bp-btn-primary:hover{background:#0069d9;border-color:#0062cc;color:#fff;}
.bp-btn-loop.bp-active{color:#fff;background:#28a745;border-color:#28a745;}
.bp-speed{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:inherit;}
.bp-speed select{
  padding:4px 6px;font-size:13px;
  border:1px solid #ced4da;border-radius:4px;background:#f9f9f9;color:rgb(33,33,18);
}
html[data-theme="dark"] .bp-speed select{background:#222;color:#eee;border-color:#444;}

@media (max-width:480px){
  .bp-stage{width:168px;height:168px;}
  .bp-btn{padding:5px 12px;}
}