/* ============================================================
   gesture-widget.css
   手势组件样式（课堂预览 + 交互输入 + 决斗模式）
   ============================================================ */

/* ── 预览卡片（讲课阶段） ─────────────────────────────────── */

.gest-preview-wrap {
  display: flex;
  gap: 14px;
  background: #0e1620;
  border: 1px solid #2a3b66;
  border-radius: 10px;
  padding: 14px;
  margin: 10px 0;
  align-items: flex-start;
}

.gest-preview-svg {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  background: #080f1a;
  border: 1px solid #1e2f55;
  border-radius: 8px;
  overflow: visible;
  position: relative;
}

.gest-preview-desc {
  flex: 1;
  min-width: 0;
}

.gest-preview-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8d49d;
  margin-bottom: 3px;
}

.gest-preview-en {
  font-size: 11px;
  color: #8899aa;
  font-weight: 400;
  font-style: italic;
}

.gest-preview-text {
  font-size: 12px;
  color: #c8d8e8;
  line-height: 1.6;
  margin-bottom: 6px;
}

.gest-preview-tip {
  font-size: 11px;
  color: #f8c850;
  background: #141e30;
  border-left: 2px solid #f8c850;
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
  margin-bottom: 8px;
}

.gest-preview-steps {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gest-step-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #8899aa;
}

.gest-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1e2f55;
  border: 1px solid #2a3b66;
  color: #a8b8cc;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.gest-step-label {
  color: #a8b8cc;
}

/* ── 交互式手势输入 ───────────────────────────────────────── */

.gest-root {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

/* 倒计时条 */
.gest-timer-bar {
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 2px;
}

.gest-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #f8c850, #f8d870);
  border-radius: 2px;
  transition: background 0.3s;
}

/* 指引文字 */
.gest-instruction {
  font-size: 13px;
  color: #8899aa;
  text-align: center;
  min-height: 20px;
}

.gest-node-current {
  color: #f8d49d;
  font-weight: 700;
  font-size: 15px;
}

/* 手势舞台 */
.gest-stage-wrap {
  display: flex;
  justify-content: center;
}

.gest-stage {
  position: relative;
  width: 200px;
  height: 200px;
  background: #080f1a;
  border: 1px solid #1e2f55;
  border-radius: 12px;
  overflow: hidden;
}

/* 各层叠放 */
.gest-svg-layer,
.gest-pulse-layer,
.gest-hitzone-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gest-svg-layer    { z-index: 1; }
.gest-pulse-layer  { z-index: 2; pointer-events: none; }
.gest-hitzone-layer { z-index: 3; }

/* 热区按钮 */
.gest-hitzone {
  transition: background 0.15s;
}

.gest-hitzone:hover {
  background: rgba(248,212,157, 0.12) !important;
}

.gest-hitzone-hit {
  background: rgba(76,175,130, 0.25) !important;
}

/* 节点进度条 */
.gest-node-track {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
}

.gest-track-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid #2a3b66;
  transition: all 0.2s;
}

.gest-td-done {
  background: #4caf82;
  border-color: #4caf82;
}

.gest-td-current {
  background: #f8d49d;
  border-color: #f8d49d;
  box-shadow: 0 0 6px rgba(248,212,157,0.6);
}

/* 反馈 */
.gest-feedback {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}

.gest-fb-success {
  background: #1a3a23;
  border: 1px solid #2a6a3a;
  color: #8fe8b0;
}

.gest-fb-fail {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  color: #e89090;
}

.gest-fb-timeout {
  background: #2a2010;
  border: 1px solid #5a4a20;
  color: #e8c870;
}

/* ── 决斗模式特化 ─────────────────────────────────────────── */

.gest-root.gest-duel-mode .gest-stage {
  width: 160px;
  height: 160px;
  border-color: #3a2a1a;
  box-shadow: 0 0 18px rgba(248,120,48,0.15);
}

.gest-root.gest-duel-mode .gest-instruction {
  font-size: 12px;
}

.gest-root.gest-duel-mode .gest-timer-bar {
  height: 5px;
  background: #2a1a0a;
}

/* ── 课堂 gesture 题型外框 ───────────────────────────────── */

.cls-gest-block {
  background: #0e1620;
  border: 1px solid #2a3b66;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
}

.cls-gest-title {
  font-size: 13px;
  color: #f8d49d;
  font-weight: 700;
  margin-bottom: 4px;
}

.cls-gest-desc {
  font-size: 12px;
  color: #8899aa;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ── 响应式 ─────────────────────────────────────────────── */

@media (max-width: 480px) {
  .gest-preview-wrap {
    flex-direction: column;
    align-items: center;
  }

  .gest-preview-svg {
    width: 130px;
    height: 130px;
  }

  .gest-stage {
    width: 170px;
    height: 170px;
  }

  .gest-root.gest-duel-mode .gest-stage {
    width: 140px;
    height: 140px;
  }
}