/* ========== 基礎 Reset / 工具 ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; }
.hidden { display: none !important; }

/* ========== 導覽列（保留） ========== */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; height: 40px;
  background-color: #6a30a1; display: flex; align-items: center; justify-content: flex-start; z-index: 1000;
}
.nav a { color: #fff; text-decoration: none; font-size: 16px; padding: 5px 10px; }

/* ========== 全域變數（桌機預設數值不變） ========== */
:root{
  /* 天空/地板高度（總和 ≈ 100svh） */
  --sky-h: 65svh;
  --ground-h: 35svh;

  /* 機台與地板距離/微調（越大越上） */
  --floor-f: .14;
  --machine-offset-x: 0px;
  --machine-offset-y: 10px;

  /* 機台比例與最大寬度 */
  --machine-ar-w: 1104; --machine-ar-h: 768;
  --machine-max-w: 1200px; --machine-size: 1.3;
  --machine-top-pad: 2svh;

  /* 卷軸位置/大小 */
  --reels-left: 47.6%; --reels-top: 33.5%;
  --reels-w: 46%; --reels-h: 27%; --reels-gap: 2%;

  /* 開始鍵（機台內定位） */
  --btn-w: 50%;
  --btn-aspect: 840 / 300;
  --btn-x-pct: 50%;
  --btn-y-pct: 1%;
  --btn-nudge-x: -12px;
  --btn-nudge-y: -20px;
  --btn-scale: 1;

  /* 層級與前景漂浮設定 */
  --fx-z: 10001;
  --z-cloud: 9999;
  --float-amp: 10px;
  --float-dur: 4s;
  --float-ease: ease-in-out;

  /* 天空/地板銜接 */
  --ground-fade-h: 26svh;
  --seam-blend-h: 160px;
}

/* ========== 場景與背景 ========== */
.scene { position: relative; min-height: 100svh; overflow: hidden; background: #7f1781; }
.bg { position: absolute; left: 0; right: 0; background: center / cover no-repeat; pointer-events: none; }
.bg.sky { top: 0; height: var(--sky-h); background-image: url("img/bg-sky3.png"); z-index: 0; position: relative; }
.bg.sky::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("img/ball.png") center / cover no-repeat;
  animation: floatY var(--float-dur) var(--float-ease) infinite alternate;
}
.bg.ground { bottom: 0; height: var(--ground-h); background-image: url("img/bg-ground.png"); background-position: center bottom; z-index: 1; }
.bg.ground::before{
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: var(--seam-blend-h);
  background: linear-gradient(to bottom,#7f1781 0%, rgba(246,173,235,.4) 45%, rgba(246,173,235,0) 100%);
}
.bg.ground::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--ground-fade-h)); height: var(--ground-fade-h);
  background: linear-gradient(to bottom, rgba(118,54,193,1) 0%, rgba(118,54,193,0) 100%);
}

/* 前景兩顆（雲/彩球） */
@keyframes floatY { from { transform: translateY(0) } to { transform: translateY(calc(-1 * var(--float-amp))) } }
body::after, .scene::before{
  content: ""; position: fixed; pointer-events: none; z-index: var(--z-cloud);
  width: var(--w); background: center / contain no-repeat var(--img);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
  animation: floatY var(--float-dur) var(--float-ease) infinite alternate;
}
body::after{
  --img: url("img/bg-cloud3.png"); --w: clamp(200px, 48vw, 600px);
  left: -12vw; bottom: -2vh; aspect-ratio: 1124 / 768;
}
.scene::before{
  --img: url("img/bg-cloud4.png"); --w: clamp(180px, 48vw, 600px);
  right: -10vw; bottom: -2vh; aspect-ratio: 1124 / 768;
}

/* ========== 機台本體 ========== */
.machine{
  position: absolute;
  left: calc(50% + var(--machine-offset-x));
  bottom: calc(var(--ground-h) * var(--floor-f) + var(--machine-offset-y));
  transform: translateX(-50%); z-index: 2;
  height: min(
    calc((var(--sky-h) - var(--machine-top-pad)) * var(--machine-size)),
    calc(92vw * var(--machine-ar-h) / var(--machine-ar-w) * var(--machine-size)),
    calc(var(--machine-max-w) * var(--machine-ar-h) / var(--machine-ar-w) * var(--machine-size))
  );
  aspect-ratio: var(--machine-ar-w) / var(--machine-ar-h);
}
.machine-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; filter: brightness(1.04) contrast(1.05); }

