/* SmashCut H5 — 傻瓜版样式（独立文件，不改 smashcut-h5.css）
 * .skin-lite 作用域：只在 body 处于傻瓜模式时生效，专业版零影响
 */

/* ── 顶部皮肤切换按钮 ── */
.skin-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; padding: 6px 10px;
  font-size: 12px; font-weight: 600; line-height: 1;
  border: 1px solid var(--border-light,#333); border-radius: 14px;
  background: var(--bg-card,#1a1a1a); color: var(--text2,#ccc);
  cursor: pointer; flex-shrink: 0;
  -webkit-user-select: none; user-select: none;
}
.skin-toggle-btn:active { opacity: 0.7; }
body.skin-lite .skin-toggle-btn { border-color: var(--accent,#4CAF50); color: var(--accent,#4CAF50); }

/* ═══════════════════════════════════════════════════════════════
   傻瓜版播放器（skin-lite 作用域：隐藏专业控件、放大轨道）
   ═══════════════════════════════════════════════════════════════ */
/* F4（2026-08-06）：移除 sticky 粘顶，改普通文档流整页滚动（小屏下视频不再挤压下方功能区） */
.fool-player-card {
  background: var(--bg-card, #111);
}
/* 视频容器：保持 16:9 自适应（去掉 30vh 硬锁，宽屏下由 aspect-ratio 决定高度，无黑边）
   竖版（.sc-player-video-v）不受 42vh 压小，走组件内更高上限（移动端 calc(100vh-160px)） */
body.skin-lite .fool-player .sc-player-video:not(.sc-player-video-v) {
  max-height: 42vh;
}
/* 竖屏平板（≥600px）：视频按 16:9 全宽铺满，不被 vh 卡出横向黑边 */
@media (min-width:600px) and (orientation:portrait) {
  body.skin-lite .fool-player .sc-player-video { max-height: calc(100vh - 160px); }
}
/* 横屏：视频按 16:9 全宽铺开（占满可用高度，不缩中间） */
@media (orientation: landscape) {
  body.skin-lite .fool-player .sc-player-video { max-height: calc(100vh - 130px); }
}
/* 恢复播放器基本功能：旋转/倍速/静音控制栏 + 帧步进/时间行 + 发球点指示器（用户要求基本功能都在） */
body.skin-lite .fool-player .sc-player-controls { display: flex; }
/* 轨道已由卡片流全替代（tracks:[]，无 anno 轨道）；时间轴保留为细进度条 */
body.skin-lite .fool-player .sc-player-timeline-outer { height: 14px; }
body.skin-lite .fool-player .sc-player-time-pos { width: 6px; }
/* 发球点行 + 底部逐帧指示器恢复显示 */
body.skin-lite .fool-player .sc-player-indicator { display: flex; }
/* 简洁版：去掉播放行（⏮ 逐帧 时间 帧数 ZOOM ⏭）功能条，保留时间轴进度条。
   JS 埋点保留（专业版/审核页仍用），不算残留死埋点 */
body.skin-lite .fool-player .sc-player-time-row { display: none; }
body.skin-lite .fool-player .sc-player-zoom-indicator { display: none; }

/* ═══════════════════════════════════════════════════════════════
   卡片流
   ═══════════════════════════════════════════════════════════════ */
.fool-count { font-size: 13px; color: var(--text2,#ccc); font-weight: 600; }
.fool-filter-btn {
  padding: 8px 14px; font-size: 13px; border-radius: 16px;
  border: 1px solid var(--border-light,#333);
  background: var(--bg-card2,#222); color: var(--text2,#ccc);
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.fool-filter-btn:active { opacity: 0.7; }

/* 卡片流：横向滚动（替代平铺网格），一次屏幕玩完，最底部 */
.fool-cards {
  display: flex; flex-direction: row; gap: 8px; overflow-x: auto;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.fool-card {
  flex: 0 0 auto; width: 116px; box-sizing: border-box;
  padding: 8px 6px; border-radius: 12px;
  background: var(--bg-card2,#222); border: 2px solid var(--border-light,#333);
  cursor: pointer; text-align: center;
  -webkit-user-select: none; user-select: none;
  transition: transform 0.1s, border-color 0.1s, border-width 0.1s;
}
.fool-card:active { transform: scale(0.96); }
/* 选中 = 边框变绿（奇点击选中，偶点击取消）；正在编辑的块加绿光晕 */
.fool-card.selected {
  border-color: var(--accent,#4CAF50);
  border-width: 3px;
  background: rgba(76,175,80,0.15);
}
.fool-card.active { box-shadow: 0 0 0 2px rgba(76,175,80,0.5); }
/* 高能量标红：未选中时红框；选中时优先绿框 */
.fool-card.high { border-color: var(--danger,#ef5350); background: rgba(244,67,54,0.12); }
.fool-card.high.selected { border-color: var(--accent,#4CAF50); background: rgba(76,175,80,0.18); }

.fool-card-top { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; }
.fool-card-num { font-size: 13px; color: var(--text2,#888); font-weight: 700; }
.fool-card-energy { font-size: 12px; }
.fool-card-time { font-size: 12px; font-weight: 600; color: var(--text,#e0e0e0); white-space: nowrap; }
.fool-card-dur { font-size: 13px; color: var(--text2,#aaa); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   ±4s 专用迷你滑轨（P3：满量=原段±4s+相邻边界钳制，拖动平移整段）
   ═══════════════════════════════════════════════════════════════ */
#foolBarCard { background: var(--bg-card,#111); }
.fool-mini-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; font-size: 12px;
}
.fool-mini-label { color: var(--text2,#ccc); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fool-mini-offset { margin-left: auto; color: var(--text3,#888); font-size: 12px; font-weight: 700; font-family: monospace; flex-shrink: 0; }
.fool-mini-track {
  position: relative; height: 26px;
  background: var(--bg-card2,#222); border-radius: 8px;
  touch-action: none; border: 1px solid var(--border-light,#333);
}
.fool-mini-range {
  position: absolute; left: 4px; right: 4px; top: 50%; height: 5px; margin-top: -2.5px;
  border-radius: 3px; background: var(--border-light,#333);
}
.fool-mini-block {
  position: absolute; top: 3px; height: 20px;
  min-width: 6px; border-radius: 6px; box-sizing: border-box;
  background: rgba(76,175,80,0.35); border: 2px solid var(--accent,#4CAF50);
  box-shadow: 0 0 8px rgba(76,175,80,0.4);
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.fool-mini-block:active { cursor: grabbing; background: rgba(76,175,80,0.5); }
/* B1：左右拉动杆（改起点/终点） */
.fool-mini-handle {
  position: absolute; top: -3px; bottom: -3px; width: 14px; z-index: 2;
  background: var(--accent,#4CAF50); border-radius: 4px; cursor: ew-resize;
  box-shadow: 0 0 6px rgba(76,175,80,0.6);
}
.fool-mini-handle.l { left: -7px; }
.fool-mini-handle.r { right: -7px; }
.fool-mini-handle:active { background: var(--accent-light,#81C784); }
/* B3：贴边界红区提示色（实时时间文字由 JS 设 style.color） */

/* ═══════════════════════════════════════════════════════════════
   合成进度条（M5：细进度条，决策表要求）
   ═══════════════════════════════════════════════════════════════ */
.progress-track {
  position: relative;
  height: 4px;
  background: var(--border-light,#333);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent,#4CAF50);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   简洁版取消单屏（2026-08-05 cl-495）：选片页恢复整页滚动。
   原单屏压缩块（页面级禁滚/播放器 static/卡片流 flex 内滚）已删除，
   .fool-player-card 回到上方 sticky 规则（播放器固定顶、下方内容滚）。
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   P0-3 — 首次引导气泡（指向第一张卡片）
   ═══════════════════════════════════════════════════════════════ */
.fool-tip {
  position: absolute; z-index: 50;
  background: var(--accent,#4CAF50); color: #fff; font-size: 12px; font-weight: 600;
  padding: 8px 12px; border-radius: 10px; text-align: center; line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); cursor: pointer;
  animation: tipIn 0.3s ease;
}
.fool-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--accent,#4CAF50);
}
@keyframes tipIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ═══════════════════════════════════════════════════════════════
   P2-3 — 触摸设备 fool 高频目标放大（≥44×44；fool.css 后加载覆盖基础宽）
   ═══════════════════════════════════════════════════════════════ */
@media (pointer:coarse) {
  .fool-filter-btn { padding: 12px 14px; min-height: 44px; }
  .fool-card { width: 132px; padding: 10px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   P0 优化（2026-08-15）：去块平移 / AI 只读轨道 / 画面 overlay / 快捷出片
   ═══════════════════════════════════════════════════════════════ */

/* P0-04：去块平移 — 块身不再整段平移，只可拖左右绿色手柄改起点/终点 */
.fool-mini-block { cursor: default; }
.fool-mini-block:active { background: rgba(76,175,80,0.5); }

/* P0-01：AI 只读轨道（显示全部分段位置；点击跳转由 fool.js 绑定，label 隐藏因卡片流已体现数量） */
body.skin-lite .fool-player .sc-player-anno-section { margin-top: 4px; }
body.skin-lite .fool-player .sc-player-anno-track-label { display: none; }
body.skin-lite .fool-player .sc-player-anno-track-outer { height: 16px; margin-bottom: 4px; }
body.skin-lite .fool-player .sc-player-anno-seg.ai { background: rgba(76,175,80,0.6); box-shadow: 0 0 3px rgba(76,175,80,0.5); }
body.skin-lite .fool-player .sc-player-anno-seg.ai:hover { opacity: 0.85; }
/* U2：选中段在 AI 轨道上高亮（实底绿 + 光晕，与卡片选中一致）。
   body.skin-lite 前缀：压过 skin-lite 基础样式（0,4,1），否则默认皮肤下 selected 不生效 */
body.skin-lite .fool-player .sc-player-anno-seg.ai.selected,
.fool-player .sc-player-anno-seg.ai.selected {
  background: var(--accent,#4CAF50) !important;
  box-shadow: 0 0 8px rgba(76,175,80,0.7);
  z-index: 2;
}

/* P0-02：画面 AI 段 overlay（仅示不可点 — pointer-events:none；z-index 低于控制栏 10 / 播放头 9 / 水印 8） */
.fool-ai-overlay {
  position: absolute; top: 0; bottom: 0;
  background: rgba(76,175,80,0.12);
  border-left: 2px solid var(--accent,#4CAF50);
  border-right: 2px solid var(--accent,#4CAF50);
  box-sizing: border-box;
  pointer-events: none; z-index: 7;
  display: none;
}
.fool-ai-overlay-tag {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  background: var(--accent,#4CAF50); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* P0-05/06：快捷出片卡（顶部显眼） */
.fool-quick-card { background: var(--bg-card,#111); }
.fool-quick-btn { -webkit-user-select:none; user-select:none; }

/* 触摸设备：快捷按钮 / AI 轨道同样放大 */
@media (pointer:coarse) {
  .fool-quick-btn { min-height: 52px; }
  body.skin-lite .fool-player .sc-player-anno-track-outer { height: 20px; }
}