/* 首页右上角：单个「立即开玩」按钮，与轮播框连成一体 */

.user-bar {
  /* 与轮播同宽同中线、右对齐；底边正好压在轮播上沿 */
  position: absolute;
  top: var(--carousel-top, 350px);
  left: calc(50% + var(--carousel-offset-x, 0px));
  transform: translate(-50%, -100%);
  width: calc(min(
    calc((100dvh - var(--carousel-top, 350px) - var(--carousel-bottom-gap, 110px)) * var(--carousel-ratio, 1.632)),
    calc(100vw - var(--carousel-margin-x, 4vw) * 2),
    var(--carousel-max-w, 1280px)
  ) * var(--carousel-scale, .72));
  display: flex;
  justify-content: flex-end;
  z-index: 10000;
  pointer-events: none;            /* 只有按钮本身可点 */
}

.user-bar .play-now {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  min-width: 300px;
  height: 48px;
  padding: 0 40px;
  /* 与轮播框同一套边框/圆角，形成"连着"的外观 */
  border: var(--carousel-border-w, 5px) solid var(--carousel-border-color, #fff);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;   /* 上圆角做"凸起"，下角 0 与方形轮播无缝相接 */
  background: rgba(18, 24, 38, .62);
  color: #fff;
  font-family: var(--font, -apple-system, "Microsoft YaHei", sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}

.user-bar .play-now:hover { background: rgba(28, 38, 60, .78); }
.user-bar .play-now:active { transform: translateY(1px); }

/* 窄屏：按钮缩小，仍贴在轮播上沿 */
@media (max-width: 820px) {
  .user-bar .play-now {
    min-width: 200px;
    height: 40px;
    padding: 0 24px;
    font-size: 15px;
    letter-spacing: 2px;
    border-width: 3px;
  }
}

/* 弹窗辅助样式 */
.hp-alert.is-bad { color: #e5484d; }

.hp-link {
  display: inline-block;
  margin-top: 10px;
  color: #4a7dff;
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.hp-link:hover { text-decoration: underline; }


/* ---------- 扫光特效 ---------- */
.user-bar .play-now::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -130%;
  width: 70%;
  height: 220%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .28) 30%,
    rgba(255, 255, 255, .85) 50%,
    rgba(255, 255, 255, .28) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
  animation: play-now-sweep 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: left;
}

@keyframes play-now-sweep {
  0%   { left: -130%; }
  55%  { left: 135%; }
  100% { left: 135%; }
}

@media (prefers-reduced-motion: reduce) {
  .user-bar .play-now::after { animation-duration: 6s; }   /* 只放慢，不隐藏 */
}