/* =============================================================
 *  幸運７抽獎系統 — 版面
 *  目標裝置：iPad Pro 12.9" 橫向 (2732×2048, 4:3)
 * ============================================================= */

/* --- 可微調的版面變數：若視窗/按鈕位置要對齊背景，改這裡就好 --- */
:root {
  /* 中央凹槽位置（實機畫面目視校準，對齊背景板凹槽白鈕）*/
  --win-cx: 63.0%;   /* 中心 X */
  --win-cy: 49.6%;   /* 中心 Y */
  --win-d:  40%;     /* 直徑（占舞台寬度）*/
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  /* 禁止選取 / 長按選單 / 點擊藍框，讓它像 App */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}

/* ---------- 舞台：鎖 4:3 並置中 ---------- */
#stage {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* 取「寬」與「高×4/3」較小者，確保完整顯示不裁切、不溢出 */
  width: min(100vw, calc(100dvh * 4 / 3));
  height: min(100dvh, calc(100vw * 3 / 4));
  background-image: var(--bg);      /* 由 JS 帶入，確保預載後才顯示 */
  background-size: cover;
  background-position: center;
}

/* ---------- 中央拉霸視窗 ---------- */
#window {
  position: absolute;
  left: var(--win-cx); top: var(--win-cy);
  width: var(--win-d);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;         /* 圓形遮罩，球條超出的部分裁掉 */
  background: #ffffff;      /* 滾動時球與球之間露出的底色（白色）*/
  cursor: pointer;
}

/* 滾動的球條：垂直堆疊多顆球，用 translateY 位移 */
#reel {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  will-change: transform;
}
.ball {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 球體圖已置中（pic/c/）；略微放大讓球面蓋過視窗邊緣，避免露出白色底邊 */
  background-size: 105%;
  background-repeat: no-repeat;
  background-position: center;
}

/* 抽獎中，視窗輕微發光提示 */
#window.spinning { box-shadow: 0 0 4vw 1vw rgba(255, 238, 170, 0.55); }

/* ---------- 中免單：程式特效 ---------- */
#fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
#fx.show { opacity: 1; }

/* 聚光暗幕：把圓鈕以外的畫面壓暗，讓金色特效跳出來 */
.dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--win-cx) var(--win-cy),
    rgba(15, 9, 0, 0) 16vw,
    rgba(15, 9, 0, 0.55) 26vw,
    rgba(15, 9, 0, 0.72) 60vw);
}

/* 暖金光暈：圍著圓鈕呼吸的柔和光環（取代旋轉光芒）*/
.bloom {
  position: absolute;
  left: var(--win-cx); top: var(--win-cy);
  width: 100vw; height: 100vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 236, 165, 0.0) 14.5vw,
    rgba(255, 222, 130, 0.85) 19vw,
    rgba(255, 198, 86, 0.35) 30vw,
    rgba(255, 190, 70, 0.0) 46vw);
  mix-blend-mode: screen;
}
#fx.show .bloom { animation: bloomBreathe 2.6s ease-in-out infinite; }
@keyframes bloomBreathe {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

/* 圓鈕外的脈動金光環 */
.ring {
  position: absolute;
  left: var(--win-cx); top: var(--win-cy);
  width: var(--win-d); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 3vw 0.6vw rgba(255, 214, 110, 0.9),
              0 0 8vw 2vw rgba(255, 190, 70, 0.5);
}
#fx.show .ring { animation: ringPulse 1.4s ease-in-out infinite; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

/* 星芒 ✦（品牌星星，圍著圓鈕閃爍）*/
#sparkles { position: absolute; inset: 0; }
#sparkles i {
  position: absolute;
  width: var(--s); height: var(--s);
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #fffdf5 0%, #ffe9a8 45%, rgba(255,220,120,0) 72%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 6px rgba(255, 214, 110, 0.9));
  opacity: 0;
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes twinkle {
  0%, 100% { transform: translate(-50%, -50%) scale(0)   rotate(0deg);   opacity: 0; }
  50%      { transform: translate(-50%, -50%) scale(1)   rotate(45deg);  opacity: 1; }
}

/* 金花 */
#confetti { position: absolute; inset: 0; }
#confetti i {
  position: absolute;
  top: -6%;
  border-radius: 2px;
  opacity: 0;
  animation-name: fall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0deg);                        opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--drift), 112vh) rotate(var(--spin));  opacity: 1; }
}

/* 中免單時圓鈕本身也亮起來 */
#window.jackpot { box-shadow: inset 0 0 3vw rgba(255, 220, 120, 0.7); }

/* ---------- 重抽按鈕（右下角）---------- */
#replay {
  position: absolute;
  right: 4%; bottom: 5%;
  width: 14%;
  transform: scale(0.6);
  transform-origin: bottom right;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  filter: drop-shadow(0 0.5vh 0.8vh rgba(0,0,0,0.3));
}
#replay.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
#replay.show:active { transform: scale(0.94); }

/* ---------- 載入畫面 ---------- */
#loader {
  position: fixed; inset: 0;
  z-index: 100;
  background: #e9dcc0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}
#loader.done { opacity: 0; pointer-events: none; }
.loader-box { text-align: center; width: 60%; max-width: 520px; }
.loader-title {
  font-size: 5vh; font-weight: 900; color: #8a7434;
  letter-spacing: 0.1em; margin-bottom: 4vh;
}
.loader-bar {
  width: 100%; height: 1.6vh;
  background: rgba(0,0,0,0.12); border-radius: 999px; overflow: hidden;
}
#loader-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, #c9a24a, #8a7434);
  border-radius: 999px; transition: width 0.2s ease;
}
#loader-text { margin-top: 2vh; color: #8a7434; font-size: 2.4vh; }