/* 
   🌲 Silvan Order (森之規律) - Standard CSS Production Version v3.6
   此檔案為全功能補齊版，對應 _LuckyDrawOverlay.php 與 CheckCart.php。
   整合了原始設計資產與 Tailwind Premium 優化數值。
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --silvan-deep: #0a1f15;
  --sunlight-gold: #d4af37;
  --sunlight-bright: #f4d03f;
  --silvan-mist: #6b9080;
  --lucky-gold: #CA8A04;
  --lucky-gold-dark: #A16207;
  --lucky-shadow-md: 0 4px 14px 0 rgba(202, 138, 4, 0.39);
  --lucky-shadow-lg: 0 6px 20px rgba(202, 138, 4, 0.45);
  --ease-forest: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 1. 全域劇場遮罩與主體 */
.lucky-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(15px);
  overflow: hidden;
}

.silvan-theater {
  position: relative;
  width: 85vw;
  max-width: 1000px;
  height: 85vh;
  max-height: 720px;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  background: radial-gradient(circle at 50% 50%, rgba(10, 31, 21, 0.98) 0%, rgba(5, 10, 8, 1) 100%);
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
}

/* 2. 階段一：品牌介紹畫面 */
.silvan-intro-screen {
  position: absolute;
  inset: 0;
  z-index: 1000;
  background-color: var(--silvan-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-brand-title {
  font-family: 'Cormorant', serif;
  font-weight: 300;
  color: var(--sunlight-gold);
  line-height: 1.1;
}

.main-brand-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--silvan-mist);
  letter-spacing: 0.6em;
  text-transform: uppercase;
}

.silvan-tagline {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: #e8d5a3;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  opacity: 0.6;
}

.start-blessing-btn {
  background: transparent;
  border: 1px solid var(--sunlight-gold);
  color: var(--sunlight-gold);
  padding: 18px 70px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5em;
  cursor: pointer;
  margin-top: 70px;
  transition: all 0.6s var(--ease-forest);
  position: relative;
  z-index: 1010;
}

.start-blessing-btn:hover {
  background: var(--sunlight-gold);
  color: var(--silvan-deep);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
}

/* 3. 轉盤與標題區塊 */
.silvan-wheel-area {
  flex-grow: 1; /* 桌機：撐滿剩餘空間讓轉盤垂直置中 */
}

.theater-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 35px;
  z-index: 10;
}

.lucky-wheel-wrapper {
  position: relative;
  width: min(340px, 45vh);
  height: min(340px, 45vh);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.lucky-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 外圈：奢華金暈光 + 深邃陰影（Premium Dark + Gold） */
  filter:
    drop-shadow(0 0 22px rgba(212,175,55,0.3))
    drop-shadow(0 0 8px  rgba(212,175,55,0.15))
    drop-shadow(0 8px 28px rgba(0,0,0,0.65));
}

.wheel-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  /* ═══════════════════════════════════════════════════════
     Silvan Order 8 扇形深邃配色 (順時針)
     設計哲學：墨綠為底蘊，各色象徵自然不同面向
     搭配金色分割線與液態玻璃光暈，呈現工匠感
     ─────────────────────────────────────────────────────
     星辰(星河靛藍) → 大地(沃土琥珀) → 森之禮(古老翠綠) → 紅霓(暮色緋紅)
     月光(月湖鋼青) → 森林(翡翠深林) → 蝴蝶(薄暮紫羅) → 陽光(琥珀暖金)
     ═══════════════════════════════════════════════════════ */
  background:
    /* [第三層] 液態玻璃：左上角光源反射，模擬玻璃折射感 */
    radial-gradient(ellipse 65% 55% at 36% 26%, rgba(255,245,180,0.11) 0%, transparent 65%),
    /* [第二層] 深邊暈：邊緣收攏深色，強化圓盤立體感 */
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,0.28) 100%),
    /* [第一層b] 金色扇形分割線：每 45° 一條 0.7° 寬奢華金線 */
    repeating-conic-gradient(
      rgba(212,175,55,0.65) 0deg 0.7deg,
      transparent 0.7deg 45deg
    ),
    /* [第一層a] 8 扇形 Silvan Order 深邃配色 */
    conic-gradient(
      from 0deg,
      #1c1f3a 0deg 45deg,    /* 星辰 - 星河靛藍  */
      #3a2208 45deg 90deg,   /* 大地 - 沃土琥珀  */
      #0d2e1a 90deg 135deg,  /* 森之禮 - 古老翠綠 */
      #3a0f1c 135deg 180deg, /* 紅霓 - 暮色緋紅  */
      #0d2535 180deg 225deg, /* 月光 - 月湖鋼青  */
      #0a2418 225deg 270deg, /* 森林 - 翡翠深林  */
      #22103a 270deg 315deg, /* 蝴蝶 - 薄暮紫羅  */
      #2e1c00 315deg 360deg  /* 陽光 - 琥珀暖金  */
    );
  /* 外框：雙層金邊 — 主框 + 外圈描邊 */
  border: 2.5px solid rgba(212,175,55,0.8);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),           /* 黑邊強化圓盤感 */
    inset 0 0 0 1px rgba(212,175,55,0.12), /* 內側微金框 */
    inset 0 0 40px rgba(0,0,0,0.25);     /* 內部深陰影增加立體 */
}

