@charset "utf-8";

/* ---------- Reset & 變數 ---------- */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --brand-red:#e93e38;
  --ink:#686867;

  /* HorseYear 標題寬度與上下位移 */
  --xmas-width-percent: 95%;
  --xmas-max-width: 650px;
  --xmas-dy: -188px;

  /* 場景留白 */
  --stage-top-gap: 180px;
  --stage-bottom-gap: 10px;
  --stage-img-height: 520px;

  /* 彈窗底圖大小 */
  --lose-size: 80vmin;
  --win-size: 80vmin;

  /* 紅包袋大小 / 間距（可調參數） */
  --rb-size: 200px;     /* 紅包袋大小（桌機） */
  --rb-gap-x: 18px;     /* 左右間距（桌機） */
  --rb-gap-y: 16px;     /* 上下間距（桌機） */
  --rb-wrap-w: 600px;   /* 整個紅包區塊寬度（桌機） */
}

@media (max-width:480px){
  :root{
    --xmas-width-percent: 110%;
    --xmas-max-width: 520px;
    --xmas-dy: -10px;

    --stage-top-gap: 10px;
    --stage-bottom-gap: 10px;
    --stage-img-height: 580px;

    --win-size: 90vmin;

    --rb-size: 118px;   /* 紅包袋大小（手機） */
    --rb-gap-x: 12px;   /* 左右間距（手機） */
    --rb-gap-y: 10px;   /* 上下間距（手機） */
    --rb-wrap-w: 100% /* ✅ 手機整排寬度 */
  }
}

html,body{height:100%; overflow-x:hidden}

/* ---------- 全頁底層：bg1.jpg ---------- */
body{
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  min-height:100vh;
  background:url('img/bg1.jpg') center/cover no-repeat fixed;
  display:flex;
  justify-content:center;
  align-items:stretch;
  color:var(--ink);
}

/* ---------- 固定導覽 ---------- */
.nav{
  position:fixed;
  left:0;right:0;top:0;
  height:44px;
  background:var(--brand-red);
  display:flex;
  align-items:center;
  padding:0 12px;
  z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,.2)
}
.nav-logo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.nav-logo img{ height:25px; display:block; }
.nav-logo span{ color:#fff; font-size:14px; }

/* ---------- 內容容器 ---------- */
.app-container{
  width:100%;
  max-width:1000px;
  min-height:100vh;
  margin-top:44px;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px 16px 48px;
}

/* ---------- 場景 ---------- */
.stage{
  position:relative;
  width:100%;
  padding-top: var(--stage-top-gap);
  padding-bottom: var(--stage-bottom-gap);
  isolation:isolate;
}

/* 背景圖（不裁切、整張顯示） */
.stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:-4%;
  transform:translateX(-50%);
  width:min(1100px, 100%);
  background:url("img/roundbg_pc3.png") center center / contain no-repeat;
  aspect-ratio:1600 / 1040;
  height:auto;
  z-index:1;
  pointer-events:none;
}
@media (max-width:480px){
  .stage::before{
    width:min(1080px, 100%);
    background-image:url("img/roundbg_m3.png");
    aspect-ratio:1080 / 1080;
  }
}

/* HorseYear 標題 */
.stage-HorseYear{
  position:relative;
  z-index:4;
  width:100%;
  display:flex;
  justify-content:center;
  transform: translateY(var(--xmas-dy));
  margin-bottom:80px;
}
.stage-HorseYear img{
  width:min(var(--xmas-width-percent), var(--xmas-max-width));
  height:auto;
  display:block;
  animation: hy-float 3.2s ease-in-out infinite;
  will-change: transform, filter;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.18));
}
@keyframes hy-float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

/* ---------- 紅包袋列（最上層） ---------- */
.redbag-boxes{
  position:relative;
  z-index:8;

  width:min(var(--rb-wrap-w), 96%);
  margin: 18px auto 0;

  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rb-gap-y) var(--rb-gap-x);

  justify-items:center;
  align-items:center;
}

