/* SmashCutPlayer — 独立视频播放器组件样式 v2
 * 移植自 workbench 平台层，适配 ECS 暗色主题变量
 * 命名空间: .sc-player- */

/* ── Wrapper — 外容器，sticky 可选 ── */
.sc-player-wrapper { position:relative; background:#000; border-radius:var(--radius-sm,8px); overflow:hidden; }
.sc-player-sticky { position:sticky; top:48px; z-index:99; overflow:visible; background:var(--bg-primary,#0a0a0a); }

/* ── Video wrap — 16:9 固定容器，水印/控制按钮以它为基准 ── */
.sc-player-video {
  position:relative; aspect-ratio:16/9; width:100%;
  max-height:70vh; background:#000;
}
@media (max-width:500px) and (orientation:portrait) {
  .sc-player-video { max-height:35vh; }
}
@media (max-height:500px) {
  .sc-player-video { max-height:60vh; }
}
/* P2-11 竖版视频：JS 按原片比例设容器 aspect-ratio，竖版不受 16:9 的 35vh 压缩，
   手机竖屏下尽量撑高（画面窄但真实比例），其余场景 cap 于 70vh */
.sc-player-video-v { max-height:70vh; }
@media (max-width:500px) and (orientation:portrait) {
  .sc-player-video-v { max-height: calc(100vh - 160px); }
}
.sc-player-video video {
  width:100%; height:100%; object-fit:contain; display:block;
}

/* ── Watermark (右上角 Logo 图片，不挤边，不随视频旋转) ──
 * 定位参数由 gen_watermark_css() 注入的 CSS 变量驱动，
 * var(名称, 默认值) 确保不注入时仍正确显示。 */
.sc-player-watermark {
  position:absolute;
  top: var(--wm-top, 4.16%);
  right: var(--wm-right, 2.6%);
  left: auto;
  z-index:8; pointer-events:none;
  /* 容器宽度约束 + img 撑满宽：避免百分比基准循环（旧版 height 用 width 变量 / img 相对自身百分比），
     横/竖版统一此模式，由 --wm-* 横版 / --wm-v-* 竖版参数驱动 */
  width: var(--wm-width-pct, 10%);
  max-width: var(--wm-max-w, 192px);
  height:auto;
}
.sc-player-watermark img { width:100%; height:auto; display:block; }
/* 竖屏视频水印：竖版 logo 补竖版定位（top/left）+ 宽度约束 */
.sc-player-watermark-v {
  top: var(--wm-v-top, 4.16%);
  right: var(--wm-v-right, 2.6%);
  left: auto;
  width: var(--wm-v-width-pct, 8%);
  max-width: var(--wm-v-max-w, 86px);
  height:auto;
}
.sc-player-watermark-v img { width:100%; height:auto; }

/* ── Filename (上方居中，以 .sc-player-video 为基准) ── */
.sc-player-filename {
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.45); color:#ccc;
  padding:3px 8px; border-radius:4px;
  z-index:8; pointer-events:none;
  font-size:11px; max-width:70%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── 本地文件选择行 ── */
.sc-player-file-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 10px; font-size:12px; color:var(--text3,#888);
}
.sc-player-file-row a { color:var(--text3,#888); text-decoration:underline; cursor:pointer; }
.sc-player-file-row a:hover { color:#fff; }

/* ── Time row (独立，不与 seek bar 共享宽度) ── */
.sc-player-time-row { display:flex; align-items:center; gap:8px; padding:4px 0; margin:0 0 4px; }
.sc-player-time-label { font-size:13px; font-weight:700; font-family:monospace; color:var(--accent,#4CAF50); text-shadow:0 0 6px rgba(0,0,0,0.9); text-align:center; flex:1; }
.sc-player-frame-btn { background:var(--bg-card,#1a1a1a); color:#aaa; border:1px solid var(--border-light,#333); border-radius:4px; cursor:pointer; font-size:13px; padding:4px 12px; line-height:1; }
.sc-player-frame-btn:hover{ color:#fff; border-color:#888; }
.sc-player-frame-btn:active{ background:#333; }
.sc-player-frame-hint { font-size:9px; color:var(--text-muted,#555); }
.sc-player-frame-num { font-size:12px; font-weight:600; font-family:monospace; color:var(--accent,#4CAF50); text-shadow:0 0 6px rgba(0,0,0,0.9); white-space:nowrap; }

/* ── Timeline (可缩放，满宽，不与 time/zoom 共享宽度) ── */
.sc-player-timeline-row { position:relative; }
.sc-player-timeline-outer {
  overflow-x:auto; overflow-y:visible; height:20px;
  cursor:pointer; position:relative;
  scrollbar-width:none;
  border-radius:3px; background:var(--bg-card,#1a1a1a); border:1px solid var(--border-light,#333);
}
.sc-player-timeline-outer::-webkit-scrollbar { display:none; }
.sc-player-timeline-inner { position:relative; height:100%; padding-right:4px; }
.sc-player-time-pos {
  position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--accent,#4CAF50); pointer-events:none; z-index:3;
  box-shadow:0 0 6px rgba(76,175,80,0.6);
  transition: width 0.1s, box-shadow 0.1s;
}
.sc-player-timeline-outer:hover .sc-player-time-pos,
.sc-player-timeline-outer:active .sc-player-time-pos { width:6px; box-shadow:0 0 10px rgba(76,175,80,0.8); }
.sc-player-time-pos::after {
  content:''; position:absolute; top:-4px; left:-3px;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent,#4CAF50); box-shadow:0 0 6px rgba(76,175,80,0.5);
}

/* ── Zoom ── */
.sc-player-zoom-controls { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.sc-player-zoom-btn {
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.45); color:#aaa;
  border:1px solid rgba(255,255,255,0.12);
  cursor:pointer; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  line-height:1; transition:all 0.15s;
  -webkit-user-select:none; user-select:none;
}
.sc-player-zoom-btn:active { background:rgba(76,175,80,0.25); color:var(--accent,#4CAF50); }
.sc-player-zoom-label { font-size:9px; color:var(--text-muted,#666); min-width:36px; text-align:center; font-family:monospace; }

/* ── Zoom indicator（右下角叠加在视频上） ── */
.sc-player-zoom-indicator {
  position:absolute; bottom:40px; right:8px;
  background:rgba(0,0,0,0.55); color:var(--accent,#4CAF50);
  padding:2px 8px; border-radius:3px;
  font-size:12px; font-family:monospace; font-weight:700;
  pointer-events:none; z-index:12;
}

/* ── Actions slot — 页面操作按钮区（随 player 整体 sticky） ── */
.sc-player-actions { padding:0; }

/* ── Rotation ──
 * 旋转后宽高/容器比例由 JS _applyAspectRatio() 内联接管（视觉盒=容器），
 * 此处仅保留 transform 兜底；旧 flex 链因 wrapper 无定高导致 height:100% 塌陷已删 */
.sc-player-wrapper.rot-90 video { transform:rotate(90deg); }
.sc-player-wrapper.rot-180 video { transform:rotate(180deg); }
.sc-player-wrapper.rot-270 video { transform:rotate(270deg); }

/* ── Video playhead (贯穿绿线 + 菱形箭头 + 时间标签) ── */
.sc-player-playhead { position:absolute; top:0; left:0; pointer-events:none; z-index:9; }
.sc-player-playhead-line { display:none; }
.sc-player-playhead-time {
  position:absolute; top:6px; left:4px;
  background:rgba(76,175,80,0.85); color:#fff;
  padding:1px 5px; border-radius:4px;
  font-size:10px; font-family:monospace; font-weight:700;
  white-space:nowrap;
  pointer-events:auto;
}
.sc-player-playhead::before {
  content:''; position:absolute; top:-1px; left:-5px;
  width:10px; height:10px;
  background:#4CAF50; clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 70%,0 30%);
  z-index:2;
}


/* ── Play overlay ── */
.sc-player-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background:rgba(0,0,0,0.5); color:#fff;
  font-size:28px; display:flex; align-items:center; justify-content:center;
  z-index:5; cursor:pointer; pointer-events:auto;
  transition:opacity 0.2s; border:2px solid rgba(255,255,255,0.15);
}
.sc-player-overlay:active { transform:translate(-50%,-50%) scale(0.92); }

/* ── Controls (bottom-left) ── 水印钉视频右上角，控制栏放左下角向下对齐 */
.sc-player-controls {
  position:absolute; bottom:6px; top:auto; left:6px; right:auto;
  display:flex; flex-direction:column; gap:3px;
  z-index:10; pointer-events:none;
}
.sc-player-controls > * { pointer-events:auto; }
.sc-player-btn {
  height:28px; min-width:32px; padding:0 7px;
  border-radius:14px; background:rgba(0,0,0,0.55);
  color:#aaa; font-size:11px; font-weight:700;
  border:1px solid rgba(255,255,255,0.12);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:1; -webkit-user-select:none; user-select:none;
  transition:all 0.15s;
}
.sc-player-btn:active { background:rgba(0,0,0,0.8); color:#fff; }
.sc-player-spd-on { background:rgba(76,175,80,0.25); color:var(--accent,#4CAF50); border-color:rgba(76,175,80,0.3); }

/* ── Annotation tracks (below timeline) ── */
.sc-player-anno-section { margin-top:6px; }
.sc-player-anno-track-label { font-size:10px; color:var(--text-muted,#666); margin-bottom:1px; display:flex; justify-content:space-between; }
.sc-player-anno-track-outer {
  position:relative; overflow-x:scroll; overflow-y:hidden;
  height:20px; cursor:pointer;
  scrollbar-width:none;
  border-radius:2px; background:var(--bg-primary,#0a0a0a); border:1px solid var(--border-light,#222);
  margin-bottom:2px;
}
.sc-player-anno-track-outer::-webkit-scrollbar { display:none; }
.sc-player-anno-track-inner { position:relative; height:100%; padding-right:4px; }
.sc-player-anno-seg {
  position:absolute; top:2px; height:16px; border-radius:2px;
  min-width:3px; cursor:pointer;
  transition:opacity 0.15s;
}
.sc-player-anno-seg.ai { background:rgba(76,175,80,0.5); }
.sc-player-anno-seg.human { background:rgba(255,193,7,0.7); }
.sc-player-anno-seg:hover { opacity:0.7; }
.sc-player-anno-seg.gt { background:rgba(33,150,243,0.55); }
/* ── X 删除按钮（hover 显示，移动端常显） ── */
.sc-player-seg-del {
  position:absolute; top:50%; left:50%; width:18px; height:18px;
  margin-left:-9px; margin-top:-9px;
  line-height:18px; text-align:center; border-radius:50%;
  background:rgba(244,67,54,0.9); color:#fff;
  font-size:11px; font-weight:700; cursor:pointer; z-index:6;
  display:none; font-family:sans-serif;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  transition:transform 0.1s;
}
.sc-player-anno-seg:hover .sc-player-seg-del { display:block; }
.sc-player-seg-del:active { transform:scale(0.88); }
@media (pointer:coarse) { .sc-player-seg-del { display:block; } }
/* ── 段类型菱形（锚段中央，点击循环切换 杀球/勾对角/多拍） ── */
.sc-player-type-diamond {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:13px; font-weight:700; line-height:1; z-index:7;
  cursor:pointer; pointer-events:auto;
  text-shadow:0 0 6px rgba(0,0,0,0.9);
  -webkit-user-select:none; user-select:none;
}
.sc-player-type-diamond.type-smash { color:#ef5350; }
.sc-player-type-diamond.type-cross { color:#ff9800; }
.sc-player-type-diamond.type-rally { color:#4caf50; }
.sc-player-type-diamond.type-none { color:#888; }
/* ── 段拖拽手柄（段内缘小竖条，扩大触摸目标） ── */
.sc-player-anno-handle {
  position:absolute; top:4px; width:32px; height:16px; z-index:5;
  cursor:col-resize; pointer-events:auto; touch-action:none;
  /* 透明扩大区（触摸区 32px），::before 为可视指示条 */
  background:transparent;
}
.sc-player-anno-handle::before {
  content:''; position:absolute; top:0; left:15px; width:2px; height:100%;
  background:rgba(255,255,255,0.5); border-radius:1px;
  pointer-events:none;
}
/* 句柄竖条落在标注条内部边缘（handle 定位在段边缘居中，竖条偏段内 2px） */
.sc-player-anno-handle-left::before { left:18px; }
.sc-player-anno-handle-right::before { left:12px; }
.sc-player-anno-handle:hover::before { background:rgba(255,255,255,0.9); box-shadow:0 0 8px rgba(255,255,255,0.4); }
.sc-player-anno-handle:active::before { background:#fff; box-shadow:0 0 10px rgba(255,255,255,0.6); }

/* ── GT 发球点标记（审核模式，可点击删除） ── */
.sc-player-anno-gt-serve {
  position:absolute; top:-2px; width:8px; height:18px; z-index:5;
  background:rgba(255,215,0,0.5); border-radius:2px;
  cursor:pointer; margin-left:-4px;
  box-shadow:0 0 6px rgba(255,215,0,0.4);
  transition:background 0.12s, opacity 0.12s;
}
.sc-player-anno-gt-serve:hover { background:rgba(255,68,68,0.7); }
.sc-player-anno-gt-serve:active { opacity:0.5; }
/* ── Annotation track playhead cursor ── */
.sc-player-anno-track-cursor {
  position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--accent,#4CAF50); pointer-events:none; z-index:4;
  box-shadow:0 0 6px rgba(76,175,80,0.6);
  transition: width 0.1s;
}
/* ── Serve point marker (金色菱形 + 竖线) ── */
.sc-player-anno-serve {
  position:absolute; top:0; width:6px; height:100%;
  background:transparent; cursor:pointer; z-index:3;
}
.sc-player-anno-serve::before {
  content:'◆';
  position:absolute; top:1px; left:50%;
  transform:translateX(-50%);
  color:#FFD700; font-size:12px; font-weight:700;
  text-shadow:0 0 6px rgba(255,215,0,0.8);
  line-height:1;
  pointer-events:none;
}
/* P5：发球点轨道按类型渲染彩色点（serve 金色 + 杀球/勾球/多拍各自色） */
.sc-player-anno-serve.type-smash::before { color:#ef5350; }
.sc-player-anno-serve.type-hook::before { color:#ff9800; }
.sc-player-anno-serve.type-rally::before { color:#4caf50; }
.sc-player-anno-serve.type-serve::before { color:#FFD700; }
/* GT 发球点也加菱形 */
.sc-player-anno-gt-serve::before {
  content:'◆';
  position:absolute; top:-3px; left:50%;
  transform:translateX(-50%);
  color:#FFD700; font-size:16px; font-weight:700;
  text-shadow:0 0 6px rgba(255,215,0,0.8);
  line-height:1;
  pointer-events:none;
}
.sc-player-anno-serve-pos {
  position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--accent,#4CAF50); pointer-events:none; z-index:5;
  box-shadow:0 0 6px rgba(76,175,80,0.8);
}

/* ── Sync scroll containers ── */
.sc-player-sync-scroll { overflow:hidden; }

/* ── Responsive ── */
@media (max-width:500px) and (orientation:portrait) {
  .sc-player-frame-btn { font-size:18px; padding:6px 18px; }
  .sc-player-time-label { font-size:15px; }
  .sc-player-time-row { gap:6px; }
}
/* ── 底部逐帧指示器（左AI绿 + 右人工黄 + 中发球红点） ── */
.sc-player-indicator {
  position:absolute; bottom:0; left:0; right:0; height:8px;
  z-index:8; pointer-events:none; display:flex;
  opacity:1; overflow:hidden;
}
.sc-player-indicator-left, .sc-player-indicator-right {
  flex:1; height:100%;
  transition: background 0.1s ease-out, box-shadow 0.1s ease-out;
}
.sc-player-indicator-left.on {
  background:rgba(76,175,80,0.75);
  box-shadow:0 0 12px rgba(76,175,80,0.5);
}
.sc-player-indicator-right.on {
  background:rgba(255,193,7,0.75);
  box-shadow:0 0 12px rgba(255,193,7,0.5);
}
.sc-player-indicator-serve {
  position:absolute; left:50%; top:50%; width:8px; height:8px;
  margin-left:-4px; margin-top:-4px; border-radius:50%;
  background:rgba(244,67,54,0); z-index:9; transition:none;
}
.sc-player-indicator-serve.on {
  background:rgba(244,67,54,0.95); box-shadow:0 0 14px rgba(244,67,54,0.9);
  animation: sc-indicator-blink 0.4s ease-in-out infinite alternate;
}
@keyframes sc-indicator-blink {
  0% { opacity:0.4; transform:scale(0.7); }
  100% { opacity:1; transform:scale(1.3); }
}