/* 液態玻璃反光層：不隨轉盤旋轉，固定光源位置 */
.lucky-wheel-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* 模擬左上方打光的弧形玻璃高光 */
  background: radial-gradient(ellipse 55% 45% at 32% 24%, rgba(255,250,200,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 15;
}

/* 中心轉軸：奢華金屬旋鈕（Profile 1 預設，不隨轉盤旋轉） */
.lucky-wheel-wrapper::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff8d4, #d4af37 40%, #8b6914 72%, #4a3800);
  border: 1.5px solid rgba(255,240,160,0.6);
  box-shadow:
    0 2px 12px rgba(0,0,0,0.6),
    0 0 16px rgba(212,175,55,0.45),
    inset 0 1px 2px rgba(255,255,200,0.35);
  z-index: 20;
  pointer-events: none;
}

/* ── 中心 Logo：品牌蝴蝶 M（Profile 2 / 3 顯示，Profile 1 隱藏） ── */
.wheel-center-logo {
  display: none;                  /* Profile 1 預設隱藏 */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  z-index: 25;
  pointer-events: none;
  /* 外發光 */
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.5)) drop-shadow(0 2px 8px rgba(0,0,0,0.7));
}
.wheel-center-logo .wheel-center-svg {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* Profile 2：顯示 SVG Logo，隱藏 ::after 金屬旋鈕 */
.wheel-profile-2 .wheel-center-logo { display: block; }
.lucky-wheel-wrapper.wheel-profile-2::after { display: none; }

/* Profile 3：顯示 SVG Logo，隱藏 ::after 金屬旋鈕 */
.wheel-profile-3 .wheel-center-logo { display: block; }
.lucky-wheel-wrapper.wheel-profile-3::after { display: none; }

.wheel-segment-label {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 35px;
  font-family: 'Cormorant', serif;
  font-size: 18px;
  font-weight: 600;
  /* 奢華金文字 — 與深色扇形形成高對比，呼應金緻大地風格 */
  color: var(--sunlight-gold);
  text-shadow:
    0 0 8px  rgba(0,0,0,1),
    0 2px 5px rgba(0,0,0,1),
    0 1px 2px rgba(0,0,0,0.9);
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║          轉盤風格系統 — Wheel Profile System                ║
   ║  Profile 1 (預設): Silvan Order — 金緻大地 + 液態玻璃        ║
   ║  Profile 2:        Bloom Fashion — 年輕時尚 + 玻璃感輕盈     ║
   ║                                                              ║
   ║  切換方式：在 .lucky-wheel-wrapper 加上對應 class            ║
   ║    Profile 1: (無額外 class，為預設)                         ║
   ║    Profile 2: class="lucky-wheel-wrapper wheel-profile-2"   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────────
   Profile 2: Bloom Fashion
   靈感：玻璃感時尚、韓系質感、柔和漸層、不帶賭博感
   色系：中飽和度柔彩（薰衣草 / 陶橘 / 薄荷 / 珊瑚 / 粉藍 / 鼠尾草 / 蘭花 / 蜂蜜）
   框線：半透明白邊（替換奢華金）
   中心：玫瑰金白光旋鈕
   ────────────────────────────────────────────────────────────── */
.wheel-profile-2 .lucky-wheel {
  filter:
    drop-shadow(0 0 18px rgba(212,130,170,0.35))
    drop-shadow(0 6px 22px rgba(0,0,0,0.22));
}

.wheel-profile-2 .wheel-container {
  background:
    /* 玻璃感：強白色頂部光源反射（比 Profile 1 更亮更輕盈） */
    radial-gradient(ellipse 68% 58% at 34% 24%, rgba(255,255,255,0.28) 0%, transparent 58%),
    /* 輕邊暈：淡化邊緣，不壓重 */
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,0.08) 100%),
    /* 白色半透明分割線（替換金線，更輕盈） */
    repeating-conic-gradient(
      rgba(255,255,255,0.60) 0deg 0.5deg,
      transparent 0.5deg 45deg
    ),
    /* 8 扇形 Bloom Fashion 柔彩配色 */
    conic-gradient(
      from 0deg,
      #8b7bb8 0deg 45deg,    /* 星辰 - 薰衣草紫  */
      #d4885a 45deg 90deg,   /* 大地 - 暖陶橘    */
      #5aaa8a 90deg 135deg,  /* 森之禮 - 薄荷鼠尾 */
      #d4607a 135deg 180deg, /* 紅霓 - 珊瑚玫瑰  */
      #6898d4 180deg 225deg, /* 月光 - 粉矢車菊  */
      #6ab88a 225deg 270deg, /* 森林 - 鼠尾草綠  */
      #b878c8 270deg 315deg, /* 蝴蝶 - 蘭花紫    */
      #d4b048 315deg 360deg  /* 陽光 - 暖蜂蜜金  */
    );
  /* 邊框：柔和白粉邊（取代金邊） */
  border: 2.5px solid rgba(255,255,255,0.75);
  box-shadow:
    0 0 0 1px rgba(200,150,175,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 0 30px rgba(255,255,255,0.06);
}

/* 液態玻璃反光層：更強白色高光（年輕感） */
.wheel-profile-2 .lucky-wheel-wrapper::before {
  background: radial-gradient(ellipse 58% 48% at 30% 22%, rgba(255,255,255,0.30) 0%, transparent 60%);
}

/* 中心旋鈕：玫瑰金白光質感 */
.wheel-profile-2 .lucky-wheel-wrapper::after {
  background: radial-gradient(circle at 34% 30%, #ffffff, #ffd8e8 38%, #e8a0b8 68%, #c07898);
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow:
    0 2px 10px rgba(0,0,0,0.18),
    0 0 14px rgba(210,130,165,0.45),
    inset 0 1px 3px rgba(255,255,255,0.7);
}

/* 扇區標籤：白色文字（柔彩底色對比用） */
.wheel-profile-2 .wheel-segment-label {
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(0,0,0,0.45),
    0 2px 4px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.3);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────────────────────
   Profile 3：森之規律 · 晨霧 (Silvan Order · Morning Mist)
   中間版本：比 Profile 1 通透，比 Profile 2 沉穩
   靈感：森林黎明，晨霧漫散時第一縷金光穿透翠冠的瞬間
   色系：中深度（藏靛 / 赭棕 / 翠柏 / 緋紅 / 墨湖 / 常青 / 暮紫 / 棗金）
   框線：金邊（略亮於 Profile 1）
   中心：翡翠玉金旋鈕
   ────────────────────────────────────────────────────────────── */

.wheel-profile-3 .lucky-wheel {
  filter:
    drop-shadow(0 0 20px rgba(212,175,55,0.28))
    drop-shadow(0 0 8px rgba(180,220,160,0.12))
    drop-shadow(0 8px 28px rgba(0,0,0,0.55));
}

.wheel-profile-3 .wheel-container {
  background:
    /* 液態玻璃頂光：溫潤金白（中強度，介於 P1/P2 之間） */
    radial-gradient(ellipse 66% 56% at 35% 25%, rgba(255,248,190,0.14) 0%, transparent 62%),
    /* 邊緣暗化：比 P2 深，比 P1 淺 */
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,0.22) 100%),
    /* 金色分割線（中透明度） */
    repeating-conic-gradient(
      rgba(212,175,55,0.55) 0deg 0.65deg,
      transparent 0.65deg 45deg
    ),
    /* 8 扇形：中深度森林調色盤 */
    conic-gradient(
      from 0deg,
      #263050 0deg 45deg,    /* 星辰 - 藏靛藍  */
      #5c3818 45deg 90deg,   /* 大地 - 赭石棕  */
      #1a4c2c 90deg 135deg,  /* 森之禮 - 翠柏綠 */
      #6b2038 135deg 180deg, /* 紅霓 - 緋紅    */
      #1a3e5a 180deg 225deg, /* 月光 - 墨湖藍  */
      #164830 225deg 270deg, /* 森林 - 常青藤  */
      #3c1e68 270deg 315deg, /* 蝴蝶 - 暮紫    */
      #583200 315deg 360deg  /* 陽光 - 棗色金  */
    );
  border: 2.5px solid rgba(212,175,55,0.72);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(212,175,55,0.13),
    inset 0 0 36px rgba(0,0,0,0.20);
}

