/* OrbitaleQTE · 环形 QTE 提示组件 v1.0.0
 * 所有选择器都以 .oqte- 为前缀，只作用于组件自身节点，不修改页面全局样式。
 * 组件根节点背景透明，铺满宿主容器（容器需为定位元素；static 时组件会临时设为 relative）。 */

.oqte-root {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;          /* 输入由 inputTarget 接收，根节点不拦截点击 */
  background: transparent;
  contain: layout style;
  --oqte-hint: #c9ffff;
  --oqte-glow: #c9ffff;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.oqte-root .oqte-btn {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.oqte-root .oqte-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 提示文字：实时文本 + 下方渐隐细线（替代原 B11 文字图片） */
.oqte-root .oqte-hint {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  color: var(--oqte-hint);
  letter-spacing: 0.12em;
  line-height: 1.3;
  padding: 0 0.2em 0.28em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.35);
}
.oqte-root .oqte-hint::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.12em;
  min-height: 1px;
  background: linear-gradient(90deg, transparent, var(--oqte-hint) 20%, var(--oqte-hint) 80%, transparent);
  opacity: 0.6;
}

/* 连点计数：count / total */
.oqte-root .oqte-count {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  color: var(--oqte-hint);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  padding-top: 0.2em;
}

/* 输入反馈：容器边缘极淡光晕 */
.oqte-root .oqte-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(201, 255, 255, 0);
  transition: box-shadow 0.5s ease-out;
}
.oqte-root .oqte-edge.oqte-edge-on {
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--oqte-glow) 18%, transparent);
  transition: box-shadow 0.06s;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .oqte-root .oqte-edge.oqte-edge-on { box-shadow: inset 0 0 70px rgba(201, 255, 255, 0.16); }
}

/* 减少动态效果 */
.oqte-root.oqte-reduced .oqte-edge,
.oqte-root.oqte-reduced .oqte-edge.oqte-edge-on { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .oqte-root .oqte-edge { transition: none; }
}