/* OrbitalePressStart · “点击或按任意键开始”提示组件 v1.0.0
 * 选择器均以 .ops- 为前缀，只作用于组件节点；根节点背景透明、铺满容器、不拦截点击。
 * 文字为实时文本（可改），细竖线由 CSS 生成，均不依赖图片。 */

.ops-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  contain: layout style;
  -webkit-user-select: none;
  user-select: none;
}

.ops-root .ops-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  --ops-text: #d8fbfb;
  --ops-glow: #9ff3f3;
  --ops-tick: #c9ffff;
  --ops-error: #f41915;
  --ops-ls: 0.55em;
  --ops-bright: 0;
  --ops-extra-ls: 0em;
  will-change: opacity, transform;
}

/* 文字背后的细竖线：两端渐隐 */
.ops-root .ops-ticks {
  position: absolute;
  left: 50%;
  top: 0;
  width: 190%;
  height: 1.9em;
  transform: translate(-50%, -0.3em);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ops-tick) 45%, transparent) 0 1px, transparent 1px 1.08em);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  z-index: 0;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .ops-root .ops-ticks { background: repeating-linear-gradient(90deg, rgba(201, 255, 255, 0.45) 0 1px, transparent 1px 1.08em); }
}
/* 可选进度：已完成部分的竖线更亮 */
.ops-root .ops-ticks-on {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--ops-tick) 0 1px, transparent 1px 1.08em);
}

.ops-root .ops-text {
  position: relative;
  z-index: 1;
  padding-left: calc(var(--ops-ls) + var(--ops-extra-ls)); /* 抵消末字后的字距，保持视觉居中 */
  letter-spacing: calc(var(--ops-ls) + var(--ops-extra-ls));
  color: var(--ops-text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.3;
  text-shadow:
    0 0.12em 0.5em rgba(0, 0, 0, 0.85),
    0 0 calc(0.3em + 0.9em * var(--ops-bright)) color-mix(in srgb, var(--ops-glow) calc(35% + 55% * var(--ops-bright)), transparent);
  filter: brightness(calc(1 + 0.35 * var(--ops-bright)));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .ops-root .ops-text { text-shadow: 0 0.12em 0.5em rgba(0, 0, 0, 0.85), 0 0 0.6em rgba(159, 243, 243, 0.5); }
}

.ops-root .ops-sub {
  position: relative;
  z-index: 1;
  font-size: 0.55em;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  color: var(--ops-text);
  opacity: 0.6;
  font-family: system-ui, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* 失败（例如宿主尚未就绪）：文字与竖线变为错误色 */
.ops-root.ops-err .ops-text { color: var(--ops-error); }
.ops-root.ops-err .ops-ticks { background: repeating-linear-gradient(90deg, var(--ops-error) 0 1px, transparent 1px 1.08em); }