/* ✅ 手機：紅包袋跟著容器 RWD（不偏右、不超版） */
@media (max-width:480px){
  .redbag-boxes{
    width: 100% !important;         /* 吃滿容器 */
    max-width: 100% !important;     /* 不要再卡固定 px */
    margin: 12px auto 0 !important;
    padding: 0 12px !important;     /* 左右留白，避免貼邊/超出 */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-items: center !important;
    align-items: center !important;
    left: auto !important;          /* ✅ 移除你之前用 left 硬推的校正 */
    transform: none !important;
  }

  .redbag{
    width: clamp(90px, 26vw, 118px) !important;  /* ✅ 自動縮放 */
  }
}

.redbag{
  width: var(--rb-size);
  aspect-ratio: 1/1;
  border:none;
  border-radius:18px;
  background:transparent !important;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .12s ease;
  will-change:transform
}

.redbag:hover{transform:translateY(-1px)}
.redbag:active{transform:scale(.96)}
.redbag:hover,.redbag:focus,.redbag:active{
  background:transparent !important;
  box-shadow:none !important;
  outline:none
}
.redbag-icon{
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  /* ✅ 陰影約 50% */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.5));
}

/* hover 輕微抖動 */
.redbag:hover .redbag-icon{ animation:gift-shake .6s ease both }
@keyframes gift-shake{
  0%{transform:translate3d(0,0,0) rotate(0)}
  15%{transform:translate3d(-2px,0,0) rotate(-2deg)}
  30%{transform:translate3d(2px,0,0) rotate(2deg)}
  45%{transform:translate3d(-1.5px,0,0) rotate(-1.5deg)}
  60%{transform:translate3d(1.5px,0,0) rotate(1.5deg)}
  75%{transform:translate3d(-1px,0,0) rotate(-1deg)}
  100%{transform:translate3d(0,0,0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .redbag:hover .redbag-icon{animation:none}
  .redbag,.redbag *{transition:none}
}

/* ---------- 紅包袋下方舞台 ---------- */
.stage-floor{
  position:relative;
  z-index:4;
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:-30px;
}
.stage-floor img{
  width:min(800px, 100%);
  height:auto;
  display:block;
}
@media (max-width:480px){
  .stage-floor{ margin-top:-15px; }
  .stage-floor img{ width:120%; }
}

/* 禮物下方兩行狀態 */
.header-below{ text-align:center; margin:0; }
.header-below #chance-text{
  font-size:clamp(13px,2.6vw,15px);
  opacity:.95;
  margin-top:-40px;
  color:#fff;
}
.header-below .countdown{
  margin:4px auto 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#018358;
  color:#f7efab;
  font-size:12px;
  line-height:1;
}
.countdown .cd-label{
  font-size:11px;
  letter-spacing:.08em;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
}
.countdown .cd-box{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:4px 6px;
  border-radius:4px;
  background:#07613f;
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.countdown .cd-box strong{
  font-size:13px;
  font-weight:700;
  min-width:22px;
  text-align:center;
}
.countdown .cd-box span{ font-size:11px; }
.countdown.ended{ background:#555; }
.countdown.ended .cd-label{ background:transparent; padding:0; }

@media (max-width:480px){
  .header-below #chance-text{ margin-top:6px; }
  .header-below .countdown{ margin-top:2px; padding:5px 6px; gap:4px; }
  .countdown .cd-box{ padding:3px 4px; }
  .countdown .cd-box strong{ font-size:12px; min-width:18px; }
  .countdown .cd-box span{ font-size:10px; }
}

/* ---------- 活動說明（白底圓角） ---------- */
.activity-info{
  position:relative;
  z-index:6;
  --pad-t:28px; --pad-r:70px; --pad-b:28px; --pad-l:70px;
  --title-gap:12px; --h3-mt:16px; --h3-mb:6px;
  --block-gap:.6rem; --list-indent:1.25em; --line:1.7;

  width:100%;
  background:#fff;
  color:#222;
  border-radius:16px;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  margin-top:40px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.info-title{ text-align:center; margin:0 0 var(--title-gap); }
.info-title .pill{
  display:inline-block;
  background:var(--brand-red);
  color:#fff;
  padding:10px 24px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.08em;
  font-size:clamp(18px,2.8vw,20px)
}
.activity-info h3{
  color:#045454;
  font-weight:800;
  font-size:clamp(16px,2.6vw,18px);
  margin:var(--h3-mt) 0 var(--h3-mb);
  text-align:left
}
.activity-info p,
.activity-info ul,
.activity-info ol{ margin:0 0 var(--block-gap); text-align:left }
.activity-info ul,
.activity-info ol{ padding-left:var(--list-indent) }
.activity-info li{ line-height:var(--line) }
.activity-info a{
  color:#e93e38;
  font-weight:800;
  text-decoration:underline
}
.activity-info a:visited,
.activity-info a:hover,
.activity-info a:active,
.activity-info a:focus{ color:#e93e38 }
.activity-info a:focus{
  outline:2px solid rgba(233,62,56,.35);
  outline-offset:2px
}
@media (max-width:480px){
  .activity-info{
    --pad-t:20px; --pad-r:36px; --pad-b:24px; --pad-l:36px;
    --h3-mt:14px; --block-gap:.5rem
  }
}

/* ---------- 共用按鈕 ---------- */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:none;
  border-radius:999px;
  padding:0 24px;
  min-height:44px;
  background:#fa7d08;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  text-align:center;
  line-height:1.2;
  font-size:16px;
  transition: background-color .15s ease, transform .12s ease;
}
@media (max-width:480px){
  .btn{ min-height:48px; padding:0 20px; font-size:17px; }
}
.btn.primary{ background:var(--brand-red); }
.btn.line{ background:#06c755; }
.btn:active{ transform:translateY(1px); }
.btn:not(.primary):not(.line):active{ background:#f33e07; }
.btn.primary:active{ background:#c7312d; }
.btn.line:active{ background:#049b42; }

.hidden{ display:none !important; }

/* ---------- 彈窗 ---------- */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  z-index:2000;
  padding:20px;
  align-items:center;
  justify-content:center;
}
.modal.open{ display:flex; }

.modal-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.modal-content{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:none;
  width:min(var(--lose-size), 92vw);
  aspect-ratio:1 / 1;
  background:#fff;
  transform: scale(1);
  opacity: 1;
}
.modal.open .modal-content{ animation: modal-pop .35s ease-out; }
@keyframes modal-pop{
  0%{ transform:scale(.8); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.modal-content > *{ display:none; }
.modal-content.lose-skin{ background:var(--lose-img) center/contain no-repeat; }
.modal-content.win-skin{
  width:min(var(--win-size), 92vw);
  background:var(--win-img) center/contain no-repeat;
}
.modal-footer{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.button-row{
  width:100%;
  max-width:420px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.button-row .btn{ flex:1 1 0; }
@media (max-width:480px){
  .button-row{ max-width:92vw; flex-direction:column; }
}

/* ---------- 彩帶（Lottie） ---------- */
#confetti{
  position:fixed;
  inset:0;
  z-index:3000;
  pointer-events:none;
  opacity:0;
  transition: opacity .35s ease;
}
#confetti.show{ opacity:1; }

/* 保險：平台/底圖不擋點擊 */
.stage-floor, .stage-floor img{ pointer-events:none; }

/* ==================================================
 * 點選後：畫面中間大紅包袋（放大＋搖晃）
 * ================================================== */
.redbag.is-hidden{ opacity:0 !important; pointer-events:none; }

.center-bag{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scale(.86);
  opacity:0;
  z-index:80;
  pointer-events:none;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.30));
}
.center-bag img{
  width:280px;
  height:auto;
  display:block;
}
.center-bag.show{
  opacity:1;
  animation:
    cb-pop .22s ease forwards,
    cb-wobble-bounce .75s ease-in-out .22s 1;
}
@keyframes cb-pop{
  to{ transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes cb-wobble-bounce{
  0%  { transform: translate(-50%, -50%) scale(1.18) rotate(0deg); }
  12% { transform: translate(-50%, calc(-50% - 6px)) scale(1.18) rotate(-6deg); }
  30% { transform: translate(-50%, -50%) scale(1.18) rotate(6deg); }
  48% { transform: translate(-50%, calc(-50% - 4px)) scale(1.18) rotate(-5deg); }
  66% { transform: translate(-50%, -50%) scale(1.18) rotate(5deg); }
  84% { transform: translate(-50%, calc(-50% - 2px)) scale(1.18) rotate(-3deg); }
  100%{ transform: translate(-50%, -50%) scale(1.18) rotate(0deg); }
}
@media (max-width:480px){
  .center-bag img{ width:220px; }
}

/* ✅ 桌機：紅包袋整組往上移（靠近標題） */
@media (min-width:480px){
  .redbag-boxes{ margin-top:-60px; }
}