/* 液態玻璃光源（中強度：比 P1 稍亮，比 P2 內斂） */
.lucky-wheel-wrapper.wheel-profile-3::before {
  background: radial-gradient(ellipse 56% 46% at 31% 23%, rgba(255,250,195,0.13) 0%, transparent 58%);
}

/* 中心旋鈕：翡翠玉金質感 */
.lucky-wheel-wrapper.wheel-profile-3::after {
  background: radial-gradient(circle at 35% 31%, #f8f4d8, #d4af37 38%, #8b7028 70%, #3a2a00);
  border: 1.5px solid rgba(255,238,140,0.65);
  box-shadow:
    0 2px 10px rgba(0,0,0,0.45),
    0 0 12px rgba(212,175,55,0.30),
    inset 0 1px 3px rgba(255,240,160,0.50);
}

/* 扇區標籤：暖金色文字（大地感） */
.wheel-profile-3 .wheel-segment-label {
  color: #e8c84a;
  text-shadow:
    0 0 10px rgba(0,0,0,1),
    0 2px 6px rgba(0,0,0,1),
    0 1px 2px rgba(0,0,0,0.92);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.spin-btn-box {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.lucky-button-refined { 
  background: transparent; 
  border: 1px solid rgba(212, 175, 55, 0.6); 
  color: var(--sunlight-gold); 
  padding: 15px 40px; 
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700; 
  letter-spacing: 0.5em;
  cursor: pointer; 
  transition: all 0.5s;
}

.lucky-button-refined:hover {
  background: var(--sunlight-gold);
  color: var(--silvan-deep);
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

/* 4. 獎品格點系統 */
.silvan-prize-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
  padding: 0 20px 20px;
  max-width: 614px; /* 桌機：6 個 85px 卡片 = 570px + 左右 padding 40px = 610px，+4 緩衝 */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.silvan-prize-card { 
  width: 85px;
  height: 85px; 
  background: rgba(10,31,21,0.85); 
  border: 1px solid rgba(212,175,55,0.3); 
  border-radius: 4px; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  overflow: hidden; 
  position: relative;
  transition: all 0.4s var(--ease-forest);
}

.silvan-prize-card:hover {
  transform: translateY(-8px) scale(1.05);
  border-color: var(--sunlight-gold);
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.2);
}

.silvan-illustration {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05140c;
}

/* 5. 階段三：結果揭曉層 */
.silvan-result-overlay {
  position: absolute;
  inset: 0;
  z-index: 5000;
  background: rgba(5, 10, 8, 0.98);
  backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-3d-card {
  position: relative;
  width: 360px;
  padding: 60px 40px;
  background: var(--silvan-deep);
  border: 1px solid var(--sunlight-gold);
  text-align: center;
  box-shadow: 0 0 120px rgba(212, 175, 55, 0.2);
  overflow: hidden;
}

.silvan-corner-deco::before,
.silvan-corner-deco::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--sunlight-gold);
  opacity: 0.6;
}

.silvan-corner-deco-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.silvan-corner-deco-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.legacy-header {
  color: var(--sunlight-bright);
  letter-spacing: 0.6em;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 0 15px rgba(244, 208, 63, 0.4);
}

.legacy-title {
  color: #ffffff;
  font-family: 'Cormorant', serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
  font-weight: 300;
}

.legacy-msg {
  color: var(--sunlight-gold);
  font-size: 12px;
  letter-spacing: 0.4em;
  opacity: 0.8;
  font-style: italic;
  line-height: 1.8;
}

/* 6. 森之祝福整合面板 - 結帳頁專用 */
.blessing-panel-v3 {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px dashed var(--lucky-gold);
  background: linear-gradient(to right, rgba(202, 138, 4, 0.05), transparent);
  padding: 1rem;
  transition: all 0.5s;
  box-shadow: var(--lucky-shadow-md);
  backdrop-filter: blur(4px);
}

.blessing-panel-v3:hover {
  background-color: rgba(202, 138, 4, 0.1);
  transform: translateY(-0.125rem);
  box-shadow: var(--lucky-shadow-lg);
}

.blessing-icon-gold {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, var(--lucky-gold), var(--lucky-gold-dark));
  color: white;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.blessing-btn-shiny {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.75rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: white;
  background: linear-gradient(to bottom right, var(--lucky-gold), var(--lucky-gold-dark));
  border-radius: 0.5rem;
  box-shadow: var(--lucky-shadow-md);
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}

.blessing-btn-shiny:hover { transform: scale(1.05); box-shadow: var(--lucky-shadow-lg); }

.blessing-btn-shiny::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%; width: 20%; height: 200%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: rotate(30deg);
  transition: all 0.7s ease-in-out;
}

.blessing-btn-shiny:hover::after { left: 120%; }

.cancel-x-wrapper {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #9ca3af;
  background-color: transparent;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.cancel-x-wrapper:hover {
  background-color: #fef2f2;
  color: #ef4444;
  transform: rotate(90deg);
}

/* ── v2.6 新增：inline style → CSS class（支援 @media RWD） ── */

/* 全局關閉按鈕 */
.silvan-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6000;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(10, 31, 21, 0.7);
  color: var(--sunlight-gold);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}

.silvan-close-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--sunlight-gold);
}