/* 卷軸 */
.reels{
  position: absolute; left: var(--reels-left); top: var(--reels-top); transform: translateX(-50%);
  width: var(--reels-w); height: var(--reels-h);
  display: grid; grid-template-columns: repeat(3,1fr); column-gap: var(--reels-gap); pointer-events: none;
}
.reel{
  width: 100%; height: 100%; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(#fff, #f5f5f5); box-shadow: inset 0 10px 20px rgba(0,0,0,.12);
}
.reel img{
  width: 92%; height: 92%; object-fit: contain; user-select: none; pointer-events: none;
  transition: filter .2s, transform .2s;
}
.reel.rolling img{ filter: blur(1px) contrast(1.05); transform: scale(1.02); }

/* 開始鍵（機台內定位） */
.start-btn{
  position: absolute; z-index: 4;
  left: var(--btn-x-pct); bottom: var(--btn-y-pct);
  transform: translate(-50%,0) translate(var(--btn-nudge-x),var(--btn-nudge-y)) scale(var(--btn-scale));
  width: var(--btn-w); aspect-ratio: var(--btn-aspect);
  border: 0; padding: 0; cursor: pointer;
  background: url("img/btn-start.png") center / contain no-repeat;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
  animation: btnFloat 3.2s ease-in-out infinite;
  transition: transform .36s cubic-bezier(.2,.8,.2,1), opacity .24s;
}
.start-btn:hover{ transform: translate(-50%,-2px) translate(var(--btn-nudge-x),var(--btn-nudge-y)) scale(calc(var(--btn-scale)*1.02)); }
.start-btn:active{ transform: translate(-50%,1px)  translate(var(--btn-nudge-x),var(--btn-nudge-y)) scale(calc(var(--btn-scale)*.98)); }
.start-btn[disabled]{ opacity: .65; cursor: not-allowed; }
@keyframes btnFloat{
  0% { transform: translate(-50%,0) translate(var(--btn-nudge-x),var(--btn-nudge-y)) scale(var(--btn-scale)); }
  50%{ transform: translate(-50%,-4px) translate(var(--btn-nudge-x),var(--btn-nudge-y)) scale(var(--btn-scale)); }
  100%{transform: translate(-50%,0) translate(var(--btn-nudge-x),var(--btn-nudge-y)) scale(var(--btn-scale)); }
}

/* 結果泡泡 */
.result{
  position: absolute; left: 50%; bottom: calc(var(--ground-h) + 8px);
  transform: translateX(-50%); z-index: 3; padding: 0; background: transparent; border-radius: 16px; pointer-events: none;
}
.result:not(:empty){
  padding: .9rem 1.25rem;
  font-size: clamp(16px, 3.8vw, 20px);
  font-weight: 800; color: #1f1f1f;
  background: #c7c7c7; border: 2px solid #1f1f1f; border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* ========== FX / Modal ========== */
.fx-layer{ position: fixed; inset: 0; pointer-events: none; z-index: var(--fx-z); }
.win-modal{ position: fixed; inset: 0; display: none; place-items: center; z-index: 10000; }
.win-modal:not(.hidden){ display: grid; }
.win-modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(2px); }
.win-modal__panel{
  position: relative; z-index: 1; width: auto; margin: min(10svh,80px) 16px; background: #ecd5ff;
  border: 2px solid #000; box-shadow: 0 24px 72px rgba(0,0,0,.32); border-radius: 16px;
  padding: 20px 22px 24px; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.win-modal__banner{ display: flex; justify-content: center; width: 100%; margin: 6px 0 12px; }
#winBanner{ width: min(540px, 88vw); max-height: 40svh; height: auto; object-fit: contain; border-radius: 12px; display: block; }

/* 三行排版（字級原樣保留：使用原 clamp 系列） */
.win-title{ display: grid; gap: .25em; margin: 0; text-align: center; }
.win-title .line1{ font-size: clamp(18px, 4.6vw, 22px); font-weight: 900; letter-spacing: .02em; color: #4415d3; }
.win-title .line2{ font-size: clamp(24px, 6.2vw, 32px); font-weight: 900; color: #4415d3; }
.win-title .line2 .amount{ font-size: 1.5em; font-weight: 900; line-height: .9; display: inline-block; transform: translateY(-1px); }
.win-title .line3{ font-size: clamp(14px, 3.8vw, 16px); font-weight: 700; color: #1f1f1f; letter-spacing: .01em; }

.win-modal__actions{ display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.win-modal__actions .btn{
  --btn-w: 200px; --btn-h: 50px;
  display: inline-flex; align-items: center; justify-content: center; width: var(--btn-w); height: var(--btn-h);
  padding: 0 24px; border-radius: 999px; font-weight: 800; border: 2px; background: #b165f0; color: #fff; text-decoration: none;
  transition: filter .15s, background-color .15s;
}
.win-modal__actions .btn:hover{ background: #9a52d4; }
.win-modal__actions .btn.btn-secondary{ --btn-w: 120px; --btn-h: 45px; background: #fff; color: #333; }
.win-modal__actions .btn.btn-secondary:hover{ background: #f2f2f2; }

/* 活動說明 */
.page-tail{
  position: relative; background: linear-gradient(to bottom,#7f1781 0%,#7f1781 45%,#7f1781 70%,#7f1781 85%,#7f1781 100%);
  padding: 24px 0 72px; min-height: 56svh; overflow: hidden;
}
.event-info{
  width: min(760px, 92vw); margin: 0 auto; padding: 20px 22px 24px; border-radius: 16px; background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px); box-shadow: 0 16px 40px rgba(0,0,0,.18); line-height: 1.75; color: #2c3e50;
}
.event-info__title{
  text-align: center; color: #6a30a1; font-weight: 900; font-size: clamp(20px, 3vw, 28px);
  margin: 0 0 14px; padding-bottom: 10px; position: relative;
}
.event-info__title::after{
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 40px; height: 3px; background: currentColor; border-radius: 999px;
}
.event-info__subtitle{
  color: #6a30a1; font-weight: 800; font-size: clamp(16px, 2.4vw, 20px); margin: 18px 0 8px;
  display: flex; align-items: center; gap: .55em;
}
.event-info__subtitle::before{
  content: ""; width: .55em; height: .55em; border-radius: 50%; background: #6a30a1; opacity: .18; box-shadow: 0 0 0 3px rgba(106,61,201,.12);
}
.event-info p{ margin: 6px 0 10px; }
.event-info ol{ margin: 0 0 14px 1.2em; padding: 0; }
.event-info li{ margin: 6px 0; }
.event-info a{ color: #6a30a1; font-weight: 700; text-decoration: underline; }

/* ========== Mobile 主要可調（手機距離調整） ========== */
/* 只要改這四個變數即可微調：--sky-h / --ground-h / --floor-f / --machine-offset-y */
@media (max-width: 430px){
  :root{
    /* ★手機：天空少一點、地板多一點（兩者合計 ≈ 100svh） */
    --sky-h: 52svh;    /* 調大＝天空更多；調小＝地板更多 */
    --ground-h: 48svh; /* 調大＝地板更高，機台看起來更上 */

    /* ★機台踩地位置：越大越靠上（建議 0.26～0.36 區間微調） */
    --floor-f: .33;

    /* ★像素微調（正值＝整組再往上幾 px） */
    --machine-offset-y: 10px;
  }

  /* 活動說明靠近但不蓋住機台（覺得還遠可再加大負值） */
  .page-tail{ margin-top: -48px; padding-top: 72px; }
}

/* 舊瀏覽器備援（不支援 svh） */
@supports not (height: 100svh){
  @media (max-width: 430px){
    :root{ --sky-h: 52vh; --ground-h: 48vh; --floor-f: .30; --machine-offset-y: 10px; }
  }
}

/* 高瘦機型（更高的螢幕比例）微調 */
@media (max-width: 430px) and (max-aspect-ratio: 9/19){
  :root{ --sky-h: 50svh; --ground-h: 50svh; --floor-f: .34; --machine-offset-y: 14px; }
}

/* ========== 返回首頁（機台內 PNG 按鈕） ========== */
:root{
  --home-btn-w: 38%;
  --home-btn-aspect: 1166 / 480;
  --home-btn-x-pct: var(--btn-x-pct);
  --home-btn-y-pct: var(--btn-y-pct);
  --home-btn-nudge-x: var(--btn-nudge-x);
  --home-btn-nudge-y: var(--btn-nudge-y);
  --home-btn-scale: var(--btn-scale);
}
.machine .back-home-btn--inline{
  position: absolute !important;
  left: var(--home-btn-x-pct) !important; bottom: var(--home-btn-y-pct) !important;
  transform:
    translate(-50%,0)
    translate(var(--home-btn-nudge-x),var(--home-btn-nudge-y))
    scale(var(--home-btn-scale)) !important;
  width: var(--home-btn-w) !important; aspect-ratio: var(--home-btn-aspect) !important;
  background: url("img/btn-back.png") center / contain no-repeat !important;
  color: transparent; border: 0; padding: 0; text-decoration: none; display: block; z-index: 4; cursor: pointer;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.machine .back-home-btn--inline:hover{
  transform:
    translate(-50%,-2px)
    translate(var(--home-btn-nudge-x),var(--home-btn-nudge-y))
    scale(calc(var(--home-btn-scale) * 1.02)) !important;
}
.machine .back-home-btn--inline:active{
  transform:
    translate(-50%,1px)
    translate(var(--home-btn-nudge-x),var(--home-btn-nudge-y))
    scale(calc(var(--home-btn-scale) * .98)) !important;
}