/* popup-new-ssr.css — SSR 卡池擴張公告 popup
   熱區用百分比、隨圖縮放 / 桌面手機都對得到
   如果按錯位 → 調 .popup-new-ssr-hot-close / .popup-new-ssr-hot-cta 的 top/right/bottom/left/width/height
*/

.popup-new-ssr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.popup-new-ssr-overlay.open { opacity: 1; }

.popup-new-ssr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* 2026-06-28：放大、最大 560px、手機自動縮回 viewport */
  max-width: 560px;
  width: 100%;
  transform: scale(0.92);
  transition: transform 0.25s ease;
}
.popup-new-ssr-overlay.open .popup-new-ssr-box { transform: scale(1); }

.popup-new-ssr-img-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
}
.popup-new-ssr-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

/* ── 熱區共通 ──
   2026-06-28：拿掉白色透明 hover、平常完全透明不蓋圖
   hover → 中央有發亮光條從左跑到右、循環、不蓋住圖案
   按下 → 整張圖縮一點點 + 微暗
*/
.popup-new-ssr-hot {
  position: absolute;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
}
.popup-new-ssr-hot:focus { outline: none; }

/* hover 光條（::before 模擬一條跑動的高光）
   2026-06-28：範圍縮到按鈕中間 2/3、不再跑到貼邊 */
.popup-new-ssr-hot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 17%;
  transform: translateY(-50%);
  width: 20%;
  height: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 15%,
    rgba(255, 213, 79, 0.9) 50%,
    rgba(255, 255, 255, 0.0) 85%,
    transparent 100%
  );
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
}
.popup-new-ssr-hot:hover::before {
  animation: popup-shine-run 1.3s ease-in-out infinite;
}
/* 中間 2/3 範圍：left 17% → 63%、bar 寬 20% → 視覺中心在 27%~73% 之間 */
@keyframes popup-shine-run {
  0%   { left: 17%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 63%; opacity: 0; }
}

/* 按下時整張圖縮 + 微暗、給按擊回饋 */
.popup-new-ssr-img-wrap:has(.popup-new-ssr-hot:active) .popup-new-ssr-img {
  transform: scale(0.99);
  filter: brightness(0.92);
  transition: transform 0.1s ease, filter 0.1s ease;
}
.popup-new-ssr-img {
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* × 關閉鈕：圖右上角（往左移、不貼邊） */
.popup-new-ssr-hot-close {
  top: 2%;
  right: 7%;
  width: 10%;
  height: 7%;
}

/* 「立即抽卡」CTA 鈕：圖底部置中（往上移 + 縮窄） */
.popup-new-ssr-hot-cta {
  bottom: 8%;
  left: 27%;
  width: 46%;
  height: 8%;
}

/* ── 永遠不顯示 ── */
.popup-new-ssr-never {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 20px;
}
.popup-new-ssr-never-cb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #ffd54f;
}