/* 階段一：Logo 圖示容器 */
.silvan-logo-icon {
  color: var(--sunlight-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.silvan-logo-svg {
  width: 64px;
  height: 64px;
}

/* 階段一：品牌大標題覆蓋值（與 .main-brand-title 合用） */
.silvan-title-intro {
  font-size: 64px;
  letter-spacing: 0.4em;
}

/* 階段一：SILVAN ORDER 副標 */
.silvan-subtitle-intro {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: var(--silvan-mist);
  letter-spacing: 0.8em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* 轉盤頂部指針三角（▼）
   top: 0 → 底邊貼齊轉盤頂端，尖端插入轉盤約 14px，明確重疊在外圈上 */
.silvan-wheel-pointer-tri {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid var(--sunlight-gold);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
  z-index: 10;
}

/* 結果卡片分隔線 */
.silvan-divider {
  width: 48px;
  height: 1px;
  background: var(--sunlight-gold);
  opacity: 0.4;
  margin: 10px auto 0;
}

/* 結果圖片容器 */
.silvan-result-image-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  overflow: hidden;
}

/* 結果 SVG 圖示容器 */
.silvan-result-icon-wrap {
  background: var(--silvan-deep);
}

/* 結果 SVG 圖示（一般） */
.silvan-result-svg {
  width: 80px;
  height: 80px;
  color: var(--sunlight-gold);
  opacity: 0.7;
}

/* 結果 SVG 圖示（大，Nothing 蝴蝶） */
.silvan-result-svg--lg {
  width: 110px;
  height: 110px;
}

/* 結果文字內容區 */
.silvan-result-content {
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════════════════════════════
   RWD 手機版覆蓋
   斷點：max-width: 430px（對應主流 6.1–6.3 吋手機 375px–430px）
   對應元件：_LuckyDrawOverlay.php
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* ── 全局遮罩 ──────────────────────────────────────────────
     桌機：flex + 置中對齊，有留邊；手機：全螢幕撐滿             */
  .lucky-draw-overlay {
    align-items: stretch;      /* 子元素撐滿高度 */
    justify-content: stretch;  /* 子元素撐滿寬度 */
  }

  /* ── 劇場主體 ──────────────────────────────────────────────
     桌機：85vw × 85vh，圓角；手機：100vw × 100dvh 全版無圓角   */
  .silvan-theater {
    width: 100vw;
    height: 100dvh;   /* dvh = dynamic viewport height，解決手機底欄問題 */
    max-width: 100%;
    max-height: none;
    border-radius: 0;
    padding: 16px 14px;
  }

  /* ── 全局關閉按鈕 ─────────────────────────────────────────
     手機縮小至 36px，並靠近角落                                 */
  .silvan-close-btn {
    width: 36px;
    height: 36px;
    top: 10px;
    right: 10px;
    font-size: 18px;
  }

  /* ══ 階段一：品牌介紹 ══════════════════════════════════════ */

  /* 大標題：clamp 動態縮放，375px 下約 28px，430px 下約 34px */
  .silvan-title-intro {
    font-size: clamp(28px, 8vw, 44px);
    letter-spacing: 0.2em;
  }

  /* SILVAN ORDER 副標：縮小字體與間距 */
  .silvan-subtitle-intro {
    font-size: 9px;
    letter-spacing: 0.5em;
  }

  /* Logo SVG 縮小 */
  .silvan-logo-svg {
    width: 44px;
    height: 44px;
  }

  /* 點擊開啟祝福按鈕：縮小 padding 與字體 */
  .start-blessing-btn {
    padding: 14px 36px;
    font-size: 12px;
    letter-spacing: 0.3em;
    margin-top: 40px;
  }

  /* 自然·精緻·永恆 標語：縮小間距 */
  .silvan-tagline {
    gap: 14px;
    font-size: 9px;
    letter-spacing: 0.4em;
  }

  /* ══ 階段二：轉盤主舞台 ════════════════════════════════════ */

  /* Stage 2/3 外層 flex 容器：
     桌機 flex-start（wheel area flex-grow 撐滿）；
     手機改 space-between，讓標題 / 轉盤 / 按鈕 / 獎品格點垂直均分 */
  .silvan-stage-wrap {
    justify-content: space-between;
  }

  /* 標題區：縮小下方間距 */
  .theater-header {
    margin-bottom: 8px;
  }

  /* 品牌標題（階段二小版本） */
  .main-brand-title {
    font-size: 20px;
    letter-spacing: 0.2em;
  }

  /* SILVAN ORDER 副標（階段二） */
  .main-brand-subtitle {
    font-size: 8px;
    letter-spacing: 0.35em;
  }

  /* 核心互動區（含轉盤）：
     桌機 flex-grow:1 讓轉盤垂直置中；
     手機取消 flex-grow，避免撐出大量空白，由 space-between 取代 */
  .silvan-wheel-area {
    flex-grow: 0;
    padding: 6px 0;
  }

  /* 轉盤外框：手機放大至 ~280px（375px 下 72vw = 270px） */
  .lucky-wheel-wrapper {
    width: min(300px, 72vw);
    height: min(300px, 72vw);
  }

  /* 扇區標籤：縮小字體與上移 */
  .wheel-segment-label {
    font-size: 12px;
    padding-top: 20px;
    font-weight: 700;
  }

  /* 中心轉軸：手機縮小 */
  .lucky-wheel-wrapper::after {
    width: 28px;
    height: 28px;
  }

  /* 液態玻璃反光層：手機同樣適用，無需額外調整 */
  .lucky-wheel-wrapper::before {
    inset: 0;
  }

  /* 啟動按鈕容器 margin */
  .spin-btn-box {
    margin: 6px 0;
  }

  /* 啟動森之輪 / 領取祝福 按鈕：縮小 */
  .lucky-button-refined {
    padding: 11px 24px;
    font-size: 11px;
    letter-spacing: 0.35em;
  }

  /* 獎品格點：
     桌機 flex wrap，desktop max-width 490px；
     手機改 grid 固定 5 欄（最多 5 or 10 張，1~2 行整齊排列）
     !important 覆蓋桌機 margin-top:auto（flex auto margin 會吸收剩餘空間） */
  .silvan-prize-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0 10px 10px;
    max-width: 100%;
    margin-top: 4px !important;   /* 覆蓋桌機 margin-top: auto */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 獎品卡片：高度固定 56px，寬度由 grid 1fr 決定 */
  .silvan-prize-card {
    width: auto;
    height: 56px;
  }

  /* ══ 階段三：結果揭曉 ══════════════════════════════════════ */

  /* 結果卡片：自適應寬度，最大 360px */
  .result-3d-card {
    width: min(92vw, 360px);
    padding: 32px 20px;
  }

  /* 獎品圖片框縮小 */
  .silvan-result-image-wrap {
    width: 120px;
    height: 120px;
    margin-bottom: 18px;
  }

  /* SVG 插圖（一般） */
  .silvan-result-svg {
    width: 60px;
    height: 60px;
  }

  /* SVG 插圖（Nothing 蝴蝶大版） */
  .silvan-result-svg--lg {
    width: 80px;
    height: 80px;
  }

  /* 標題文字縮小 */
  .legacy-header {
    font-size: 9px;
    letter-spacing: 0.4em;
  }

  .legacy-title {
    font-size: 14px;
  }

  .legacy-msg {
    font-size: 11px;
  }

  /* 文字與按鈕間距縮小 */
  .silvan-result-content {
    margin-bottom: 20px;
  }

}