/* ============================================================
   團購小萌寵｜視覺設計 tokens
   色票：
     --paper   #FFF8EC  米紙底色
     --ink     #3B2A20  烘焙茶色文字
     --marigold#F2A63E  主色（金萱橘）
     --jade    #2F7D6B  成功／確認（吉祥玉綠）
     --berry   #C1483F  提醒／獎勵強調（磚紅）
     --cloud   #FBEFE0  卡片底色
   字體：
     display → Noto Serif TC 900（老字號招牌感）
     body    → Noto Sans TC（大字級，方便 40–50 歲客群閱讀）
   簽名視覺：寵物成長用「集章卡」呈現，呼應台灣人熟悉的集點卡文化
   ============================================================ */

/* ============================================================
   🛡 手機前台防誤觸（scoped，只套遊戲前台，不碰 document/body/後台/viewport）
   ‧ 範圍：#app（主外殼：登入＋6分頁＋彈窗）、#nav（底部6主選單）、#drOv（每日獎勵彈窗）、.guest-invite（做客邀請卡）。
   ‧ 擋：雙擊放大(touch-action:manipulation，不擋雙指pinch)、長按選單/選字(user-select/touch-callout)、圖片拖曳(user-drag)。
   ‧ 排除：input/textarea/select/contenteditable 一律還原可選取可輸入。
   ‧ 右鍵/原生拖曳的攔截由 app.js 只綁在這些容器上（非 document）。
   ============================================================ */
#app,#nav,#drOv,.guest-invite,.guest-log,.guest-farewell,.guest-dice{
  touch-action:manipulation;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
#app img,#nav img,#drOv img,.guest-invite img,.guest-log img,.guest-farewell img,.guest-dice img{-webkit-user-drag:none;user-drag:none;}
/* 例外：文字輸入/可編輯區域必須維持可選取、可長按、可跳系統選單 */
#app input,#app textarea,#app select,#app [contenteditable=""],#app [contenteditable="true"]{
  -webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default;
}

:root{
  --paper:#FFF8EC;
  --ink:#3B2A20;
  --marigold:#F2A63E;
  --marigold-deep:#D9862A;
  --jade:#2F7D6B;
  --berry:#C1483F;
  --cloud:#FBEFE0;
  --cloud-line:#EBDCC4;
  --shadow: 0 6px 18px rgba(59,42,32,0.08);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --font-display:'Noto Serif TC', serif;
  --font-body:'Noto Sans TC', sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  /* v0.56.3：背景圖直接畫在 body 上（跟旅行背景同一套機制，最穩定）。
     以前只靠 body::before(z-index:-1) 這個偽元素，在部分瀏覽器/桌機會整層不渲染 → 只剩淡黃底。
     現在改成 body 本體就鋪 --page-bg，偽元素保留當備援；兩者其一渲染成功背景就會出現。 */
  background:var(--page-bg, none) top center / cover no-repeat fixed, var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:700px){ body{ background-position:center; } }
/* 即將結單・截止倒數徽章（v0.56.1） */
/* 倒數徽章預設色改「柔和珊瑚紅」（不再亮到刺眼）；後台可為每件商品改色，用 inline style 覆蓋 background */
.closing-badge{display:inline-block;margin-left:8px;background:linear-gradient(135deg,#e08a70,#cf6a52);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;vertical-align:middle;box-shadow:0 2px 6px rgba(207,106,82,.28);}
.closing-badge.ended{background:#9a9a9a;box-shadow:none;}

/* ---------- 固定視窗背景圖層（v0.35.4）----------
   用一個 position:fixed 的圖層當背景，永遠等於「視窗大小」，
   不管內容多長、捲到哪，背景都不會被拉伸、位移或重複。
   比 background-attachment:fixed 更相容（iOS Safari 也順）。
   各分頁只要設 --page-bg 這個變數，就會自動換圖。 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--page-bg, none);
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
@media (min-width:700px){ body::before{ background-position:center; } }
button, input{font-family:inherit; font-size:inherit; color:inherit;}
.hidden{display:none !important;}

/* ---------- loading ---------- */
.loading-screen{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--paper); gap:12px; z-index:999;
}
.loading-pet{font-size:56px; animation:bob 1.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* 🐾 走路腳印：兩枚腳印一前一後交替踏出，像小萌寵正走過來 */
.loading-paws{display:flex; align-items:center; gap:12px; height:60px;}
.loading-paws .lp{font-size:34px; opacity:0; animation:pawStep 1.2s ease-in-out infinite;}
.loading-paws .lp1{transform:translateY(-7px) rotate(-14deg);}
.loading-paws .lp2{transform:translateY(7px) rotate(-14deg); animation-delay:.6s;}
@keyframes pawStep{0%{opacity:0}18%{opacity:1}52%{opacity:1}72%{opacity:0}100%{opacity:0}}

.offline-bar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:var(--berry); color:#fff; text-align:center; font-size:14px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
}

/* ---------- layout ---------- */
.wrap{max-width:480px; margin:0 auto; padding:calc(16px + env(safe-area-inset-top)) 16px 96px; min-height:100vh; position:relative;}
/* v0.60.198 遊戲畫面禁止選取／複製貼上、長按不跳系統選單；輸入框（登入/搜尋/留言）除外，仍可正常打字。
   原 v0.60.150 只放 body → 部分元素（含按鈕文字）仍被選到；改用萬用選擇器涵蓋所有元素＝徹底不可選/不可複製 */
*{-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none;}
input, textarea, select, [contenteditable="true"], [contenteditable="true"] *{-webkit-user-select:text; -moz-user-select:text; user-select:text; -webkit-touch-callout:default;}
/* v0.60.150 本週新加入：改用實際寵物插畫（原本只顯示 emoji） */
.nm-pet .nm-ava{width:34px; height:34px; border-radius:50%; object-fit:cover; background:#fff2d6; box-shadow:0 1px 3px rgba(0,0,0,.12); display:block;}

/* ---------- 遊戲畫面：情境背景圖 + 店內氛圍微動畫 ---------- */
/* v0.56.4：改用「寫死網址、直接鋪在 body」的寫法（跟唯一正常的旅行背景完全相同），
   不再依賴 --page-bg 變數＋body::before 偽元素（那套在你的瀏覽器整層沒渲染）。--page-bg 保留給店景/遊戲中心相容。 */
body.game-mode{ --page-bg:url('bg-game-mobile.jpg?v=0.56.4'); background:var(--paper) url('bg-game-mobile.jpg?v=0.56.4') top center/cover no-repeat fixed; }
@media (min-width:700px){
  body.game-mode{ --page-bg:url('bg-game-desktop.jpg?v=0.56.4'); background:var(--paper) url('bg-game-desktop.jpg?v=0.56.4') center/cover no-repeat fixed; }
}
/* 遊戲畫面的卡片維持原本白底（不做玻璃霧面），確保文字/數字閱讀清晰，只有底圖換成情境圖 */

.shop-ambience{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;}

/* 遊戲背景圖左上角本身就印有「團購小萌寵」木頭看板，會跟上方 HTML 標題列重複。
   這裡在最上方鋪一層柔和的米色漸層，蓋掉背景看板那條、再往下淡出融入場景；
   遮罩在氛圍層(z-index:0)、位於標題列文字下方，所以標題列照樣清楚。 */
.shop-top-scrim{
  position:absolute; top:0; left:0; right:0; height:23%;
  background:linear-gradient(to bottom,
    rgba(249,239,219,.99) 0%,
    rgba(249,239,219,.98) 58%,
    rgba(249,239,219,.72) 80%,
    transparent 100%);
  pointer-events:none;
}

/* 窗邊光束中緩慢飄浮的灰塵粒子（左上角，呼應背景圖的窗戶光線）—— 加大、加亮、變多 */
.dust-mote{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,253,238,1) 0%, rgba(255,233,175,.9) 55%, transparent 78%);
  box-shadow:0 0 13px rgba(255,229,160,1);
  animation:dustDrift 9s ease-in-out infinite;
}
.dust-1{left:8%; top:65%; animation-delay:0s;}
.dust-2{left:15%; top:78%; animation-delay:1.5s;}
.dust-3{left:5%; top:45%; animation-delay:3s;}
.dust-4{left:19%; top:58%; animation-delay:4.5s;}
.dust-5{left:11%; top:85%; animation-delay:6s;}
.dust-6{left:22%; top:38%; animation-delay:7.5s;}
.dust-7{left:40%; top:72%; animation-delay:2s;}
.dust-8{left:55%; top:83%; animation-delay:5s;}
.dust-9{left:70%; top:60%; animation-delay:3.5s;}
.dust-10{left:85%; top:75%; animation-delay:6.5s;}
@keyframes dustDrift{
  0%{transform:translate(0,0) scale(.6); opacity:0;}
  15%{opacity:1; transform:translate(8px,-34px) scale(1.05);}
  50%{transform:translate(24px,-120px) scale(1.2); opacity:.9;}
  85%{opacity:.35;}
  100%{transform:translate(34px,-200px) scale(.7); opacity:0;}
}

/* 吊燈亮度呼吸，加大範圍與明暗對比，感覺更像真的有燈在發光 */
.lamp-glow{
  position:absolute; top:2%; width:250px; height:250px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,216,130,.72) 0%, rgba(255,216,130,.22) 50%, transparent 76%);
  animation:lampBreathe 10s ease-in-out infinite;
}
.lamp-glow-1{left:24%; animation-delay:0s;}
.lamp-glow-2{left:64%; animation-delay:5s;}
@media (max-width:699px){ .lamp-glow-2{display:none;} .lamp-glow-1{left:38%; top:4%; width:210px; height:210px;} }
@keyframes lampBreathe{
  0%,100%{opacity:.45; transform:scale(1);}
  50%{opacity:1; transform:scale(1.18);}
}

/* 偶爾飄過畫面的肉球小腳印，改成一串「走過去」的三個腳印，每20秒一次，比單顆更有生活感也更顯眼 */
.wander-paw{position:absolute; left:-6%; top:72%; font-size:0; animation:pawWalk 13s linear infinite;}
.wander-paw::before, .wander-paw::after, .wander-paw b{
  content:'🐾'; position:absolute; font-size:30px; color:rgba(139,107,74,.72); font-style:normal;
}
.wander-paw::before{left:0; top:16px;}
.wander-paw b{left:38px; top:-4px;}
.wander-paw::after{left:76px; top:16px;}
/* 第二排腳印：不同高度與時間，讓小動物走過畫面更常見、更有生活感 */
.wander-paw-2{top:34%; animation-duration:17s; animation-delay:5s;}
@keyframes pawWalk{
  0%{opacity:0; transform:translate(0,0) rotate(-8deg);}
  6%{opacity:.72;}
  94%{opacity:.72;}
  100%{opacity:0; transform:translate(125vw,-52px) rotate(10deg);}
}

/* 飄落的葉子（呼應店裡的植物），比灰塵更大更明顯，讓畫面更有生氣 */
.leaf{position:absolute; top:-8%; font-size:22px; opacity:0; pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)); animation:leafFall linear infinite;}
.leaf-1{left:12%; font-size:23px; animation-duration:11s; animation-delay:0s;}
.leaf-2{left:47%; font-size:18px; animation-duration:14s; animation-delay:4.5s;}
.leaf-3{left:80%; font-size:21px; animation-duration:12.5s; animation-delay:8s;}
@keyframes leafFall{
  0%{opacity:0; transform:translate(0,0) rotate(0deg);}
  10%{opacity:.9;}
  50%{transform:translate(26px,52vh) rotate(180deg);}
  90%{opacity:.9;}
  100%{opacity:0; transform:translate(-10px,106vh) rotate(340deg);}
}

/* 窗邊灑進來的暖陽光束，緩緩呼吸，讓「店內採光」更有感 */
.sun-ray{position:absolute; top:-12%; left:-6%; width:46%; height:125%;
  background:linear-gradient(116deg, rgba(255,238,196,.5) 0%, rgba(255,238,196,.12) 42%, transparent 62%);
  transform:rotate(-7deg); transform-origin:top left; pointer-events:none;
  animation:sunPulse 8s ease-in-out infinite;}
@keyframes sunPulse{0%,100%{opacity:.4;}50%{opacity:.8;}}

@media (prefers-reduced-motion: reduce){
  .dust-mote, .lamp-glow, .wander-paw, .leaf, .sun-ray{animation:none !important; opacity:0 !important;}
}

/* ---------- 登入/領養畫面：情境背景圖 + 玻璃霧面卡片 ---------- */
body.auth-mode{ --page-bg:url('bg-mobile.jpg?v=0.56.4'); background:var(--paper) url('bg-mobile.jpg?v=0.56.4') top center/cover no-repeat fixed; }
@media (min-width:700px){
  body.auth-mode{ --page-bg:url('bg-desktop.jpg?v=0.56.4'); background:var(--paper) url('bg-desktop.jpg?v=0.56.4') center/cover no-repeat fixed; }
}
/* 讓背景在畫面不夠長時也能鋪滿（例如矮螢幕），不會露出底色 */
body.auth-mode #adoptScreen{min-height:calc(100vh - 96px);}

/* 若隱若現的螢火蟲光點，讓背景不是純靜態圖片 */
.auth-fireflies{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
.auth-fireflies span{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,230,180,.95) 0%, rgba(255,200,120,.5) 55%, transparent 75%);
  opacity:0; animation:fireflyFloat 7s ease-in-out infinite;
}
.auth-fireflies span:nth-child(1){left:12%; top:22%; animation-delay:.2s;}
.auth-fireflies span:nth-child(2){left:78%; top:15%; animation-delay:1.4s;}
.auth-fireflies span:nth-child(3){left:35%; top:60%; animation-delay:2.6s;}
.auth-fireflies span:nth-child(4){left:88%; top:48%; animation-delay:.9s;}
.auth-fireflies span:nth-child(5){left:20%; top:78%; animation-delay:3.3s;}
.auth-fireflies span:nth-child(6){left:60%; top:30%; animation-delay:1.8s;}
.auth-fireflies span:nth-child(7){left:8%; top:52%; animation-delay:4.1s;}
.auth-fireflies span:nth-child(8){left:70%; top:70%; animation-delay:2.2s;}
.auth-fireflies span:nth-child(9){left:45%; top:12%; animation-delay:3.7s;}
.auth-fireflies span:nth-child(10){left:92%; top:82%; animation-delay:.5s;}
@keyframes fireflyFloat{
  0%{opacity:0; transform:translateY(0) scale(.8);}
  15%{opacity:1; transform:translateY(-6px) scale(1.1);}
  50%{opacity:.6; transform:translateY(-16px) scale(1);}
  85%{opacity:0; transform:translateY(-26px) scale(.8);}
  100%{opacity:0; transform:translateY(-30px) scale(.8);}
}

/* 玻璃霧面卡片（只用在登入/領養畫面，遊戲畫面的卡片維持原本樣式不受影響） */
#adoptScreen .card, #adoptScreen .pet-intro-box{
  position:relative; z-index:1;
  background:rgba(255,252,246,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 32px rgba(90,62,30,.18);
}
#adoptScreen .brand-row, #adoptScreen .auth-tabs{position:relative; z-index:1;}
#adoptScreen .auth-tab{background:rgba(255,255,255,.75); backdrop-filter:blur(6px);}
#adoptScreen .auth-tab.active{background:#F2A63E;}
#adoptScreen .pet-picker button{background:rgba(255,255,255,.78);}
.screen{display:flex; flex-direction:column; gap:16px;}

.brand-row{display:flex; align-items:center; gap:12px; padding:12px 4px 4px;}
.brand-emoji{font-size:40px;}
.brand-row h1{font-family:var(--font-display); font-weight:900; font-size:24px; margin:0;}
.brand-row .sub{margin:2px 0 0; color:#7A6752; font-size:14px;
  /* 萬一之後在非登入情境用到副標，加白色細陰影確保任何背景都清楚 */
  text-shadow:0 1px 2px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9);}

/* 登入／領養畫面：背景圖的木頭看板「已經印有」團購小萌寵標題與副標，
   HTML 這組 .brand-row 是重複的，疊在看板上才會造成文字重疊、辨識不清。
   因此在登入畫面隱藏 HTML 標題，只留背景看板當標題；用 visibility 保留原本
   版面高度，下方「我是新客人／我是老客人」按鈕不會往上位移。 */
body.auth-mode .brand-row{visibility:hidden;}
/* 手機版：背景看板下方印有「每天陪牠一下…」那行字，把登入內容往下挪一點、
   不要蓋到它（用隱藏標題列預留的高度來下推；若還會蓋到可再調大 min-height）。 */
@media (max-width:699px){
  body.auth-mode .brand-row{min-height:15vh;}
}

.top-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 2px 2px;
  position:relative; z-index:1; /* 抬到氛圍層/遮罩之上，標題列不會被蓋住 */
}
.top-bar-title{font-family:var(--font-display); font-weight:900; font-size:20px;}
.top-bar-right{display:flex; align-items:center; gap:8px;}
.shop-mood-line{margin:0 2px 4px; font-size:13px; color:#8A7A68; font-style:italic; position:relative; z-index:1;}
/* 分頁內容（各 tab 的卡片）抬到氛圍層／頂部遮罩(shop-top-scrim)之上，
   否則捲動時上方卡片文字會被固定的米色遮罩蓋住、變得看不清楚。 */
.tab-panel{position:relative; z-index:1;}
.guide-btn{
  background:#fff; border:1.5px solid var(--cloud-line); color:var(--ink);
  font-size:13px; font-weight:700; padding:6px 10px; border-radius:999px; cursor:pointer;
}
/* 背景音樂開關：圓形圖示鈕，跟怎麼玩鈕同一風格 */
.sound-btn{
  background:#fff; border:1.5px solid var(--cloud-line); color:var(--ink);
  font-size:18px; line-height:1; padding:5px 8px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.sound-btn.sound-off{ opacity:.55; }
/* 造型商城分頁：整頁背景換成寵物店主題（沿用遊戲背景機制；桌機看兩側、手機看卡片後方；3 款隨機輪播）
   手機版／桌機版圖由 JS 設 --shop-bg-m / --shop-bg-d，CSS 依螢幕寬度切換 */
body.game-mode.shopbg-on{ --page-bg:var(--shop-bg-m) !important; }
@media (min-width:700px){
  body.game-mode.shopbg-on{ --page-bg:var(--shop-bg-d) !important; }
}
/* 遊戲中心整頁背景（暖系）：圖還沒放時退回暖色漸層，放了 game-bg-*.webp 就顯示 */
body.game-mode.gamebg-on{ --page-bg:var(--game-bg-m),linear-gradient(180deg,#FFE9C2,#FFC98A) !important; }
@media (min-width:700px){
  body.game-mode.gamebg-on{ --page-bg:var(--game-bg-d),linear-gradient(180deg,#FFE9C2,#FFC98A) !important; }
}
/* 遊戲中心大按鈕 */
.game-hub{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.game-btn{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:2px solid #F3D9A8; border-radius:16px; padding:14px 16px; font-family:inherit;
  box-shadow:0 3px 10px rgba(0,0,0,.08); transition:transform .12s, box-shadow .12s; }
.game-btn:active{ transform:scale(.98); }
.game-btn .g-ic{ font-size:34px; line-height:1; flex:0 0 auto; }
.game-btn b{ font-size:17px; color:#5a3b1e; display:block; }
.game-btn small{ font-size:12px; color:#9a856a; display:block; margin-top:2px; }
.game-btn.soon{ opacity:.6; cursor:default; background:#FBF3E4; border-style:dashed; box-shadow:none; }
.game-btn.soon small{ color:#c08a3a; font-weight:700; }
/* 🏡 小屋入口：淺紫呼吸底（比照神樹祈願的存在感）v0.60.173 */
.game-btn.house-entry{ background:linear-gradient(135deg,#f4eeff,#e9e0ff); border-color:#d9c9f5;
  animation:houseBreath 3.2s ease-in-out infinite; }
@keyframes houseBreath{ 0%,100%{ box-shadow:0 4px 14px rgba(150,120,220,.16); transform:translateY(0); }
  50%{ box-shadow:0 8px 22px rgba(150,120,220,.30); transform:translateY(-2px); } }
.game-btn.house-entry b{ color:#5b3fa0; }
.game-btn.house-entry small{ color:#8f79c4; }
/* 未解鎖：呼吸停止、灰暗虛線（＝上鎖感），但仍可點（點進去看還差幾次／拆包裹）*/
.game-btn.house-entry.locked{ animation:none; background:#f1edf8; border-style:dashed; border-color:#cdbfe6; opacity:.72; }
.game-btn.house-entry.locked b{ color:#7a6aa0; }
.game-btn.house-entry.locked small{ color:#a58fcf; font-weight:700; }
@media (prefers-reduced-motion: reduce){ .game-btn.house-entry{ animation:none; } }
/* 導覽列的 emoji 圖示（遊戲中心，先用 🎮，之後可換 png）*/
.nav-btn .nav-ic-emoji{ width:27px; height:27px; font-size:23px; line-height:27px; text-align:center; }

/* ===== 菜市場挖寶（集字）===== */
.dig-card{ max-width:420px; text-align:center; }
.dig-title{ font-size:20px; color:#D6413A; font-weight:900; margin:2px 0 2px; }
.dig-sub{ font-size:13px; color:#8a7a5c; margin:0 0 6px; }
.dig-free{ font-size:13px; color:#8a7a5c; margin:0 0 10px; }
.dig-free b{ color:#E08A1E; }
/* 免費機會用完（0 次）→ 整行變醒目紅膠囊，讓玩家一眼看到今天挖過了 */
.dig-free.used{ display:inline-block; color:#fff; background:#D6413A; font-weight:900; font-size:15px;
  padding:5px 16px; border-radius:999px; box-shadow:0 2px 7px rgba(214,65,58,.32); }
.dig-free.used b{ color:#FFE08A; }
/* 菜籃「已開」標籤（用完時）：灰色，區別於可挖的紅色「挖寶」 */
.dig-basket .tag.done{ background:#9c8f78; }
.dig-stall{ background:linear-gradient(#e9d9b6,#dcc79b); border-radius:18px; padding:18px 10px 12px;
  box-shadow:inset 0 5px 14px rgba(0,0,0,.08); display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dig-basket{ border:none; background:none; cursor:pointer; aspect-ratio:1; position:relative; font-size:46px;
  display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 5px 4px rgba(0,0,0,.18)); }
.dig-basket:disabled{ cursor:default; }
.dig-basket.shake .bag{ animation:digShake .9s ease; display:inline-block; }
.dig-basket.opened{ opacity:.35; transform:scale(.9); }
@keyframes digShake{ 0%,100%{transform:rotate(0)} 15%{transform:rotate(-9deg) translateY(-3px)} 30%{transform:rotate(8deg)}
  45%{transform:rotate(-7deg) translateY(-4px)} 60%{transform:rotate(6deg)} 75%{transform:rotate(-4deg)} }
.dig-basket .tag{ position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:800;
  color:#fff; background:#D6413A; padding:1px 8px; border-radius:999px; }
.dig-slots{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:14px 0 0; }
.dig-slot{ aspect-ratio:.82; border-radius:11px; border:2px dashed #d9c9a6; background:#faf4e6;
  display:flex; align-items:center; justify-content:center; position:relative; }
.dig-slot .s-zi{ font-size:30px; font-weight:900; font-family:'Noto Serif TC',serif; color:#cbbca0; }
.dig-slot.got{ border:2px solid #F2A63E; background:linear-gradient(150deg,#FFF3C4,#FFE39A); }
.dig-slot.got .s-zi{ color:#B5480B; text-shadow:0 1px 0 #fff; }
.dig-slot .dup{ position:absolute; right:-4px; top:-6px; font-size:12px; font-weight:900; color:#fff;
  background:#E8602C; border:2px solid #fff; border-radius:999px; padding:1px 7px; line-height:1.25;
  box-shadow:0 1px 3px rgba(0,0,0,.28); z-index:2; }
/* 「我的」頁分頁大按鈕（v0.35.3）：一排大 chip，點一下只看一區 */
.me-nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:4px 0 14px; }
.me-chip{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px;
  padding:12px 8px; border:2px solid #EAD9BB; border-radius:14px; background:#fff;
  font-family:inherit; font-size:15px; font-weight:800; color:#8A7A68; cursor:pointer;
  line-height:1.25; white-space:nowrap; transition:transform .12s, background .15s; }
.me-chip.active{ background:linear-gradient(180deg,#FFB44D,#F2A63E); color:#fff; border-color:#F2A63E;
  box-shadow:0 3px 8px rgba(242,166,62,.4); transform:translateY(-1px); }
/* 手機寬度改成整齊的 2×2：四顆按鈕尺寸一致、間距一致、左右留白一致，不再擠成一排 */
@media (max-width:480px){ .me-nav{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .me-chip{ font-size:15px; padding:13px 8px; min-height:50px; } }
.me-sec.hidden{ display:none; }

/* 菜市場挖寶：茄芷袋主角圖 + 集到的字用圖片呈現（v0.35.1） */
.dig-basket .bag-img{ width:84%; height:84%; object-fit:contain; }
.dig-basket.shake .bag-img{ animation:digShake .9s ease; }
.dig-slot .s-zi-img{ width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.dig-slot.got{ border:none !important; background:none !important; }  /* 字卡本身就是紅金卡面，不再加外框底色 */
.dig-slots.complete{ animation:digWall 1s ease-in-out infinite; }
@keyframes digWall{ 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 8px rgba(242,166,62,.9))} }
.dig-redeem{ margin-top:12px; width:100%; padding:13px; border:none; border-radius:14px; font-size:16px; font-weight:900;
  font-family:inherit; background:#e7ddc9; color:#a99a80; cursor:not-allowed; }
.dig-redeem.on{ background:linear-gradient(90deg,#FF7A00,#D6413A); color:#fff; cursor:pointer;
  animation:limPulse 1s ease-in-out infinite; box-shadow:0 6px 18px rgba(214,65,58,.5); }
.dig-note{ font-size:11px; color:#a8998a; margin-top:10px; }
/* 🧺 菜市場全服紀錄鈕＋著色 */
.dig-feed-btn{ display:block; margin:6px auto 4px; border:1px solid #e0b34d; background:#fff8ea; color:#b5730f; border-radius:999px; padding:6px 16px; font-weight:800; font-size:12.5px; cursor:pointer; font-family:inherit; }
.dig-feed-btn:hover{ background:#fdefcf; }
.wf-row.df-done{ background:#fdf3d8; border-color:#eecf88; }
.wf-row.df-done .wf-txt{ color:#a5680a; font-weight:700; }
.wf-row.df-miss .wf-txt{ color:#8a7a66; }
.dig-reveal{ position:fixed; inset:0; background:rgba(60,42,28,.55); display:none; align-items:center; justify-content:center; z-index:95; }
.dig-reveal.show{ display:flex; flex-direction:column; }
.dig-goldcard{ width:190px; height:238px; border-radius:20px; border:6px solid #fff; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#FFF3C4,#FFD86B 45%,#F2A63E); box-shadow:0 12px 40px rgba(224,138,30,.7),0 0 0 3px #F2C14E;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; animation:digPop .45s cubic-bezier(.2,1.4,.4,1); }
.dig-goldcard::after{ content:''; position:absolute; top:0; left:-60%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent); transform:skewX(-18deg); animation:digShine 1.8s ease-in-out infinite; }
@keyframes digShine{ 0%{left:-60%} 55%{left:130%} 100%{left:130%} }
@keyframes digPop{ 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1)} }
.dig-goldcard .zi{ font-size:110px; font-weight:900; color:#B5480B; font-family:'Noto Serif TC',serif; text-shadow:0 2px 0 #fff; position:relative; z-index:2; }
.dig-goldcard .lbl{ font-weight:800; color:#8a5a1e; position:relative; z-index:2; }
.dig-hint{ color:#fff; font-weight:800; font-size:15px; margin-top:16px; }

/* ===== 菜市場挖寶・逛市場沉浸層（NPC吵雜語庫＋浮動泡泡＋市場氛圍）v0.60.222 =====
   純表演層：只做畫面/對話氛圍，不碰中獎邏輯。card 疊在市場背景上、泡泡層不擋點擊。 */
#digModal .dig-card{ z-index:1; }
/* 背景：模糊人群/攤位色塊在 Modal 底層飄動 */
#digModal .dig-market{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
#digModal .dig-market::before{ content:''; position:absolute; inset:-12%;
  background:
    radial-gradient(140px 90px at 14% 90%, rgba(214,65,58,.22), transparent 70%),
    radial-gradient(150px 95px at 50% 94%, rgba(46,139,87,.22), transparent 70%),
    radial-gradient(140px 90px at 86% 90%, rgba(30,90,160,.20), transparent 70%),
    radial-gradient(120px 80px at 32% 12%, rgba(242,166,62,.14), transparent 70%);
  filter:blur(10px); }
.dig-crowd{ position:absolute; bottom:-4px; font-size:30px; opacity:.10; filter:blur(1px);
  will-change:left; animation:digStroll linear infinite; }
@keyframes digStroll{ from{ left:-14% } to{ left:114% } }
/* 浮動對話泡泡層：蓋在最上面但不擋點擊 */
#digModal .dig-chatter{ position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.dig-bubble{ position:absolute; pointer-events:none; white-space:normal; word-break:break-word;
  max-width:74%; width:max-content; font-size:13px; font-weight:800; line-height:1.3; text-align:center;
  color:#5a3d22; background:rgba(255,255,255,.95); border:1.5px solid #f2c879; border-radius:14px;
  padding:4px 11px; box-shadow:0 3px 10px rgba(0,0,0,.16); opacity:0;
  animation:digBubble 3.2s ease forwards; }
.dig-bubble .em{ margin-right:3px; }
.dig-bubble.amb{ background:rgba(255,255,255,.5); border-color:transparent; color:#7a6a52; font-weight:700;
  box-shadow:none; filter:blur(.2px); font-size:12px; }
.dig-bubble.win{ background:rgba(255,242,196,.97); border-color:#F2A63E; color:#B5480B; }
.dig-bubble.lose{ background:rgba(255,255,255,.96); border-color:#cbb894; color:#7a6a52; }
@keyframes digBubble{ 0%{opacity:0; transform:translateY(8px) scale(.9)} 14%{opacity:1; transform:translateY(0) scale(1)}
  76%{opacity:1; transform:translateY(-2px) scale(1)} 100%{opacity:0; transform:translateY(-12px) scale(.98)} }
/* 反應泡泡疊在中獎揭曉層上（起鬨/馬後炮） */
.dig-reveal .dig-bubble{ z-index:3; }
/* 菜籃微動畫：六籃各自微搖/呼吸，交錯不同步，像市場裡活著 */
.dig-basket .bag-img{ animation:digIdle 3.4s ease-in-out infinite; transform-origin:50% 90%; }
.dig-basket:nth-child(2) .bag-img{ animation-duration:3.9s; animation-delay:.25s; }
.dig-basket:nth-child(3) .bag-img{ animation-name:digIdle2; animation-duration:4.3s; animation-delay:.1s; }
.dig-basket:nth-child(4) .bag-img{ animation-duration:4.1s; animation-delay:.5s; }
.dig-basket:nth-child(5) .bag-img{ animation-name:digIdle2; animation-duration:3.6s; animation-delay:.2s; }
.dig-basket:nth-child(6) .bag-img{ animation-duration:4.5s; animation-delay:.35s; }
@keyframes digIdle{ 0%,100%{ transform:rotate(-1.6deg) translateY(0) } 50%{ transform:rotate(1.6deg) translateY(-2px) } }
@keyframes digIdle2{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-2.5px) scale(1.025) } }
.dig-basket.opened .bag-img{ animation:none; }   /* 開過的停止微動 */
/* 翻開瞬間：菜籃冒出一小撮「沙沙」灰塵，加開盒爽感 */
.dig-basket.puff::after{ content:''; position:absolute; left:50%; top:38%; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#fff8e6,rgba(255,248,230,0)); transform:translate(-50%,-50%);
  animation:digPuff .6s ease-out forwards; pointer-events:none; }
@keyframes digPuff{ 0%{opacity:.9; transform:translate(-50%,-50%) scale(.5)} 100%{opacity:0; transform:translate(-50%,-140%) scale(3.4)} }
@media (prefers-reduced-motion:reduce){
  .dig-basket .bag-img,.dig-crowd,.dig-bubble{ animation-duration:.01ms !important; }
  .dig-basket .bag-img{ animation:none !important; }
}

/* ===== 菜市場挖寶・進階演出（今日事件／小動物／寵物旁觀／洗牌）v0.60.222 ===== */
.dig-eventban{ margin:0 0 8px; font-size:12.5px; font-weight:800; color:#8a5a1e; background:#FFF3DE;
  border:1px solid #F2C879; border-radius:10px; padding:5px 10px; display:inline-block; }
.dig-eventban .em{ margin-right:3px; }
/* 小動物經過（🐭🦋🐦…）：從一側橫越攤位底部 */
.dig-critter{ position:absolute; left:-12%; font-size:20px; opacity:.6; pointer-events:none; z-index:1;
  will-change:left; animation:digCritter linear forwards; }
.dig-critter.rev{ left:112%; transform:scaleX(-1); animation-name:digCritterRev; }
@keyframes digCritter{ from{ left:-12% } to{ left:112% } }
@keyframes digCritterRev{ from{ left:112% } to{ left:-12% } }
/* 小萌寵在旁邊看你抽（耳朵尾巴微動） */
.dig-pet{ position:absolute; right:8px; bottom:-2px; font-size:30px; opacity:.92; pointer-events:none; z-index:1;
  transform-origin:50% 100%; animation:digPetBob 1.6s ease-in-out infinite; }
.dig-pet.leave{ animation:digPetLeave .6s ease forwards; }
@keyframes digPetBob{ 0%,100%{ transform:rotate(-3deg) translateY(0) } 50%{ transform:rotate(3deg) translateY(-2px) } }
@keyframes digPetLeave{ to{ transform:translateY(22px); opacity:0 } }
/* 今日事件氛圍：下雨飄細線、特價/廟會暖光 */
#digModal .dig-market[data-ev="rain"]::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(105deg, rgba(120,150,190,.14) 0 2px, transparent 2px 10px); animation:digRain .5s linear infinite; }
@keyframes digRain{ to{ transform:translateY(10px) } }
#digModal .dig-market[data-ev="temple"]::after,#digModal .dig-market[data-ev="sale"]::after{ content:''; position:absolute; inset:0;
  pointer-events:none; background:radial-gradient(circle at 50% 8%, rgba(242,166,62,.16), transparent 60%); }
/* 老闆喊「重新整理」：菜籃快速洗牌抖動（袋子相同，純視覺、不改結果） */
.dig-stall.reshuffle .bag-img{ animation:digReshuffle .6s ease; }
@keyframes digReshuffle{ 0%{ transform:translateX(0) } 25%{ transform:translateX(-6px) rotate(-5deg) }
  50%{ transform:translateX(6px) rotate(5deg) } 75%{ transform:translateX(-3px) } 100%{ transform:translateX(0) } }
@media (prefers-reduced-motion:reduce){ .dig-critter,.dig-pet,.dig-stall.reshuffle .bag-img,#digModal .dig-market[data-ev="rain"]::after{ animation:none !important; } }

/* ===== 菜市場挖寶・4 玩法（阿姨幫選／洗牌／搶袋／殺價）v0.60.226 ===== */
.dig-stall.shuffling .bag-img{ animation:digReshuffleSpin .95s ease; }
@keyframes digReshuffleSpin{ 0%{ transform:rotate(0) scale(1) } 30%{ transform:rotate(180deg) scale(.78) } 60%{ transform:rotate(360deg) scale(.78) } 100%{ transform:rotate(360deg) scale(1) } }
.dig-basket.grab-target{ outline:3px dashed #E4572E; outline-offset:2px; border-radius:12px; animation:digGrabPulse .6s ease-in-out infinite; }
@keyframes digGrabPulse{ 0%,100%{ filter:none } 50%{ filter:brightness(1.12) } }
.dig-basket.grabbed{ opacity:.28; filter:grayscale(.8); transform:scale(.82); transition:.4s; }
.dig-basket.grabbed .tag{ background:#9c8f78; }
.dig-basket.aunt-pick{ animation:digAuntPick .75s ease; }
@keyframes digAuntPick{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.12) rotate(-4deg) } 70%{ transform:scale(.95) } }
.dig-haggle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:70; background:#fff;
  border:2px solid #f2c879; border-radius:16px; padding:16px 18px; box-shadow:0 12px 34px rgba(0,0,0,.3); text-align:center; max-width:82%; animation:digPop .3s ease; }
.dig-haggle .dh-line{ font-size:15px; font-weight:800; color:#5a3d22; margin-bottom:12px; line-height:1.5; }
.dig-haggle .dh-btns{ display:flex; gap:8px; justify-content:center; }
.dig-haggle .dh-b{ border:none; border-radius:10px; padding:9px 15px; font-weight:800; font-size:13.5px; cursor:pointer; font-family:inherit; }
.dig-haggle .dh-bargain{ background:#e7ddc9; color:#8a6a3a; }
.dig-haggle .dh-accept,.dig-haggle .dh-accept2{ background:linear-gradient(90deg,#FF7A00,#D6413A); color:#fff; }
@media (prefers-reduced-motion:reduce){ .dig-stall.shuffling .bag-img,.dig-basket.grab-target,.dig-basket.aunt-pick{ animation:none !important; } }
/* 📢 限時喊價（限時特賣）：紅色急促倒數 */
.dig-stall{ position:relative; }
.dig-flash{ position:absolute; left:50%; top:-13px; transform:translateX(-50%); z-index:6; white-space:nowrap;
  background:linear-gradient(90deg,#FF6A00,#D6413A); color:#fff; font-weight:900; font-size:13.5px; padding:5px 14px;
  border-radius:999px; box-shadow:0 4px 14px rgba(214,65,58,.5); animation:digFlashPulse .5s ease-in-out infinite alternate; }
.dig-flash b{ font-size:17px; margin:0 2px; }
@keyframes digFlashPulse{ from{ transform:translateX(-50%) scale(1); } to{ transform:translateX(-50%) scale(1.07); } }
.dig-stall.flash{ animation:digStallFlash .6s ease-in-out infinite alternate; box-shadow:inset 0 0 0 3px rgba(214,65,58,.45), inset 0 5px 14px rgba(0,0,0,.08); }
@keyframes digStallFlash{ from{ background:linear-gradient(#e9d9b6,#dcc79b); } to{ background:linear-gradient(#f6d7bd,#eec39b); } }
@media (prefers-reduced-motion:reduce){ .dig-flash,.dig-stall.flash{ animation:none !important; } }
/* 排行榜說明的口徑標籤：累積(紅)＝全期，本月(橘)＝當月，跟頒獎台的「上週」區分清楚 */
.lb-accum{ color:#D64545; font-weight:800; }
.lb-month{ color:#E08A1E; font-weight:800; }

/* 限時任務急促提醒彈窗 */
.lim-card{ text-align:center; border:3px solid #E4572E;
  box-shadow:0 0 0 4px rgba(228,87,46,.15), 0 12px 30px rgba(0,0,0,.28); animation:limPulse 1.1s ease-in-out infinite; }
@keyframes limPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(228,87,46,.15), 0 12px 30px rgba(0,0,0,.28); }
  50%{ box-shadow:0 0 0 9px rgba(228,87,46,.30), 0 12px 30px rgba(0,0,0,.28); } }
.lim-alarm{ font-size:56px; line-height:1; margin-top:4px; display:inline-block; animation:limShake .45s ease-in-out infinite; transform-origin:50% 12%; }
@keyframes limShake{ 0%,100%{ transform:rotate(-13deg); } 50%{ transform:rotate(13deg); } }
.lim-tag{ display:inline-block; background:#E4572E; color:#fff; font-weight:800; font-size:14px;
  padding:5px 16px; border-radius:999px; margin:6px 0 8px; }
.lim-title{ margin:6px 0; font-size:22px; }
.lim-desc{ color:#6B5A45; font-size:15px; margin:6px 0; line-height:1.5; }
.lim-count-label{ color:#E4572E; font-weight:700; font-size:13px; margin-top:10px; }
.lim-count{ font-size:32px; font-weight:900; color:#E4572E; letter-spacing:1px; font-variant-numeric:tabular-nums;
  animation:limBlink 1s steps(1,end) infinite; }
@keyframes limBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.lim-reward{ margin:10px 0 2px; font-weight:700; color:#B8860B; }
.lim-cta{ background:linear-gradient(90deg,#FF7A00,#E4572E); color:#fff; font-size:18px; font-weight:800;
  padding:14px; width:100%; border:none; border-radius:12px; margin-top:14px; cursor:pointer;
  animation:limPulse 1.1s ease-in-out infinite; }
/* 有「前往活動」時，下面那顆「立刻去做」用次要樣式（不搶戲、不閃動） */
.lim-cta-2{ background:#fff; color:#E4572E; font-size:16px; font-weight:800; padding:12px; width:100%;
  border:2px solid #F2A63E; border-radius:12px; margin-top:10px; cursor:pointer; font-family:inherit; }
/* 「今日不再提醒」勾選：沒勾的話每次進來都會再跳提醒 */
.lim-dismiss{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px;
  font-size:13px; color:#8A7A68; cursor:pointer; }
.lim-dismiss input{ width:auto; margin:0; cursor:pointer; }
.rank-pill{
  background:var(--jade); color:#fff; font-size:13px; font-weight:700;
  padding:6px 12px; border-radius:999px;
}

.guide-body{display:flex; flex-direction:column; gap:14px; max-height:60vh; overflow-y:auto;}
.guide-step{display:flex; gap:12px; align-items:flex-start;}
.guide-step .guide-emoji{font-size:28px; flex-shrink:0;}
.guide-step h3{margin:0 0 4px; font-size:16px;}
.guide-step p{margin:0; font-size:14px; color:#6B5A45; line-height:1.6;}
.guide-bullets{margin:6px 0 0; padding-left:18px;}
.guide-bullets li{margin:3px 0; font-size:14px; color:#6B5A45; line-height:1.6;}

/* ═══ 📖 怎麼玩 彈窗 v0.60.586：手機優先＋標題/關閉固定＋只內容區捲動＋safe-area/dvh（只 scope #guideModal，不影響其他 Modal） ═══ */
#guideModal{padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));}
#guideModal .modal-card{display:flex;flex-direction:column;padding:0;max-width:400px;overflow:hidden;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);}
#guideModal .modal-card > h2{flex:none;margin:0;padding:18px 52px 12px 20px;font-size:20px;color:#3a5a3a;background:#fff;border-bottom:1px solid #efe4d0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
#guideModal .modal-close{top:14px;right:14px;}
#guideModal .guide-body{max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;gap:16px;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));}
#guideModal .guide-hint{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;text-align:left;font:inherit;color:inherit;cursor:pointer;background:#f3f7ec;border:1px solid #d9e6c4;border-radius:14px;padding:12px 14px;}
#guideModal .guide-hint .gh-ic{font-size:20px;flex:none;}
#guideModal .guide-hint .gh-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
#guideModal .guide-hint .gh-tx b{font-size:16px;color:#3a5a3a;}
#guideModal .guide-hint .gh-tx span{font-size:14px;color:#5f7a4a;line-height:1.5;}
#guideModal .guide-hint .gh-chev{font-size:22px;color:#9bb37a;flex:none;}
#guideModal .guide-sec{background:#fffdf6;border:1px solid #efe4d0;border-radius:14px;padding:12px 14px 8px;}
#guideModal .guide-sec h3{margin:0 0 6px;font-size:17px;font-weight:800;color:#3a5a3a;}
#guideModal .guide-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:2px 0;}
#guideModal .guide-row .guide-ic{font-size:24px;flex:none;width:30px;text-align:center;}
#guideModal .guide-row .guide-line{font-size:17px;line-height:1.6;color:#4a4030;}

.card{
  background:var(--cloud);
  border:1px solid var(--cloud-line);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h2{font-family:var(--font-display); font-weight:900; font-size:18px; margin:0 0 8px;}
.card h3{font-size:15px; margin:0 0 8px; font-weight:700;}
.muted{color:#8A755D;}
.muted.small{font-size:13px;}
.center{text-align:center;}

/* ---------- 領養畫面 ---------- */
.field-label{display:block; font-size:14px; font-weight:700; margin:14px 0 6px;}
/* 領養／登入畫面的所有輸入框：統一滿版寬度。
   （之前只有 #petNameInput 有設 width:100%，其餘欄位沿用瀏覽器預設寬度，
   在 iPhone 上預設寬度比玻璃卡片還寬 → 右邊凸出框外。box-sizing 已全域 border-box，
   width:100% 不會爆框。） */
#adoptScreen input{
  width:100%; padding:14px 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--cloud-line); background:#fff; margin-bottom:14px;
}
#adoptScreen input:focus-visible{outline:3px solid var(--marigold); outline-offset:1px;}

/* 寵物選擇：改用 Flexbox 彈性換行。電腦／一般手機一排四個；
   螢幕太窄時(min-width 撐住)自動優雅換成兩排，不會硬擠變形。 */
.pet-picker{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px;}
.pet-picker button{
  flex:1 1 60px; min-width:60px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 6px; border-radius:var(--radius-md); border:2px solid var(--cloud-line);
  background:#fff; cursor:pointer;
}
/* 螢幕很窄（約 360px 以下）時改成一排兩個，優雅換成 2×2，避免四個擠成一團或出現 3+1 */
@media (max-width:359px){
  .pet-picker button{flex-basis:calc(50% - 5px);}
}
.pet-picker-img{width:44px; height:44px; object-fit:contain;}
.pet-picker button b{font-size:13px;}
.pet-picker button.selected{border-color:var(--marigold); background:#FFF3DE; box-shadow:0 0 0 3px rgba(242,166,62,.25);}

.pet-intro-box{background:#fff; border:1.5px solid var(--cloud-line); border-radius:var(--radius-md); padding:12px 14px; margin:4px 0 14px;}
.pet-intro-text{margin:0 0 4px; font-size:14px; color:var(--ink);}
.pet-intro-skill{margin:0; font-size:13px; color:var(--jade);}
.pet-picker button:focus-visible{outline:3px solid var(--marigold); outline-offset:2px;}

/* ---------- 按鈕 ---------- */
.btn{
  border:none; border-radius:var(--radius-md); cursor:pointer;
  min-height:52px; font-weight:700; padding:12px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn:focus-visible{outline:3px solid var(--marigold-deep); outline-offset:2px;}
.btn-lg{width:100%; min-height:58px; font-size:17px;}
.btn-primary{background:var(--marigold); color:#fff;}
.btn-secondary{background:var(--jade); color:#fff;}

.action-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.reset-hint{
  margin:10px auto 6px;
  width:fit-content;
  max-width:92%;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#5b4a2e !important;
  font-weight:600;
  box-shadow:0 1px 5px rgba(30,25,10,.18);
}
#loginRewardBtn{margin-bottom:18px;}
.action-btn{
  background:#fff; border:1.5px solid var(--cloud-line); flex-direction:column; gap:4px;
  min-height:76px; font-size:14px;
}
.action-btn .action-emoji{font-size:26px;}
.action-btn.done{background:var(--jade); color:#fff; border-color:var(--jade);}
.action-btn.cooling{background:#F4EADA; color:#A48F70;}

/* ---------- 寵物卡（含集章卡簽名視覺）---------- */
.pet-card{text-align:center; position:relative; padding-top:22px;}

.stamp-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:14px;
}
.stamp-caption{font-size:13px; font-weight:700; color:#8A5A1B;}
.stamp-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap;}
.stamp-row .stamp{width:28px; height:28px; font-size:12.5px;}
.stamp-card .stamp{
  width:30px; height:30px; border-radius:50%;
  border:2px solid var(--cloud-line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#B8A784; background:#fff;
}
/* 未來的天：空心灰＋數字（還沒到） */
.stamp-card .stamp.future{ border:2px solid #E7DFCE; background:#fff; color:#C0B08E; }
/* 已完成的天：主色填滿＋白字數字（不用打勾） */
.stamp-card .stamp.filled{
  border:2px solid var(--berry); background:var(--berry); color:#fff;
}
/* 今天：高亮＋pulse，一眼看出第幾天 */
.stamp-card .stamp.current{
  border:2px solid var(--marigold); background:var(--marigold); color:#fff; font-weight:900;
  box-shadow:0 0 0 4px rgba(242,166,62,.25);
  animation:stampPulse 1.6s ease-in-out infinite;
}
@keyframes stampPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(242,166,62,.20), 0 0 6px 1px rgba(242,166,62,.35); }
  50%{ box-shadow:0 0 0 5px rgba(242,166,62,.32), 0 0 14px 3px rgba(242,166,62,.6); }
}
@media (prefers-reduced-motion: reduce){ .stamp-card .stamp.current{ animation:none; } }

.speech-bubble{
  display:inline-block; background:#fff; border:1.5px solid var(--cloud-line);
  border-radius:16px; padding:8px 14px; font-size:14px; margin-bottom:6px;
}
.pet-stage-wrap{
  position:relative;
  width:150px; height:150px; margin:6px auto 8px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #FFF3DE 0%, #FDE3BA 60%, #F6D69B 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 6px #fff;
  isolation:isolate; /* 建立堆疊環境：讓「光芒四射」等特效可用 z-index:-1 置於寵物身後 */
}
.pet-emoji{width:120px; height:120px; object-fit:contain; filter:drop-shadow(0 6px 6px rgba(59,42,32,.15));}
.pet-emoji.dirty-50{filter:drop-shadow(0 6px 6px rgba(59,42,32,.15)) saturate(70%) brightness(96%);}
.pet-emoji.dirty-100{filter:drop-shadow(0 6px 6px rgba(59,42,32,.15)) saturate(40%) brightness(90%);}

/* 髒污小汙漬：改用真實水彩暈染紋理圖片（icons/dirt_light.png / dirt_heavy.png） */
.dirt-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background-repeat:no-repeat; background-position:center; background-size:78%;
}
.dirt-overlay.dirty-50{opacity:.75; background-image:url('icons/dirt_light.png?v=0.19.9');}
.dirt-overlay.dirty-100{opacity:.95; background-image:url('icons/dirt_heavy.png?v=0.19.9');}

/* 24小時未互動的提醒台詞閃爍效果 */
.speech-bubble.flash{animation:speechFlash 1s ease-in-out infinite;}
@keyframes speechFlash{0%,100%{opacity:1;}50%{opacity:.35;}}
.pet-accessory{position:absolute; font-size:34px; top:14px; right:calc(50% - 68px); filter:drop-shadow(0 3px 3px rgba(59,42,32,.2));}
.pet-emoji.pet-pop{animation:pop .5s ease;}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}

/* 特別開心版：機率觸發的放大版反應，比一般 pop 更誇張、多加搖擺跟外圈光暈 */
.pet-emoji.pet-pop-big{animation:popBig .7s ease;}
@keyframes popBig{
  0%{transform:scale(1) rotate(0deg);}
  30%{transform:scale(1.4) rotate(-8deg);}
  55%{transform:scale(1.22) rotate(6deg);}
  78%{transform:scale(1.3) rotate(-4deg);}
  100%{transform:scale(1) rotate(0deg);}
}
.pet-stage-wrap.celebrate{animation:celebrateGlow .7s ease;}
@keyframes celebrateGlow{
  0%{box-shadow:inset 0 0 0 6px #fff;}
  40%{box-shadow:inset 0 0 0 6px #fff, 0 0 0 12px rgba(242,166,62,.4);}
  100%{box-shadow:inset 0 0 0 6px #fff;}
}

/* 成長階段外框：幼年沿用預設淺色框，成長/成熟/閃亮依序套用彩色外框並逐步放大 */
.pet-stage-wrap.tier-2{box-shadow:inset 0 0 0 6px #fff, 0 0 0 6px #A9C97A;}
.pet-stage-wrap.tier-3{box-shadow:inset 0 0 0 6px #fff, 0 0 0 6px #7FB2D9; transform:scale(1.05);}
/* 閃亮階段（stage 4）：金色外框脈動 + 身後光芒四射（旋轉光束）。閃亮寵物設定上不會髒。 */
.pet-stage-wrap.tier-4{box-shadow:inset 0 0 0 6px #fff, 0 0 0 7px #F2C24B, 0 0 20px 5px rgba(255,205,90,.55); transform:scale(1.1); isolation:isolate; animation:tier4Glow 2.4s ease-in-out infinite;}
@keyframes tier4Glow{
  0%,100%{box-shadow:inset 0 0 0 6px #fff, 0 0 0 7px #F2C24B, 0 0 18px 4px rgba(255,205,90,.5);}
  50%{box-shadow:inset 0 0 0 6px #fff, 0 0 0 10px #FFDE8A, 0 0 30px 10px rgba(255,205,90,.85);}
}
/* 光芒四射：conic 放射光束置於寵物身後（z-index:-1），慢慢旋轉並忽明忽暗；用 radial 遮罩讓光束往外淡出 */
.pet-stage-wrap.tier-4::before{
  content:""; position:absolute; top:50%; left:50%; width:250px; height:250px;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,214,120,.9) 0deg 5deg, rgba(255,214,120,0) 5deg 22deg);
  -webkit-mask:radial-gradient(circle, #000 30%, rgba(0,0,0,.55) 52%, transparent 74%);
          mask:radial-gradient(circle, #000 30%, rgba(0,0,0,.55) 52%, transparent 74%);
  animation:shinyRays 12s linear infinite, shinyTwinkle 3s ease-in-out infinite;
}
@keyframes shinyRays{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes shinyTwinkle{0%,100%{opacity:.55;}50%{opacity:.95;}}

/* 24小時髒污提醒：寵物外框放大閃爍警示，比一般階段外框動畫更急促、更明顯 */
.pet-stage-wrap.dirty-alert{animation:dirtyAlertPulse 1s ease-in-out infinite !important;}
@keyframes dirtyAlertPulse{
  0%,100%{transform:scale(1); box-shadow:inset 0 0 0 6px #fff, 0 0 0 6px rgba(193,72,63,.4);}
  50%{transform:scale(1.09); box-shadow:inset 0 0 0 6px #fff, 0 0 0 16px rgba(193,72,63,.65);}
}

/* 髒污時：蒼蠅蚊子繞著寵物飛（50% 一隻近距離、100% 三隻不同軌道各自忽大忽小） */
.pet-stage-wrap .flies{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; z-index:2;}
.pet-stage-wrap.dirty-50 .flies, .pet-stage-wrap.dirty-100 .flies{opacity:1;}
/* 每隻蒼蠅：外層 .fly 負責繞圈（不同半徑 --r），內層 <b> 負責忽大忽小（遠近感）*/
.pet-stage-wrap .flies .fly{position:absolute; top:50%; left:50%; margin:-12px; line-height:1;
  animation:flyOrbit 3s linear infinite;}
.pet-stage-wrap .flies .fly b{display:inline-block; font-style:normal; font-size:24px; line-height:1;
  animation:flyPulse 1.5s ease-in-out infinite; will-change:transform;}
/* 三隻各自不同的軌道半徑＋速度，避免擠在一起重疊 */
.pet-stage-wrap .flies .fly-1{--r:58px; animation-duration:2.8s; animation-delay:0s;}
.pet-stage-wrap .flies .fly-2{--r:88px; animation-duration:3.6s; animation-delay:-1.1s;}
.pet-stage-wrap .flies .fly-3{--r:72px; animation-duration:2.2s; animation-delay:-1.7s;}
/* 各自不同的脈動節奏，忽大忽小的時間點錯開，看起來一隻近一隻遠 */
.pet-stage-wrap .flies .fly-1 b{animation-duration:1.3s; animation-delay:0s;}
.pet-stage-wrap .flies .fly-2 b{animation-duration:2.0s; animation-delay:-.6s;}
.pet-stage-wrap .flies .fly-3 b{animation-duration:1.1s; animation-delay:-.9s;}
/* 50%：只留一隻、靠近寵物、放大一點 */
.pet-stage-wrap.dirty-50 .flies .fly-1{--r:46px;}
.pet-stage-wrap.dirty-50 .flies .fly-1 b{font-size:34px;}
.pet-stage-wrap.dirty-50 .flies .fly-2,
.pet-stage-wrap.dirty-50 .flies .fly-3{display:none;}
/* 100%：三隻一起、繞得更急 */
.pet-stage-wrap.dirty-100 .flies .fly-1{animation-duration:1.6s;}
.pet-stage-wrap.dirty-100 .flies .fly-2{animation-duration:2.1s;}
.pet-stage-wrap.dirty-100 .flies .fly-3{animation-duration:1.3s;}
@keyframes flyOrbit{
  0%{transform:rotate(0deg) translateX(var(--r,80px)) rotate(0deg);}
  100%{transform:rotate(360deg) translateX(var(--r,80px)) rotate(-360deg);}
}
/* 忽大忽小：靠縮放模擬遠近（0.6 遠、1.3 近）*/
@keyframes flyPulse{
  0%,100%{transform:scale(.6);}
  50%{transform:scale(1.3);}
}
@media (prefers-reduced-motion: reduce){
  .pet-stage-wrap .flies .fly, .pet-stage-wrap .flies .fly b{animation:none !important;}
  .pet-stage-wrap .flies{opacity:0 !important;}
}

/* 寵物技能骰子動畫：不管中不中獎，只要有骰就會搖一下 */
.dice-roll{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:56px; pointer-events:none; filter:drop-shadow(0 4px 6px rgba(59,42,32,.3));
}
.dice-roll.rolling{animation:diceRoll .9s ease-in-out;}
@keyframes diceRoll{
  0%{transform:scale(0) rotate(0deg); opacity:0;}
  12%{transform:scale(1.3) rotate(25deg); opacity:1;}
  28%{transform:scale(1) rotate(-20deg);}
  44%{transform:scale(1.1) rotate(18deg);}
  60%{transform:scale(1) rotate(-12deg);}
  76%{transform:scale(1.05) rotate(8deg);}
  90%{transform:scale(1) rotate(0deg); opacity:1;}
  100%{transform:scale(.5) rotate(0deg); opacity:0;}
}

.float-emoji-layer{position:absolute; inset:0; pointer-events:none; overflow:visible;}
.float-emoji{
  position:absolute; left:50%; top:55%; font-size:26px;
  transform:translate(-50%,0); opacity:1;
  animation:floatUp 1.1s ease-out forwards;
}
@keyframes floatUp{
  0%{transform:translate(-50%,0) scale(.6); opacity:0;}
  15%{opacity:1; transform:translate(-50%,-6px) scale(1.05);}
  100%{transform:translate(calc(-50% + var(--drift,0px)), -110px) scale(.9); opacity:0;}
}

.pet-name-row{font-family:var(--font-display); font-size:20px; margin:2px 0 12px; display:flex; align-items:center; justify-content:center; gap:8px;}
.stage-badge{
  background:var(--ink); color:#fff; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:999px; font-family:var(--font-body);
}

.bar-row{margin-bottom:12px;}
.bar-track{height:12px; background:#F0E2C8; border-radius:999px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--marigold),var(--berry)); border-radius:999px; transition:width .4s ease;}
.bar-label{font-size:12px; color:#8A755D; margin-top:4px;}

.stat-row{display:flex; justify-content:center; gap:10px; margin-bottom:10px;}
.stat-chip{background:#fff; border:1px solid var(--cloud-line); border-radius:999px; padding:6px 12px; font-size:13px;}
.stat-chip b{margin-left:4px;}

.wallet-row{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.wallet-chip{background:#fff; border:1px solid var(--cloud-line); border-radius:999px; padding:6px 12px; font-size:13px;}
.wallet-chip b{margin-left:4px;}
.wallet-chip.highlight{background:var(--jade); color:#fff; border-color:var(--jade); font-weight:700;}
/* 👣 主人步數（今日/累積） */
.steps-row{display:flex; justify-content:center; gap:10px; margin-top:10px;}
.steps-chip{flex:1; max-width:160px; display:flex; flex-direction:column; align-items:center; gap:1px;
  background:linear-gradient(135deg,#fff7ea,#fff0f2); border:1.5px solid #f0dcc2; border-radius:16px; padding:9px 8px;}
.steps-chip .steps-ic{font-size:18px; line-height:1;}
.steps-chip .steps-k{font-size:11.5px; color:#a1876a; font-weight:700;}
.steps-chip b{font-size:20px; color:#7a4a1e; font-weight:900; letter-spacing:.3px;}

/* ---------- 任務清單 ---------- */
.task-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
/* v0.60.142 今日任務可展開收合（點標題收起/展開；用原生 details，免 JS） */
.today-list>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
.today-list>summary::-webkit-details-marker{display:none}
.today-list>summary h3{margin:0}
.today-list .today-caret{font-size:12.5px; font-weight:800; color:#8a6a3a; background:#f6ecd8; border-radius:999px; padding:3px 11px; white-space:nowrap;}   /* v0.60.150 收合鈕做明顯：膠囊底色＋文字，一眼看出能點 */
.today-list:not([open]) .today-caret::before{content:'▸ 展開';}
.today-list[open] .today-caret::before{content:'▾ 收合';}
.today-list:not([open])>summary{margin-bottom:0}
.task-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:1px solid var(--cloud-line); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:14px;
}
.task-item .done-mark{color:var(--jade); font-weight:700;}
.task-progress-track{flex:1; height:8px; background:#F0E2C8; border-radius:999px; overflow:hidden; margin:0 8px;}
.task-progress-fill{height:100%; background:var(--jade);}

.achievement-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}   /* 2 欄：卡片變寬，說明文字一行放得下、不會兩字一字斷行 */
/* 成就分區標題（特殊／一般）：跨滿三欄當一整條標題 */
.ach-group-title{grid-column:1 / -1; font-size:13px; font-weight:800; color:#6b5a3c; margin:8px 2px 0; padding-bottom:4px; border-bottom:1px dashed var(--cloud-line);}
.ach-group-title:first-child{margin-top:0;}
.ach-item{
  background:#fff; border:1px solid var(--cloud-line); border-radius:var(--radius-sm);
  padding:12px 8px 10px; text-align:center; font-size:12px;
}
.ach-item.unlocked{border-color:var(--marigold); background:#FFF3DE;}
.ach-item .ach-emoji{font-size:26px; display:block; margin-bottom:4px; filter:grayscale(.75); opacity:.6;}
.ach-item.unlocked .ach-emoji{filter:none; opacity:1;}
.ach-name{display:block; font-weight:700; margin-bottom:3px;}
.ach-desc{display:block; font-size:11.5px; color:#8a7a5c; line-height:1.6; margin:3px 2px 8px; letter-spacing:.2px;}
.ach-state{display:block; font-size:11px; font-weight:700; color:#b3a488;}
.ach-item.unlocked .ach-state{color:var(--jade);}
/* ⭐特殊成就：達成後卡片跑線性漸層閃光（未達成一樣是灰色，不閃） */
.ach-item.special.unlocked{
  position:relative; overflow:hidden; border-color:#F2C14E;
  background:linear-gradient(135deg,#FFF7E0,#FFE7B8,#FFF7E0);
  box-shadow:0 3px 14px rgba(242,166,62,.45);
}
.ach-item.special.unlocked::after{
  content:''; position:absolute; top:0; left:-60%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg); animation:achShine 2.6s ease-in-out infinite;
}
@keyframes achShine{0%{left:-60%}55%{left:120%}100%{left:120%}}
.ach-item.special.unlocked .ach-name{color:#B8860B;}

/* 🏆 成就圖鑑 Phase A：圖鑑頭／系列列／稀有度發光／神秘卡 */
.ach-book-head{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#FFF3DE,#FDE9C8); border:1px solid #EFD9AE; border-radius:12px;
  padding:10px 14px; margin-bottom:4px;}
.ach-book-title{font-size:15px; font-weight:800; color:#6b5a3c;}
.ach-book-pct{font-size:13px; font-weight:800; color:#B8860B;}
.ach-book-pct b{font-size:16px;}
/* 🏆 成就系列分頁導覽（sticky 置頂＋橫向滑，點一下只看該系列，不用一直滑） */
.ach-tabs{grid-column:1/-1; position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:6px; padding:8px 2px; margin:2px 0 4px; background:#fbf6ec;}
.ach-tab{flex:0 0 auto; border:1.5px solid #ecd9b8; background:#fff; border-radius:999px; padding:7px 13px; min-height:40px; font-size:12.5px; font-weight:800; color:#8a7a5c; cursor:pointer; font-family:inherit; white-space:nowrap;}
.ach-tab.on{background:#f2c14e; border-color:#f2c14e; color:#5a3d00;}
/* 🏆 全球取得率＋進度條（Phase C） */
.ach-pct{display:block; font-size:9.5px; color:#b09a70; font-weight:700; margin:1px 0 2px;}
.ach-pbar{height:6px; border-radius:6px; background:#ece0c8; overflow:hidden; margin:4px 2px 2px;}
.ach-pbar>i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#4aa3ff,#8fd0ff);}
.ach-pnum{display:block; font-size:10px; font-weight:800; color:#2b7fd6;}
/* 📖 成就回憶軸（Phase F） */
.ach-timeline{grid-column:1/-1; display:flex; flex-direction:column; padding:4px 2px;}
.ach-tl-empty{grid-column:1/-1; text-align:center; color:#9a8f7d; font-size:13px; padding:24px 8px;}
.ach-tl-row{display:flex; align-items:flex-start; gap:10px; padding:10px 4px; border-bottom:1px dashed var(--cloud-line,#efe6d4);}
.ach-tl-date{flex:0 0 auto; font-size:11px; font-weight:800; color:#b89a5a; font-variant-numeric:tabular-nums; padding-top:3px; min-width:74px;}
.ach-tl-emoji{flex:0 0 auto; font-size:24px; line-height:1;}
.ach-tl-body{flex:1; display:flex; flex-direction:column; gap:2px;}
.ach-tl-body b{font-size:14px; color:#5a4a2e;}
.ach-tl-story{font-size:12px; color:#8a7a5c; line-height:1.5; font-style:italic;}
.ach-tl-toggle{grid-column:1/-1; align-self:center; margin:12px auto 4px; padding:9px 20px; border:1px solid var(--cloud-line,#efe6d4); border-radius:999px; background:#fff8ea; color:#a8863f; font-size:13px; font-weight:800; cursor:pointer;}
.ach-tl-toggle:active{transform:scale(.97);}
.ach-tab em{font-style:normal; font-weight:700; opacity:.75; font-size:11px;}
.ach-series-head{grid-column:1/-1; display:flex; align-items:center; gap:8px; margin:10px 2px 2px;
  padding-bottom:5px; border-bottom:1px dashed var(--cloud-line);}
.ach-series-name{font-size:13px; font-weight:800; color:#6b5a3c;}
.ach-series-count{font-size:11px; font-weight:800; color:#b89a5a;}
.ach-series-bar{flex:1; max-width:120px; height:5px; border-radius:5px; background:#EDE0C8; overflow:hidden;}
.ach-series-bar>i{display:block; height:100%; background:linear-gradient(90deg,#F2C14E,#FFD98A);}
.ach-item{position:relative;}
.ach-rz{position:absolute; top:5px; right:7px; font-size:8px; letter-spacing:-1px; opacity:.9;}
/* 稀有度邊框：未達成僅淡色邊，達成才發亮動畫 */
.ach-item[data-rz="rare"]{border-color:#8fc4ff;}
.ach-item[data-rz="rare"].unlocked{border-color:#4aa3ff; box-shadow:0 0 10px rgba(74,163,255,.4); animation:achRareBr 2.6s ease-in-out infinite;}
@keyframes achRareBr{0%,100%{box-shadow:0 0 6px rgba(74,163,255,.25);}50%{box-shadow:0 0 16px rgba(74,163,255,.55);}}
.ach-item[data-rz="epic"]{border-color:#c7a6ff;}
.ach-item[data-rz="epic"].unlocked{border-color:#a879ff; animation:achEpicBr 2.8s ease-in-out infinite;}
@keyframes achEpicBr{0%,100%{box-shadow:0 0 8px rgba(168,121,255,.3);}50%{box-shadow:0 0 20px rgba(168,121,255,.65);}}
.ach-item[data-rz="legendary"]{border-color:#F2C14E;}
.ach-item[data-rz="legendary"].unlocked{border-color:#F2C14E; box-shadow:0 0 16px rgba(245,183,61,.5);}
.ach-item[data-rz="mythic"]{border-color:#e6d5b8;}
.ach-item[data-rz="mythic"].unlocked{border:2px solid transparent;
  background:linear-gradient(#FFF3DE,#FFF3DE) padding-box,
    conic-gradient(from 0deg,#ff6b6b,#ffd93d,#6bff9e,#4aa3ff,#a879ff,#ff6b6b) border-box;
  animation:achMythic 5s linear infinite;}
@keyframes achMythic{to{filter:hue-rotate(360deg);}}
/* 神秘成就卡：??? ＋斜線底紋 */
.ach-item.ach-secret{background:repeating-linear-gradient(45deg,#F7F0E2,#F7F0E2 6px,#F1E7D6 6px,#F1E7D6 12px); border-color:#DED0B4;}
.ach-item.ach-secret .ach-emoji{opacity:.5; filter:grayscale(.6);}
.ach-item.ach-secret .ach-name{color:#B7AC95; letter-spacing:2px;}
.ach-item.ach-secret .ach-desc{color:#a8996f; font-style:italic;}

/* ---------- 商品／兌換卡片 ---------- */
.chip-tabs{display:flex; gap:6px; margin-bottom:12px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.chip-tabs::-webkit-scrollbar{display:none;}
.chip{
  background:#fff; border:1.5px solid var(--cloud-line); border-radius:999px;
  padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap; flex:0 0 auto;   /* 文字一行顯示：不換行、不被壓縮，四顆放不下時整列可橫滑 */
}
.chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

.product-list{display:flex; flex-direction:column; gap:10px;}
.product-card, .reward-card{
  display:block; background:#fff; border:1px solid var(--cloud-line); border-radius:var(--radius-md);
  padding:14px; text-decoration:none; color:var(--ink);
}
.product-card b, .reward-card b{display:block; font-size:15px; margin-bottom:4px;}
.product-card span, .reward-card .reward-points{color:#8A755D; font-size:13px;}
/* 登入彈窗「今日新開團商品」可點擊卡片（點整張→開 FB 開團貼文；沒連結時退回不可點樣式） */
.welcome-feat{ display:flex; flex-direction:column; align-items:stretch; gap:5px; margin-top:8px; padding:11px 13px; }   /* v0.60.157 縮緊：品名＋價格改回同一列（見 welcome-feat-main）＝省一行高度；gap 8→5、margin-top 10→8、padding 14→11/13，卡片不再過高 */
.welcome-feat-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:row; align-items:baseline; gap:8px; }   /* v0.60.157 品名(左,吃滿整寬)＋價格(右,不換行)同一列＝價格一眼可見又省一行；600g 仍在品名字串內自然折行、不會變孤兒 */
.welcome-feat-main b{ font-size:15px; line-height:1.3; flex:1 1 auto; min-width:0; margin-bottom:0; }   /* v0.60.157 蓋掉 .product-card b 的 display:block/margin，讓品名成為 row 內可縮的左欄 */
.welcome-feat-main > span{ flex:0 0 auto; color:#B5651D; font-size:15px; font-weight:800; white-space:nowrap; }   /* v0.60.157 價格靠右、不被擠斷、字級加大更醒目 */
/* 去看看 → 橘色膠囊 CTA，一眼就知道可以點 */
.welcome-feat-go{ flex:0 0 auto; align-self:flex-end; color:#fff; background:linear-gradient(180deg,#F5A623,#E8890B); font-weight:800; font-size:14px;
  white-space:nowrap; padding:7px 14px; border-radius:999px; box-shadow:0 2px 6px rgba(216,138,46,.35); }   /* v0.60.157 縮緊：padding 9x15→7x14、維持第二列靠右下 */
/* 顯眼版：暖色漸層＋橘框＋光暈，讓「今日開團」跳出白色彈窗 */
.welcome-feat--link{ cursor:pointer; background:linear-gradient(180deg,#FFF7E8,#FFE7C6); border:2px solid #F0B95E;
  box-shadow:0 3px 14px rgba(216,138,46,.24); transition:transform .08s ease, box-shadow .12s ease; }
.welcome-feat--link:active{ transform:scale(.97); box-shadow:0 1px 6px rgba(216,138,46,.32); }
.reward-card{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.reward-card button{flex-shrink:0;}
/* 兌換頁：目前團購點數（讓玩家兌換前先看到自己有多少點） */
.reward-balance{display:inline-flex; align-items:center; gap:5px; margin:2px 0 12px; padding:6px 14px; border-radius:999px;
  background:#FFF3DF; border:1px solid #F2D6A2; color:#8A5A1E; font-size:13.5px; font-weight:800;}
.reward-balance b{color:#E4572E; font-size:15px;}
/* 兌換好禮封面（自訂圖／emoji 備援） */
.reward-left{display:flex; align-items:center; gap:13px; min-width:0; flex:1;}
/* v0.60.133 好禮圖放大：46→88px，玩家一眼看清換的是什麼（圖片超出容器用 object-fit 完整顯示） */
.reward-cover{width:88px; height:88px; flex-shrink:0; border-radius:16px; background:#FAF5EA; border:1px solid var(--cloud-line); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:48px; line-height:1;}
.reward-cover img{width:100%; height:100%; object-fit:contain;}
@media (max-width:380px){ .reward-cover{width:72px; height:72px; font-size:40px;} }
.reward-info{min-width:0;}

.redemption-item{
  background:#fff; border:1px dashed var(--cloud-line); border-radius:var(--radius-sm);
  padding:10px 12px; margin-bottom:8px; font-size:13px;
}
.redemption-item .code{font-family:monospace; font-size:15px; font-weight:700; letter-spacing:1px;}
.status-pill{font-size:11px; padding:2px 8px; border-radius:999px; margin-left:6px;}
.status-pending{background:#FDE3BA; color:#8A5A1B;}
.status-redeemed{background:var(--jade); color:#fff;}
.status-rejected{background:#E9DECB; color:#8A755D;}

/* ---------- 我的頁 ---------- */
.level-big{font-family:var(--font-display); font-size:22px; font-weight:900; margin:6px 0 4px;}
.level-track{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
.level-row{display:flex; justify-content:space-between; font-size:13px; padding:8px 10px; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--cloud-line);}
.level-row.current{border-color:var(--marigold); background:#FFF3DE; font-weight:700;}

/* ---------- 底部導覽 ---------- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--cloud-line);
  display:flex; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 14px rgba(59,42,32,.06);
}
.nav-btn{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:8px 2px; border-radius:var(--radius-sm); font-size:11px; color:#A48F70; cursor:pointer;
  position:relative;
}
/* 🌳 生命樹「夥伴新動態」紅點（呼吸＋可帶數字），掛在底部導覽的生命樹鈕上 */
.dy-nav-dot{
  position:absolute; top:3px; left:calc(50% + 5px); box-sizing:border-box;
  min-width:9px; height:9px; padding:0 3px; border-radius:999px;
  background:#e5484d; color:#fff; font-size:10px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; z-index:3;
  box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.28);
  animation:dyNavDotBreath 1.5s ease-in-out infinite;
}
.dy-nav-dot.has-num{ min-width:16px; height:16px; top:1px; }
@keyframes dyNavDotBreath{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 2px #fff, 0 0 0 0 rgba(229,72,77,.55); }
  50%{ transform:scale(1.22); box-shadow:0 0 0 2px #fff, 0 0 0 6px rgba(229,72,77,0); }
}
.nav-btn span{font-size:22px;}
.nav-btn .nav-ic{width:27px;height:27px;object-fit:contain;display:block;margin-bottom:1px;transition:transform .15s;}
.nav-btn.active .nav-ic{transform:scale(1.12);}
.nav-btn.active{color:var(--marigold-deep); background:#FFF3DE; font-weight:700;}
.nav-btn:focus-visible{outline:3px solid var(--marigold); outline-offset:-2px;}

/* ---------- Modal / toast ---------- */
.modal{position:fixed; inset:0; z-index:90; background:rgba(59,42,32,.45); display:flex; align-items:center; justify-content:center; padding:20px;}
.modal-card{background:#fff; border-radius:var(--radius-lg); padding:22px; max-width:380px; width:100%; position:relative; box-shadow:var(--shadow); max-height:92vh; overflow-y:auto;}
.modal-close{position:absolute; top:10px; right:12px; border:none; background:none; font-size:22px; cursor:pointer; color:#8A755D;}
.modal-close:focus-visible{outline:3px solid var(--marigold);}

/* 歡迎彈窗：「距離上次來看牠…」改成暖色高亮小框，時間數字放大加粗，讓它顯眼 */
.welcome-offline{
  display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap;
  margin:10px 0 12px; padding:10px 14px;
  background:#FFF3DE; border:1.5px solid #F2C879; border-radius:12px;
  text-align:center; font-size:15px; font-weight:700; color:#8A5A1B;
}
.welcome-offline b{
  color:var(--berry); font-size:20px; font-weight:900; margin:0 2px;
}

.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:95;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px;
  max-width:90%; text-align:center; box-shadow:var(--shadow);
}

@media (prefers-reduced-motion: reduce){
  .loading-pet, .loading-paws .lp, .pet-emoji.pet-pop, .pet-emoji.pet-pop-big, .pet-stage-wrap.celebrate, .pet-stage-wrap.tier-4, .pet-stage-wrap.tier-4::before, .cos-effect.ring, .cos-effect.fx-rays::before, .pet-stage-wrap.dirty-alert, .dice-roll.rolling, .auth-fireflies span, .btn{animation:none !important; transition:none !important;}
}

/* ---------- 社團任務（到店核銷）---------- */
.fb-task-actions{display:flex; gap:10px; margin:6px 0 12px;}
.fb-task-actions .btn{flex:1; min-height:48px; font-size:15px;}
.fb-task-list{display:flex; flex-direction:column; gap:10px;}
.fb-task{
  display:flex; align-items:center; gap:13px;
  background:#fff; border:1px solid var(--cloud-line); border-radius:var(--radius-md);
  padding:13px 14px;
}
.fb-task.done{background:#F1F7ED; border-color:#B9D6AC;}
/* 限時任務卡：紅框＋限時徽章＋剩餘天數，跟一般任務明顯區隔 */
.fb-task.fb-task-limited{border:2px solid #E4572E; background:linear-gradient(#FFF6F1,#FFFDFB); box-shadow:0 2px 10px rgba(228,87,46,.12);}
.fb-task.fb-task-limited.done{border-color:#B9D6AC; background:#F1F7ED; box-shadow:none;}
.fb-task-limited-badge{display:inline-block; background:#E4572E; color:#fff; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle;}
.fb-task-urgent{color:#E4572E; font-weight:800; white-space:nowrap;}

/* ================= v0.30 寵物旅行 ================= */
/* 旅行中：隱藏餵食清潔等互動，只留旅行場景（常駐錢包在場景下方） */
body.is-travelling .pet-card, body.is-travelling .action-grid, body.is-travelling #loginRewardBtn,
body.is-travelling .today-list, body.is-travelling #travelBtn, body.is-travelling #petAlbumBtn, body.is-travelling #resetHint{ display:none !important; }
#travelPane{ margin-top:4px; }
/* ===== 旅行場景背景（v0.30.6）：手機整頁全螢幕、電腦長條卡片 ===== */
/* 共用：兩種尺寸都鋪真實水彩背景、收起 emoji 造景 */
body.is-travelling .tv-scene{ background-image:var(--tv-bg,none); background-size:cover; background-position:center; }
body.is-travelling .tv-sun,
body.is-travelling .tv-clouds,
body.is-travelling .tv-hills,
body.is-travelling .tv-layer,
body.is-travelling .tv-ground,
body.is-travelling .tv-path{ display:none; }
body.is-travelling .tv-walker{ transform-origin:bottom center; }

/* ============================================================
   v0.50.2 旅行版面「垂直比例重排」（Visual Balance）
   原則：區塊高度用「螢幕比例(dvh)」分配，不用固定 px——
   手機/平板/電腦維持一致的「視覺比例」而非一致的像素距離。
   比例分配（手機直式）：
     場景區 ≈ 54dvh（原本 flex:1 吃掉 ~80dvh → 縮短，重心回到畫面中段）
     操作區 ＝ 剩餘高度，內容從頂部緊貼場景排起（不再被推到螢幕最底）
   ============================================================ */
@media (max-width:699px){
  body.is-travelling #travelPane{ position:fixed; inset:0; z-index:40; margin:0; display:flex; flex-direction:column; align-items:stretch; }
  /* 旅行＝全螢幕沉浸：手機版隱藏頂部公告跑馬燈，避免蓋到「剩餘時間」（離開旅行自動恢復） */
  body.is-travelling .announce-bar{ display:none !important; }
  /* 場景區：彈性長高吃掉多餘空間（v0.52.1 消除按鈕下方大空白）；豬錨在場景底部、永遠貼近泡泡與按鈕 */
  body.is-travelling .tv-scene{ flex:1 1 auto; min-height:46dvh; height:auto; border-radius:0 0 22px 22px; box-shadow:0 4px 14px rgba(0,0,0,.10); background-position:center bottom; }
  body.is-travelling .tv-walker{ bottom:11%; transform:translateX(-50%) scale(.9); }
  body.is-travelling .tv-mystery{ bottom:1.6dvh; }
  /* 操作區：照內容自然高度、緊貼在場景與底部導覽列之間（不再吃剩餘空間留白） */
  body.is-travelling .tv-controls{ position:relative; z-index:41; flex:0 0 auto; display:flex; flex-direction:column;
    gap:.9dvh; padding:1.1dvh 16px calc(76px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(255,247,235,.9) 0%,rgba(255,247,235,.97) 100%); }
  body.is-travelling .tv-controls .tv-wallet{ margin:.4dvh 0 .2dvh; }
  body.is-travelling .tv-controls .btn{ margin:0; }
}

/* 平板/電腦（≥700px）：長條卡片；頁面背景改鋪旅行水彩圖（不再是灰底） */
@media (min-width:700px){
  body.is-travelling{ background:#e8ddc8 var(--tv-bg,url('travel/bg-desktop.webp')) center/cover fixed no-repeat; }
  body.is-travelling .tv-scene{ aspect-ratio:16/9; height:auto; max-height:56dvh; }
  body.is-travelling .tv-walker{ bottom:9%; transform:translateX(-50%) scale(.6); }
  body.is-travelling .tv-controls{ display:flex; flex-direction:column; gap:.9dvh; background:rgba(255,247,235,.88); border-radius:16px; padding:10px 14px; }
  body.is-travelling .tv-controls .tv-wallet{ margin:1dvh 0 .2dvh; }
  body.is-travelling .tv-controls .btn{ margin:0; }
}

/* v0.52.1 旅行中：關掉主畫面天氣圖層（白色粒子/光暈不再疊在旅行畫面上） */
body.is-travelling .weather-layer{ display:none !important; }
body.in-house .weather-layer{ display:none !important; }   /* 🐾 進小屋關掉主天氣層（省效能，避免與小屋窗戶天氣重複疊圖） */
.tv-scene{position:relative;height:300px;border-radius:20px;overflow:hidden;
  background:linear-gradient(#ffd79a 0%,#ffe9cf 34%,#cfe7e6 60%,#bfe3c8 60%,#a9d9b3 100%);box-shadow:0 6px 20px rgba(0,0,0,.14)}
.tv-sun{position:absolute;top:24px;right:40px;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,#fff3c4 0%,#ffd98a 60%,rgba(255,217,138,0) 72%)}
.tv-clouds span{position:absolute;font-size:30px;opacity:.9;animation:tvcloud linear infinite}
.tv-clouds span:nth-child(1){top:28px;left:-40px;animation-duration:26s}
.tv-clouds span:nth-child(2){top:66px;left:-40px;font-size:22px;animation-duration:34s;animation-delay:-8s}
@keyframes tvcloud{from{transform:translateX(0)}to{transform:translateX(520px)}}
.tv-hills{position:absolute;left:-5%;right:-5%;bottom:34%;height:100px;
  background:radial-gradient(70px 60px at 20% 100%,#bfe0b0 0 60px,transparent 61px),
            radial-gradient(92px 78px at 55% 100%,#aed9a4 0 78px,transparent 79px),
            radial-gradient(64px 58px at 86% 100%,#bfe0b0 0 58px,transparent 59px)}
.tv-layer{position:absolute;left:0;display:flex;white-space:nowrap;will-change:transform}
.tv-layer span{padding-right:30px}
.tv-far{font-size:22px;opacity:.8;bottom:38%;animation:tvscroll 15s linear infinite}
.tv-near{font-size:46px;bottom:22%;animation:tvscroll 7s linear infinite;filter:drop-shadow(0 3px 2px rgba(0,0,0,.08))}
@keyframes tvscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tv-ground{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(#a9d9b3,#8fca9c)}
.tv-path{position:absolute;left:0;right:0;bottom:7%;height:38px;
  background:repeating-linear-gradient(90deg,#e9d3a8 0 34px,#e2c894 34px 40px);
  border-top:3px solid #d8c090;border-bottom:3px solid #cdb27e;animation:tvpath .5s linear infinite}
@keyframes tvpath{from{background-position:0 0}to{background-position:-40px 0}}
.tv-walker{position:absolute;left:50%;transform:translateX(-50%);bottom:11%;width:187px;height:156px;
  background-size:561px 156px;background-repeat:no-repeat;background-position:0 0;
  animation:tvwalk .6s steps(3) infinite;filter:drop-shadow(0 6px 4px rgba(0,0,0,.12));z-index:5}
@keyframes tvwalk{from{background-position:0 0}to{background-position:-561px 0}}
.tv-walker.tv-arrived{animation:none;background-position:-187px 0}
/* ============================================================
   角色顯示三模式（v0.50.1 架構整理；新增寵物只要放圖、不用改 CSS）
   ① Walking Mode（旅行中）＝上面的 .tv-walker 基礎樣式：
      sprite 專用（{type}-walk.webp 561×156 三格、steps(3) 走路動畫）。
   ② Arrived Mode（旅行完成、站在場景中）＝ .tv-walker.tv-gift-mode：
      單張完整立繪（{type}-gift.webp），完全不用 sprite 的
      background-size/position——等比例 contain、置底置中、絕不裁切。
   ③ Popup Mode（明信片揭曉「我回來啦」）＝ .tv-back-pet（app.js 注入）：
      獨立樣式，與上兩者無共用，維持現狀。
   ============================================================ */
.tv-walker.tv-gift-mode{
  animation:none;                       /* 關掉走路動畫 */
  background-size:contain;              /* 等比例完整顯示，太大就整體縮小 */
  background-repeat:no-repeat;
  background-position:center bottom;    /* 站在地上、置中 */
}
.tv-rain{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity .4s;
  background-image:repeating-linear-gradient(108deg,rgba(255,255,255,.45) 0 1.5px,transparent 1.5px 11px)}
.tv-scene.rain .tv-rain{opacity:.5}
.tv-scene.rain{filter:saturate(.85) brightness(.94)}
.tv-scene.rain::after{content:'';position:absolute;inset:0;background:rgba(90,110,130,.14);z-index:4}
/* 🧳 旅行 HUD：靠左單行「旅行中…剩餘 HH:MM:SS」，避開 iPhone 瀏海（不置中） */
.tv-hud{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);border-radius:16px;padding:6px 14px;
  font-weight:800;color:#5a3b1e;box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:14px;z-index:8;text-align:left;line-height:1.2;white-space:nowrap;max-width:calc(100% - 24px);}
.tv-hud b{display:inline;color:#E4572E;font-size:15px;font-weight:900;margin-left:6px;}
/* iPhone 動態島/瀏海：旅行全螢幕時把 HUD 推進左上安全區，避免被瀏海遮住 */
body.is-travelling .tv-hud{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));}
.tv-mystery{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.92);
  border-radius:12px;padding:6px 13px;font-size:12.5px;color:#5a3b1e;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:8;
  max-width:94%;white-space:normal;line-height:1.35;text-align:center}
/* 💬 途中傳訊換句時的小彈跳（保留置中的 translateX(-50%)） */
@keyframes tvChatPop{0%{opacity:.35;transform:translateX(-50%) translateY(5px) scale(.96)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.tv-mystery.tv-chat-pop{animation:tvChatPop .32s ease-out}
.tv-wallet{text-align:center;margin:12px 0 6px;font-weight:800;color:#5a3b1e;font-size:16px}
/* 出發選單 */
.tv-kinds{display:flex;gap:12px;margin-top:14px}
.tv-kind{flex:1;background:#fff;border:2px solid #E8D9BE;border-radius:16px;padding:16px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;color:inherit}
.tv-kind:active{transform:scale(.97)}
.tv-kind-emoji{font-size:40px;line-height:1}
.tv-kind b{font-size:16px}
.tv-kind span{font-size:12px;color:#8A7A68}
/* 回來揭曉 */
.tv-reveal-card{text-align:center}
.tv-rv-tag{display:inline-block;background:#F2A63E;color:#fff;font-weight:800;padding:4px 16px;border-radius:999px;margin-bottom:10px}
.tv-postcard{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.22);
  border:5px solid #fff;margin:0 auto 10px;max-width:220px;animation:tvflip .55s ease}
.tv-postcard.rare{border-color:#FFE08A;box-shadow:0 6px 22px rgba(242,166,62,.5)}
/* 節慶限定景點（聖誕老人村）：明信片紅色閃光特效 */
.tv-postcard.glow-red{border-color:#ff5a5a;animation:pcRedGlow 1.6s ease-in-out infinite}
@keyframes pcRedGlow{0%,100%{box-shadow:0 0 10px 2px rgba(255,60,60,.55),0 6px 18px rgba(0,0,0,.22)}
  50%{box-shadow:0 0 26px 8px rgba(255,40,40,.9),0 6px 18px rgba(0,0,0,.22)}}
.tv-pc-stamp.stamp-red{background:#e4342c;color:#fff}
.tv-al-item.glow-red{border-color:#ff5a5a;animation:pcRedGlow 1.8s ease-in-out infinite}
.tv-postcard img{width:100%;max-height:50vh;object-fit:contain;display:block}
.tv-pc-stamp{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border-radius:8px;padding:2px 8px;font-weight:800;font-size:12px}
@keyframes tvflip{from{transform:perspective(600px) rotateY(90deg);opacity:0}to{transform:perspective(600px) rotateY(0);opacity:1}}
.tv-rv-name{margin:6px 0}
.tv-rv-story{color:#6B5A45;font-size:14px;margin:6px 0;line-height:1.6}
.tv-souvenir{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0}
.tv-souvenir img{width:92px;height:92px;object-fit:contain;box-sizing:border-box;padding:8px;background:rgba(255,255,255,.66);border-radius:18px;box-shadow:0 3px 12px rgba(242,166,62,.28)}
.tv-friend{display:flex;align-items:center;gap:12px;justify-content:center;background:#FFF6EC;border-radius:12px;padding:10px;margin:10px 0}
.tv-friend img{width:76px;height:76px;object-fit:contain;flex-shrink:0}
.tv-friend div{font-size:14px;color:#5a3b1e;text-align:left}
/* 🐾 這趟交到的動物朋友（原來不是亂說的兌現點） */
.tv-pal{display:flex;align-items:center;gap:12px;justify-content:center;background:linear-gradient(135deg,#fff3e0,#ffe9c9);border:2px solid #F2C14E;border-radius:14px;padding:10px 14px;margin:10px 0;box-shadow:0 2px 10px rgba(242,166,62,.25)}
.tv-pal-emoji{font-size:62px;line-height:1;flex-shrink:0;animation:tvPalPop .5s ease;width:92px;height:92px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:rgba(255,255,255,.72);border-radius:18px;box-shadow:0 3px 12px rgba(242,166,62,.28)}
@keyframes tvPalPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.tv-pal-text{font-size:14px;color:#5a3b1e;text-align:left;line-height:1.5}
.tv-pal-text b{font-size:16px;color:#B8860B}
.tv-rv-rewards{font-weight:800;color:#B8860B;margin:10px 0}
.tv-km{display:inline-block;margin:2px 0 8px;padding:6px 14px;border-radius:999px;background:#fff4dd;border:1.5px solid #ead7ae;color:#8a5a2a;font-weight:800;font-size:13.5px}
/* 👣 旅行中本次步數：接在 HUD 下方、置中純文字（拿掉對話框）；iPhone 瀏海用 safe-area 下推 */
.tv-steps{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:8;text-align:center;line-height:1.3;
  background:rgba(255,255,255,.9);border-radius:16px;padding:7px 18px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.tv-steps .tv-steps-lbl{display:block;font-size:12.5px;color:#a1876a;font-weight:700;}
.tv-steps .tv-steps-num{display:block;font-weight:900;color:#7a4a1e;font-size:14px;}
.tv-steps .tv-steps-num b{font-size:22px;color:#e8842a;margin-right:2px;}
body.is-travelling .tv-steps{top:calc(70px + env(safe-area-inset-top));}
/* 🔥 限時縮短行程活動：出發彈窗提醒條＋遊戲中心副標高亮 */
.tv-boost-tip{margin:8px auto 4px;max-width:92%;text-align:center;font-weight:800;font-size:13.5px;color:#c0512a;
  background:linear-gradient(135deg,#fff2e0,#ffe6d0);border:1.5px solid #f0c69a;border-radius:12px;padding:8px 12px;
  box-shadow:0 2px 8px rgba(200,90,20,.14);animation:boostPulse 1.6s ease-in-out infinite;}
@keyframes boostPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
.g-ic + b + small.boost-on, small.boost-on{color:#c0512a;font-weight:800;}
/* 👣 旅行結算的步數結語 */
.tv-steps-done{margin:2px 0 8px;padding:8px 16px;border-radius:14px;background:linear-gradient(135deg,#fff7ea,#fff0f2);
  border:1.5px solid #f0dcc2;color:#7a4a1e;font-weight:800;font-size:14px;}
.tv-steps-done b{color:#e8842a;font-size:18px;margin:0 2px;}
.tv-steps-done span{display:block;margin-top:2px;font-size:12px;color:#a1876a;font-weight:600;}
/* 紀念冊 */
/* 紀念冊分頁（明信片 / 名產圖鑑） */
.tv-al-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tv-al-tab{flex:1 1 auto;padding:8px 7px;border-radius:12px;border:2px solid #E8D9BE;background:#fff;font-weight:800;
  font-family:inherit;font-size:13px;color:#8A7A68;cursor:pointer;white-space:nowrap}
.tv-al-tab.active{background:#F2A63E;color:#fff;border-color:#F2A63E}
.tv-souv-count{text-align:center;margin:2px 0 10px}
/* 名產圖鑑格 */
.tv-souv-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;max-height:60vh;overflow-y:auto}
/* 🐾 動物圖鑑格子的 emoji 頭像 */
.tv-pal-dex-emoji{font-size:42px;line-height:1;margin:6px 0 2px}
.tv-souv-item{border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);border:3px solid #fff;
  padding:8px 4px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.tv-souv-item.rare{border-color:#FFE08A;box-shadow:0 3px 12px rgba(242,166,62,.4)}
.tv-souv-item img{width:60px;height:60px;object-fit:contain;display:block}
.tv-souv-item.locked{background:#F3EEE4;border-color:#F3EEE4;box-shadow:none}
.tv-souv-q{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:30px;
  font-weight:900;color:#CBBBA3;background:#E9E1D2;border-radius:50%}
.tv-souv-name{font-weight:700;font-size:12.5px;color:#5a3b1e;margin-top:4px;line-height:1.2}
.tv-souv-item.locked .tv-souv-name{color:#B7A88F}
.tv-album{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:60vh;overflow-y:auto}
.tv-al-item{border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);border:3px solid #fff}
.tv-al-item.rare{border-color:#FFE08A}
.tv-al-item img{width:100%;height:96px;object-fit:cover;display:block}
.tv-al-name{font-weight:700;font-size:13px;padding:4px 6px 0}
.tv-al-visits{font-size:11px;color:#8A7A68;padding:0 6px 6px}
/* 旅行天氣/時間濾鏡（純 CSS，不用圖）：switchWeather() 切換 .tv-scene 的天氣 class */
.tv-wx{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:0;transition:opacity .5s}
/* 🌆 黃昏 */
.tv-scene.w-sunset{filter:saturate(1.18) contrast(1.03)}
.tv-scene.w-sunset .tv-wx{opacity:.8;mix-blend-mode:soft-light;
  background:linear-gradient(180deg,rgba(255,150,50,.35),rgba(255,90,120,.24) 55%,rgba(120,60,120,.16))}
/* 🌌 夜間（v0.52.1：不再壓暗水彩背景圖——圖片維持原亮度，只加星星點綴） */
.tv-scene.w-night{filter:none}
.tv-scene.w-night .tv-wx{opacity:1;
  background:radial-gradient(rgba(255,255,255,.95) 0 1px,transparent 1.6px) 0 0/58px 46px,
            radial-gradient(rgba(255,255,255,.7) 0 1px,transparent 1.6px) 28px 22px/84px 66px,
            linear-gradient(rgba(18,26,66,.14),rgba(30,20,60,.10))}
/* 🌫️ 濃霧（最適合高美濕地等靠海景點）*/
.tv-scene.w-fog{filter:saturate(.75) contrast(.95)}
.tv-scene.w-fog .tv-far{filter:blur(3px);opacity:.4}
.tv-scene.w-fog .tv-wx{opacity:.75;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.6) 72%)}
/* ⚡ 打雷（疊在雨天上，畫面隨機暴亮）*/
.tv-scene.w-thunder .tv-wx{opacity:1;background:#fff;animation:tvthunder 6s infinite}
@keyframes tvthunder{0%,88%,100%{opacity:0}89%{opacity:.85}90%{opacity:.15}91%{opacity:.7}92%{opacity:0}96%{opacity:0}97%{opacity:.5}98%{opacity:0}}
/* 🤝 社團任務圖示放大到跟「點數兌換」的封面一樣大＝一眼看見（emoji／鮮豔圖版都套用方框） */
.fb-task-emoji{width:78px; height:78px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:50px; line-height:1; background:#FAF5EA; border:1px solid var(--cloud-line); border-radius:16px; overflow:hidden;}
.fb-task-img{width:78px; height:78px; object-fit:contain; padding:7px; line-height:0;}
.fb-task-main{flex:1; min-width:0;}
.fb-task-main b{font-size:16.5px; line-height:1.35;}
.fb-task-desc{margin:4px 0 6px; font-size:13.5px; color:#5F4F3B; line-height:1.65;}
.fb-task-meta{font-size:12.5px; color:#8A755D; line-height:1.5;}
@media (max-width:380px){ .fb-task-emoji{width:64px; height:64px; font-size:42px;} .fb-task-img{width:64px; height:64px;} }
/* 👗🐾 試衣間頂部兩大分頁：造型／寵物 */
.fr-subtabs{display:flex; gap:8px; margin:12px 0 10px;}
.fr-subtab{flex:1; padding:10px 8px; border:1.5px solid var(--cloud-line); border-radius:14px; background:#FBF6EC; color:#8A755D; font-size:15px; font-weight:800; cursor:pointer; transition:all .15s;}
.fr-subtab.on{background:var(--jade,#3E7C59); color:#fff; border-color:var(--jade,#3E7C59); box-shadow:0 2px 8px rgba(62,124,89,.22);}
.fr-panel.hidden{display:none;}
/* 狀態改成標題列右側小標＝文字敘述吃滿整寬 */
.fb-task-titlerow{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.fb-task-titlerow b{min-width:0;}
.fb-task-status{flex-shrink:0; white-space:nowrap; font-size:12px; font-weight:800; color:#A48F70; padding:2px 9px; border-radius:999px; background:#F3ECE0;}
.fb-task-status.ok{color:#fff; background:var(--jade);}

/* 出示給店員 */
.clerk-id{
  background:#FFF3DE; border:2px solid #F2C879; border-radius:var(--radius-md);
  padding:16px; text-align:center; margin:12px 0;
  display:flex; flex-direction:column; gap:4px;
}
.clerk-id-label{font-size:13px; color:#8A5A1B; font-weight:700;}
.clerk-id-phone{font-size:30px; font-weight:900; letter-spacing:2px; color:var(--berry);}
.clerk-id-name{font-size:14px; color:#8A755D;}
.clerk-pending{margin-top:10px;}
.clerk-pending ul{margin:6px 0 0; padding-left:18px; font-size:14px;}
.clerk-pending li{margin:3px 0;}

/* 任務完成慶祝 */
.task-celebrate-emoji{font-size:60px; text-align:center; animation:pop .6s ease;}
.task-celebrate-points{text-align:center; font-size:20px; font-weight:900; color:var(--berry); margin:4px 0 10px;}
.task-celebrate-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.task-celebrate-list li{
  background:#FFF3DE; border:1px solid #F2C879; border-radius:var(--radius-sm);
  padding:8px 12px; font-size:14px; text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .task-celebrate-emoji{animation:none !important;}
}

/* ---------- 寵物離家出走（全螢幕背景）/ 重新領養 ---------- */
/* 用整螢幕鋪滿的離家圖（手機直式 / 桌機橫式，圖用 background cover）。
   z-index:40 → 蓋住遊戲內容但低於底部導覽(60)，客人仍可切換分頁離開。
   背景圖由 app.js 依 狀態＋裝置 動態帶入；抓不到圖時退回深色雨夜底色。 */
.runaway-overlay{
  position:fixed; inset:0; z-index:40; overflow:hidden;
  background:#1b2230 center center / cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:calc(18px + env(safe-area-inset-top)) 18px 24px;
  animation:runawayFadeIn .4s ease both;
}
@keyframes runawayFadeIn{from{opacity:0;}to{opacity:1;}}
.runaway-panel{
  position:relative; z-index:3; width:100%; max-width:460px;
  background:rgba(255,248,236,.95); border-radius:var(--radius-lg);
  padding:20px 20px 22px; text-align:center; box-shadow:0 12px 34px rgba(0,0,0,.45);
}
.runaway-panel h2{font-family:var(--font-display); font-size:24px; margin:0 0 8px;}
.runaway-panel p{color:#6B5A45; margin:0 0 14px; line-height:1.7;}
.runaway-panel .btn{width:100%;}
.runaway-panel .btn + .btn{margin-top:8px;}
/* 下雨 + 閃電，鋪滿整個離家畫面 */
.runaway-overlay .rain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(100deg, rgba(255,255,255,0) 0 5px, rgba(255,255,255,.22) 5px 6px);
  background-size:100px 100px; animation:rainFall .55s linear infinite;}
@keyframes rainFall{0%{background-position:0 0;}100%{background-position:-24px 100px;}}
.runaway-overlay .lightning{position:absolute; inset:0; z-index:2; pointer-events:none; background:#fff; opacity:0;
  mix-blend-mode:screen; animation:lightningFlash 7s ease-in-out infinite;}
@keyframes lightningFlash{
  0%,42%{opacity:0;} 44%{opacity:.7;} 46%{opacity:.12;} 48%{opacity:.55;} 50%,84%{opacity:0;}
  86%{opacity:.45;} 88%{opacity:0;} 100%{opacity:0;}
}
/* 7 天（損失慘重）：對話框緊張急促風格——紅框、紅字、快速抖動 */
.runaway-panel.urgent{border:2px solid #C1483F;}
.runaway-panel.urgent h2{color:#C1483F;}
.runaway-panel.urgent{animation:urgentShake 3.2s ease-in-out infinite;}
@keyframes urgentShake{
  0%,86%,100%{transform:translateX(0);}
  88%{transform:translateX(-5px);} 90%{transform:translateX(5px);}
  92%{transform:translateX(-4px);} 94%{transform:translateX(4px);}
  96%{transform:translateX(-2px);} 98%{transform:translateX(2px);}
}
/* 風吹過：落葉/碎屑橫掃過整個離家畫面 */
.runaway-overlay .wind-leaf{position:absolute; left:0; z-index:2; pointer-events:none; opacity:0;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); animation:windBlow linear infinite;}
.runaway-overlay .wind-leaf.w1{top:18%; font-size:20px; animation-duration:3.4s; animation-delay:0s;}
.runaway-overlay .wind-leaf.w2{top:40%; font-size:26px; animation-duration:4.4s; animation-delay:1.3s;}
.runaway-overlay .wind-leaf.w3{top:62%; font-size:18px; animation-duration:3s; animation-delay:2.4s;}
@keyframes windBlow{
  0%{transform:translate(-12vw,0) rotate(0deg); opacity:0;}
  12%{opacity:.9;} 88%{opacity:.9;}
  100%{transform:translate(112vw,-46px) rotate(560deg); opacity:0;}
}
/* 風吹落葉只在 7 天「真的離家」時出現，3 天警告不顯示 */
.runaway-overlay:not(.runaway-gone) .wind-leaf{display:none;}
@media (prefers-reduced-motion: reduce){
  .runaway-overlay, .runaway-panel.urgent{animation:none !important;}
  .runaway-overlay .rain, .runaway-overlay .lightning, .runaway-overlay .wind-leaf{animation:none !important; opacity:0 !important;}
}
.runaway-warn{
  background:#FBEAE7; border:1.5px solid #E7A79B; border-radius:var(--radius-sm);
  padding:10px 12px; margin:8px 0; font-size:14px; color:#8A3B2E; font-weight:700; line-height:1.55;
}
.readopt-warn{
  background:#FBEAE7; border:1.5px solid #E7A79B; border-radius:var(--radius-sm);
  padding:12px 14px; margin:10px 0; font-size:14px; color:#8A3B2E; line-height:1.7;
}
.readopt-actions{display:flex; gap:10px; margin-top:14px;}
.readopt-actions .btn{flex:1; min-height:48px;}

/* ---------- 主人暱稱 / 改名 / 排行榜 / 王冠 ---------- */
.link-lite{background:none; border:none; color:var(--jade); font-size:13px; font-weight:700; cursor:pointer; padding:0 2px; text-decoration:underline;}
.owner-name-row{margin:0 0 6px; font-size:15px;}
.owner-name-row b{font-weight:900;}

.leaderboard{display:flex; flex-direction:column; gap:6px;}
.lb-row{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--cloud-line); border-radius:var(--radius-sm); padding:8px 12px; font-size:14px;}
.lb-rank{width:26px; text-align:center; font-weight:900; color:#A48F70; flex-shrink:0;}
.lb-pet{font-size:20px; flex-shrink:0; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; line-height:30px; text-align:center; position:relative;}
.lb-ava{width:30px; height:30px; border-radius:50%; object-fit:cover; background:#fff2d6; box-shadow:0 1px 3px rgba(0,0,0,.14);}
.lb-crown{position:absolute; left:50%; top:-9px; transform:translateX(-50%); width:18px; height:auto; z-index:2; pointer-events:none; filter:drop-shadow(0 1px 1px rgba(120,80,10,.35));
  animation:lbCrownFloat 2.6s ease-in-out infinite, lbCrownGlow 2s ease-in-out infinite;}   /* v0.60.151 穩穩坐在第 1 名圓圈上；v0.60.222 皇冠緩慢上下浮動＋微閃光 */
@keyframes lbCrownFloat{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-3px);}}
@keyframes lbCrownGlow{0%,100%{filter:drop-shadow(0 1px 1px rgba(120,80,10,.35));} 50%{filter:drop-shadow(0 0 6px rgba(255,215,90,.95));}}
.lb-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700;}
/* 🔑 金鑰匙徽章（有自己的家）：排行榜名字後方小徽章 */
.lb-key{width:22px; height:22px; vertical-align:-6px; margin-left:5px; filter:drop-shadow(0 1px 2px rgba(150,110,20,.45));}
/* 🔑 金鑰匙徽章（有自己的家）：主畫面寵物圓框左上角 */
.home-key-badge{position:absolute; left:-4px; top:-4px; width:34px; height:34px; z-index:6; pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(150,110,20,.45)); animation:homeKeyPop .5s cubic-bezier(.22,1.4,.5,1);}
@keyframes homeKeyPop{0%{transform:scale(0) rotate(-25deg); opacity:0;}100%{transform:scale(1) rotate(0); opacity:1;}}
.lb-score{color:#8A755D; font-size:13px; flex-shrink:0;}
.lb-row.lb-me{border-color:var(--marigold); background:#FFF3DE;}
/* 第 1 名：金牌外框＋金邊光暈＋名字金光（強化） */
.lb-row.lb-gold{position:relative; border:2.5px solid #E6B422;
  background:linear-gradient(100deg,#FFF7E0,#FFE9A8,#FFF6C2,#FFE9A8,#FFF7E0); background-size:220% 100%;
  box-shadow:0 0 0 2px #FFD966, 0 3px 14px rgba(230,180,34,.55);
  animation:goldPulse 2s ease-in-out infinite, goldFlow 3.6s linear infinite;}   /* v0.60.222 第1名金色流光背景（漸層橫向移動） */
@keyframes goldFlow{0%{background-position:0% 50%;} 100%{background-position:220% 50%;}}
/* 第1名內容疊在流光與粒子之上，保持清晰可讀 */
.lb-gold .lb-rank,.lb-gold .lb-pet,.lb-gold .lb-name,.lb-gold .lb-score{position:relative; z-index:4;}
@keyframes goldPulse{0%,100%{box-shadow:0 0 0 2px #FFD966, 0 3px 14px rgba(230,180,34,.5);}
  50%{box-shadow:0 0 0 3px #FFE083, 0 4px 24px rgba(242,194,75,.95);}}
.lb-gold .lb-rank{font-size:22px;}
.lb-gold .lb-name{background:linear-gradient(90deg,#7A5200,#E8B93A,#FFF3B0,#E8B93A,#7A5200); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;
  animation:champShine 2.2s linear infinite, champBlink 1.3s ease-in-out infinite;}
@keyframes champShine{0%{background-position:0% center;}100%{background-position:200% center;}}
/* 第 1 名名字：金光流動＋一閃一閃的金色光暈（加粗閃爍） */
@keyframes champBlink{0%,100%{text-shadow:0 0 0 rgba(255,214,90,0); opacity:1;}
  50%{text-shadow:0 0 10px rgba(255,205,70,.95), 0 0 3px rgba(255,235,150,.9); opacity:.9;}}
/* 第 2 名：銀牌外框＋名字銀光流動閃爍（比照第 1 名金光，改銀色）*/
.lb-row.lb-silver{border:2px solid #A9B2BC; background:linear-gradient(90deg,#F4F7FA,#DCE3EA); box-shadow:0 2px 10px rgba(150,160,170,.35);}
.lb-silver .lb-name{background:linear-gradient(90deg,#3A4149,#8A94A0,#CBD3DC,#8A94A0,#3A4149); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;
  animation:silverShine 2.4s linear infinite, silverBlink 1.5s ease-in-out infinite;}
@keyframes silverShine{0%{background-position:0% center;}100%{background-position:200% center;}}
@keyframes silverBlink{0%,100%{text-shadow:0 0 0 rgba(200,212,225,0); opacity:1;}
  50%{text-shadow:0 0 9px rgba(190,205,220,.9), 0 0 3px rgba(240,245,250,.85); opacity:.92;}}
/* 第 3 名：銅牌外框，平常就好、不閃爍 */
.lb-row.lb-bronze{position:relative; border:2px solid #C08457; background:linear-gradient(90deg,#FBF1E8,#F0DDCB);}
.lb-bronze .lb-name{color:#2B2B2B; font-weight:900;}

/* ===== 排行榜前三名：獨立「頒獎台」區塊 v0.60.222 =====
   前三名自成一區、與第 4 名以下用虛線分隔，視線自然聚焦；第 4 名以下維持原列表。 */
.lb-podium{display:flex; flex-direction:column; gap:9px; margin-bottom:12px; padding-bottom:12px;
  border-bottom:2px dashed #EAD9BB;}
.lb-podium .lb-row{padding:10px 12px;}
.lb-silver.lb-row{position:relative;}
/* 第 1 名卡片四角飄落的小葉／星光粒子（呼應生命樹世界觀），墊在文字底下不擋閱讀 */
.lb-fx{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; border-radius:inherit;}
.lb-fx i{position:absolute; font-size:11px; line-height:1; opacity:0; font-style:normal;
  animation:lbLeafFall 4.2s ease-in-out infinite;}
.lb-fx i:nth-child(1){left:5px;  top:1px;    animation-delay:0s;}
.lb-fx i:nth-child(2){right:6px; top:1px;    animation-delay:1.2s;}
.lb-fx i:nth-child(3){left:5px;  bottom:1px; animation-delay:2.3s;}
.lb-fx i:nth-child(4){right:6px; bottom:1px; animation-delay:3.1s;}
@keyframes lbLeafFall{0%{opacity:0; transform:translateY(-3px) rotate(0);}
  22%{opacity:.85;} 60%{opacity:.6;} 100%{opacity:0; transform:translateY(11px) rotate(38deg);}}
@media (prefers-reduced-motion:reduce){
  .lb-crown,.lb-fx i{animation:none !important;}
  .lb-row.lb-gold{animation:none !important; background-position:0 50% !important;}
  .lb-fx i{opacity:.5 !important;}
}

/* 我的點數紀錄 */
.ledger-list{display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto;}
.ledger-item{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--cloud-line); border-radius:var(--radius-sm); padding:8px 12px; font-size:13px;}
.ledger-delta{font-weight:900; flex-shrink:0; width:44px; text-align:right;}
.ledger-delta.plus{color:var(--jade);}
.ledger-delta.minus{color:var(--berry);}
.ledger-reason{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.ledger-time{color:#A48F70; font-size:12px; flex-shrink:0;}

/* 排行榜第 1 名本人 → 自己的寵物圓框加金光＋王冠 */
/* 王冠/帽子改用「頭上配件錨點系統」：見下方 .pet-anchor-box / .head-acc（每寵物×成長階段各自獨立的百分比錨點）*/
.pet-stage-wrap.champion{box-shadow:inset 0 0 0 6px #fff, 0 0 0 6px #F2C24B, 0 0 18px 4px rgba(242,194,75,.6) !important; animation:champGlow 2.2s ease-in-out infinite !important;}
@keyframes champGlow{0%,100%{box-shadow:inset 0 0 0 6px #fff, 0 0 0 6px #F2C24B, 0 0 16px 3px rgba(242,194,75,.5);}50%{box-shadow:inset 0 0 0 6px #fff, 0 0 0 8px #FFD966, 0 0 26px 8px rgba(242,194,75,.85);}}

/* ---------- 頭上配件錨點系統（帽子/皇冠共用一套；脖子配件見 .cos-neck）---------- */
/* 錨點層：對齊寵物「實際顯示圖片區」＝ 120/150 ＝ 80%；頭上配件都放這層，與寵物同一相對容器、同步縮放（手機/平板/電腦一致）*/
.pet-anchor-box{position:absolute; left:10%; top:10%; width:80%; height:80%; pointer-events:none; z-index:3;
  /* 🎩 v0.60.130 頭上配件（帽子/皇冠）與寵物「同步呼吸＋擺動」：套用與 .pet-emoji 相同的 petBreath+petSway、
     同一 transform-origin(50% 100%)＝同一支點，帽子/皇冠就會「黏」在頭上跟著動，不再靜止浮空、脫離頭部。
     帽子 img 自己的 rotate 由 .head-acc img 保留（一個動 box、一個動 img，互不打架）；
     兩層動畫同 4s/7s、同頁載入即開始＝相位同步，不會各走各的。 */
  transform-origin:50% 100%;
  animation:petBreath 4s ease-in-out infinite, petSway 7s ease-in-out infinite;
  will-change:transform, rotate; backface-visibility:hidden;}
/* 通用頭上配件：以「帽緣底部中央」為定位原點 translate(-50%,-100%)，對準寵物「頭頂中心錨點」(headX%,headY%)。
   數值由 JS 依「寵物×成長階段」寫入 CSS 變數，全部是容器百分比（不用固定像素）：
   --hx=headX  --hy=headY  --hw=hatWidth  --hox=offsetX  --hoy=offsetY  --hrot=rotation  --hz=zIndex；--hnudge=與皇冠共存時的讓位 */
.head-acc{position:absolute;
  left:calc(var(--hx,50%) + var(--hox,0%));
  top:calc(var(--hy,20%) + var(--hoy,0%) + var(--hnudge,0%));
  width:var(--hw,34%);
  transform:translate(-50%,-100%);
  z-index:var(--hz,4); pointer-events:none; line-height:1;}
.head-acc img{display:block; width:100%; height:auto;
  transform:rotate(var(--hrot,0deg)); transform-origin:50% 100%;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.22));}
/* emoji 帽子（沒有 <img>）：改用 font-size 縮放，一樣以底部中央對準頭頂 */
.head-acc:not(:has(img)){font-size:30px; text-align:center;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.22));
  transform:translate(-50%,-100%) rotate(var(--hrot,0deg));}
/* 冠軍皇冠：排行榜第 1 名才顯示 */
.pet-crown{display:none;}
.pet-stage-wrap.champion .pet-crown{display:block;
  /* v0.60.140 冠軍皇冠加回＋位置修正：--hoy -3%（真圖 render 五格比對 8/2/0/-3/-6：8%壓眼、2%與0%偏低、-3%穩坐頭頂、-6%偏高）。
     ★真兇是快取：先前 push 沒跑 bump-version.mjs、?v= 停在 0.60.103＝瀏覽器吃舊檔（已用 console 證實），修正從沒上線★。
     單一微調 knob：偏低↓給更負值、偏高↑給正值。 */
  --hw:24%; --hoy:-14%; --hz:5;}   /* v0.60.151 店長回報 -6% 仍偏低卡在額頭：大幅上移到 -14%（--hoy 每 3% 只移約 2.4% 畫面、且皇冠圖底部毛邊墊高，小 step 沒感覺）；若浮太高回 -10、仍偏低到 -18 */
.pet-crown img{filter:drop-shadow(0 1px 2px rgba(90,70,20,.32));}
/* v0.60.136 防呆：頭上同時間只准一頂。玩家戴了造型帽 → 自動冠軍皇冠就不同時顯示（金光圈仍代表冠軍），
   造型帽維持正常頭頂位置、不再往下讓位。徹底解決「兩頂疊＋皇冠壓到眼睛」。忠實 render 驗證(豬)。
   （沿用既有 :has() 用法，見 .head-acc:not(:has(img)))；空帽 innerHTML='' ＝ :empty，不會誤觸發） */
.pet-stage-wrap.champion .cos-hat{--hz:3;}
.pet-stage-wrap.champion:has(.cos-hat:not(:empty)) .pet-crown{display:none !important;}
/* 👑 皇冠類造型帽（愛心皇冠/金皇冠）：比一般帽子小＋往下坐，避免太大浮在頭上（v0.60.110） */
.cos-hat.is-crown{--hw:25%; --hoy:6%;}
/* 🏆 週冠軍帽：玩家在試衣間「拿下」時只隱藏皇冠、金光圈保留（v0.60.110） */
.pet-stage-wrap.champion.crown-off .pet-crown{display:none !important;}

/* ---------- 造型配件貼圖（脖子／周圍特效）---------- */
/* 脖子配件落點仍用每隻 --cos-neck-top（脖子高度不同）*/
.cos-neck{position:absolute; top:var(--cos-neck-top,92px); left:50%; transform:translateX(-50%); font-size:26px; line-height:1; z-index:3; filter:drop-shadow(0 2px 2px rgba(0,0,0,.2)); pointer-events:none;}
.cos-effect{position:absolute; inset:0; z-index:1; pointer-events:none;}
/* emoji 環繞式特效：整圈繞著寵物轉 */
.cos-effect.orbit{animation:cosSpin 9s linear infinite;}
.cos-effect.orbit span{position:absolute; top:50%; left:50%; font-size:17px; margin:-9px; line-height:1;
  transform:rotate(calc(var(--i) * 60deg)) translateY(-80px);}
@keyframes cosSpin{to{transform:rotate(360deg);}}
/* 配件用圖檔時的尺寸 */
.cos-neck img{width:48px; height:auto; display:block;}
.cos-effect.orbit span img{width:16px; height:auto; display:block;}

/* 單張置中光環：環狀去背 PNG 套在寵物外圈（中間透空讓寵物露出），置於寵物身後、慢慢旋轉 */
.cos-effect.ring{display:flex; align-items:center; justify-content:center; z-index:-1; animation:cosSpin 16s linear infinite;}
.cos-effect.ring img{width:205px; height:205px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(255,205,90,.4));}

/* 光芒四射特效（fx:rays）：金色放射光束置於寵物身後、慢慢旋轉並忽明忽暗（沿用閃亮階段的光芒）*/
.cos-effect.fx-rays{z-index:-1;}
.cos-effect.fx-rays::before{content:""; position:absolute; top:50%; left:50%; width:235px; height:235px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,214,120,.9) 0deg 5deg, rgba(255,214,120,0) 5deg 22deg);
  -webkit-mask:radial-gradient(circle, #000 30%, rgba(0,0,0,.5) 52%, transparent 74%);
          mask:radial-gradient(circle, #000 30%, rgba(0,0,0,.5) 52%, transparent 74%);
  animation:shinyRays 12s linear infinite, shinyTwinkle 3s ease-in-out infinite;}

/* ---------- 純 CSS 周圍特效（造型貼圖填 fx:代號 就套用）---------- */
/* 發光光暈：金色 / 粉色 */
.cos-effect.fx-glow-gold,.cos-effect.fx-glow-pink{border-radius:50%; animation:fxGlowPulse 1.8s ease-in-out infinite;}
.cos-effect.fx-glow-gold{box-shadow:0 0 22px 7px rgba(255,205,80,.8), inset 0 0 16px 3px rgba(255,215,90,.55);}
.cos-effect.fx-glow-pink{box-shadow:0 0 22px 7px rgba(255,140,185,.8), inset 0 0 16px 3px rgba(255,160,200,.55);}
@keyframes fxGlowPulse{0%,100%{opacity:.6; transform:scale(1);}50%{opacity:1; transform:scale(1.05);}}
/* 彩虹光環：繞著寵物邊緣旋轉 */
.cos-effect.fx-rainbow{border-radius:50%; opacity:.85; animation:cosSpin 4s linear infinite;
  background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#2dd4bf,#60a5fa,#c084fc,#ff5f6d);
  -webkit-mask:radial-gradient(circle, transparent 65%, #000 67%, #000 79%, transparent 81%);
  mask:radial-gradient(circle, transparent 65%, #000 67%, #000 79%, transparent 81%);}
/* 金色光環（頭頂天使圈）*/
.cos-effect.fx-halo::before{content:""; position:absolute; top:-8px; left:50%; width:72px; height:22px;
  transform:translateX(-50%); border:4px solid rgba(255,215,90,.92); border-radius:50%;
  box-shadow:0 0 12px rgba(255,215,90,.85); animation:fxHalo 2.4s ease-in-out infinite;}
@keyframes fxHalo{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-3px);}}
/* 愛心飄飄：從下往上冒愛心 */
.cos-effect.fx-hearts i{position:absolute; bottom:8px; left:calc(50% + (var(--i) - 2) * 16px); color:#ff6b8a;
  font-size:16px; font-style:normal; opacity:0; animation:fxHeartRise 2.4s ease-in infinite;
  animation-delay:calc(var(--i) * .42s);}
@keyframes fxHeartRise{0%{opacity:0; transform:translate(-50%,12px) scale(.5);}20%{opacity:1;}100%{opacity:0; transform:translate(-50%,-92px) scale(1.15);}}
/* 星星閃爍：四周一閃一閃 */
.cos-effect.fx-sparkle i{position:absolute; color:#FFE9A0; font-size:15px; font-style:normal;
  text-shadow:0 0 6px rgba(255,220,120,.9); animation:wxTwinkle 1.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * .3s);}
.cos-effect.fx-sparkle i:nth-child(1){top:4%; left:22%;}
.cos-effect.fx-sparkle i:nth-child(2){top:12%; left:76%;}
.cos-effect.fx-sparkle i:nth-child(3){top:52%; left:88%;}
.cos-effect.fx-sparkle i:nth-child(4){top:82%; left:70%;}
.cos-effect.fx-sparkle i:nth-child(5){top:74%; left:14%;}
.cos-effect.fx-sparkle i:nth-child(6){top:40%; left:6%;}
@media (prefers-reduced-motion: reduce){
  .cos-effect, .cos-effect *{animation:none !important;}
}

/* ---------- 造型商城 ---------- */
.shop-balance{margin:2px 0 12px; font-size:15px;}
.shop-balance b{font-weight:900;}
.shop-slot{margin-bottom:14px;}
.shop-slot-title{margin:0 0 8px; font-size:15px; color:var(--marigold-deep); border-left:4px solid var(--marigold); padding-left:8px;}
.shop-grid{display:flex; flex-direction:column; gap:8px;}
.shop-item{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--cloud-line);
  border-radius:var(--radius-sm); padding:8px 12px;}
.shop-item.equipped{border-color:var(--marigold); background:#FFF6E6;}
.shop-sticker{font-size:30px; width:44px; text-align:center; flex-shrink:0; line-height:1;}
.shop-sticker img{width:40px; height:auto; vertical-align:middle;}
/* 整隻換外觀：商城用整隻寵物大圖預覽 */
.shop-item.skin .shop-sticker{width:88px; flex:0 0 auto;}
.shop-item.skin .shop-sticker img{width:84px; height:auto; vertical-align:middle;}
.cos-skin-demo img{width:84px; height:auto; display:block; margin:0 auto;}
/* 商城預覽中央的「代表寵物」小圖（取代 🐾） */
.cos-demo .p img.demo-pet{width:22px; height:22px; object-fit:contain; display:block;}
/* 商城裡的周圍特效預覽放大，讓光環/特效清楚框住寵物 */
.shop-item.fx .shop-sticker{width:76px; height:76px; position:relative; flex:0 0 auto;}
.shop-item.fx .shop-sticker .cos-demo{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1.6);}
.shop-info{flex:1; min-width:0; display:flex; flex-direction:column;}
.shop-info b{font-weight:800;}

/* 造型特效「會動」的小預覽（前台商城 & 後台清單共用）*/
.cos-demo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;flex:0 0 auto;vertical-align:middle;background:radial-gradient(circle at 50% 42%,#FFF3DE,#F7D89F);}
.cos-demo .p{font-size:16px;line-height:1;position:relative;z-index:1;}
.cos-demo .fx{position:absolute;inset:0;border-radius:50%;pointer-events:none;}
.cos-demo .fx-rays::before{content:"";position:absolute;top:50%;left:50%;width:66px;height:66px;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,200,90,.95) 0deg 5deg,rgba(255,200,90,0) 5deg 22deg);-webkit-mask:radial-gradient(circle,#000 22%,transparent 70%);mask:radial-gradient(circle,#000 22%,transparent 70%);animation:cosDemoRays 9s linear infinite;}
.cos-demo .fx-glow-gold{box-shadow:0 0 11px 3px rgba(255,205,80,.9),inset 0 0 9px 2px rgba(255,215,90,.6);animation:cosDemoPulse 1.6s ease-in-out infinite;}
.cos-demo .fx-glow-pink{box-shadow:0 0 11px 3px rgba(255,140,185,.9),inset 0 0 9px 2px rgba(255,160,200,.6);animation:cosDemoPulse 1.6s ease-in-out infinite;}
.cos-demo .fx-rainbow{background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#2dd4bf,#60a5fa,#c084fc,#ff5f6d);-webkit-mask:radial-gradient(circle,transparent 54%,#000 57%,#000 86%,transparent 90%);mask:radial-gradient(circle,transparent 54%,#000 57%,#000 86%,transparent 90%);animation:cosDemoSpin 4s linear infinite;}
.cos-demo .fx-halo::before{content:"";position:absolute;top:4px;left:50%;width:26px;height:9px;transform:translateX(-50%);border:3px solid rgba(255,215,90,.95);border-radius:50%;box-shadow:0 0 8px rgba(255,215,90,.9);animation:cosDemoBob 2s ease-in-out infinite;}
.cos-demo .fx-hearts i,.cos-demo .fx-sparkle i{position:absolute;left:50%;bottom:7px;font-style:normal;font-size:13px;line-height:1;animation:cosDemoFloat 1.7s ease-in-out infinite;}
.cos-demo .fx-hearts i{color:#ff6b9d;}
.cos-demo .fx-hearts i:nth-child(2),.cos-demo .fx-sparkle i:nth-child(2){animation-delay:.85s;left:60%;}
.cos-demo .fx-ring img{position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);object-fit:contain;animation:cosDemoRingSpin 12s linear infinite;}
@keyframes cosDemoSpin{to{transform:rotate(360deg);}}
@keyframes cosDemoRays{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes cosDemoRingSpin{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes cosDemoPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
@keyframes cosDemoBob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-2.5px);}}
@keyframes cosDemoFloat{0%{transform:translateX(-50%) translateY(2px);opacity:0;}25%{opacity:1;}100%{transform:translateX(-50%) translateY(-20px);opacity:0;}}
.shop-price{font-size:13px; color:#8A755D;}
.shop-btn{flex-shrink:0; min-height:40px; padding:8px 16px; font-size:14px;}
@media (prefers-reduced-motion: reduce){ .cos-effect{animation:none !important;} }

/* 出示給店員：自主勾選 */
.clerk-checks{display:flex; flex-direction:column; gap:8px; margin:12px 0;}
.clerk-check{display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--cloud-line); border-radius:var(--radius-sm); padding:12px 14px; font-size:15px; cursor:pointer;}
.clerk-check input{width:20px; height:20px; flex-shrink:0;}

@media (prefers-reduced-motion: reduce){
  .lb-row.lb-gold, .lb-gold .lb-name, .lb-silver .lb-name, .pet-stage-wrap.champion, .pet-stage-wrap.champion .pet-crown{animation:none !important;}
}

/* ============================================================
   天氣模擬（每 12 小時隨機一種）：晴/陰/雨/颱風/雪/暴雨/霧/沙塵
   .weather-layer 蓋在「最上層」（z-index:55，卡片之上、導覽列與彈窗之下），
   pointer-events:none 不會擋到點擊；粒子（雨滴/雪花…）會穿透卡片浮在最上面。
   ::before = 天氣色調（放輕，避免蓋掉文字）；::after = 白天/夜晚明暗。
   由 app.js 依天氣塞入對應粒子（.wx-drop / .wx-flake …），
   並依台灣時間在 <body data-daynight="day|night"> 切換晝夜。
   ============================================================ */
.weather-layer{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:55;}
body.runaway-active .weather-layer{display:none;}
/* 天氣色調：放在粒子下方，透明度調低，讓卡片文字仍清楚 */
.weather-layer::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; z-index:0;}
.weather-layer.wx-rain::before{opacity:1; background:linear-gradient(180deg, rgba(70,90,120,.16), rgba(50,70,100,.10));}
.weather-layer.wx-storm::before{opacity:1; background:linear-gradient(180deg, rgba(30,42,64,.26), rgba(20,30,52,.16));}
.weather-layer.wx-typhoon::before{opacity:1; background:linear-gradient(180deg, rgba(40,55,78,.22), rgba(30,44,66,.14));}
.weather-layer.wx-cloudy::before{opacity:1; background:linear-gradient(180deg, rgba(140,148,160,.22), rgba(160,166,176,.12));}
.weather-layer.wx-snow::before{opacity:1; background:linear-gradient(180deg, rgba(200,220,240,.16), rgba(180,205,230,.08));}
.weather-layer.wx-sunny::before{opacity:1; background:radial-gradient(120% 80% at 72% -8%, rgba(255,236,170,.34), rgba(255,240,190,0) 62%);}
.weather-layer.wx-drizzle::before{opacity:1; background:linear-gradient(180deg, rgba(120,135,155,.14), rgba(110,125,145,.08));}
.weather-layer.wx-sunshower::before{opacity:1; background:radial-gradient(120% 80% at 72% -8%, rgba(255,236,170,.28), rgba(255,240,190,0) 60%);}
.weather-layer.wx-frost::before{opacity:1; background:linear-gradient(180deg, rgba(190,215,240,.30), rgba(210,228,245,.18));}
.weather-layer.wx-meteor::before{opacity:1; background:linear-gradient(180deg, rgba(14,20,45,.45), rgba(20,28,58,.30));}
.weather-layer.wx-sakura::before{opacity:1; background:linear-gradient(180deg, rgba(255,220,232,.24), rgba(255,232,240,.10));}
.weather-layer.wx-maple::before{opacity:1; background:linear-gradient(180deg, rgba(230,170,110,.24), rgba(235,190,140,.12));}

/* ===== v0.43.6 新增天氣（v0.43.8 保留：梅雨/濃霧/雷電交加）===== */
.weather-layer.wx-meiyu::before{opacity:1; background:linear-gradient(180deg, rgba(120,140,120,.26), rgba(150,165,150,.15));}
.weather-layer.wx-fog::before{opacity:1; background:linear-gradient(180deg, rgba(215,220,220,.36), rgba(228,231,231,.24));}
.weather-layer.wx-thunderstorm::before{opacity:1; background:linear-gradient(180deg, rgba(26,28,40,.44), rgba(20,22,34,.32));}
.wx-haze{position:absolute; inset:0; background:rgba(200,210,190,.22);}            /* 梅雨濕氣霧 */
.wx-fog{position:absolute; left:-30%; width:160%; height:72px; background:rgba(255,255,255,.72); border-radius:50%; filter:blur(12px); animation:wxDrift linear infinite;}
@keyframes wxDrift{from{transform:translateX(-10%);}to{transform:translateX(10%);}}

/* 白天／夜晚：
   夜晚的「深藍夜色」放在 .night-dim（z-index:0，位於卡片後方），只壓暗背景、不會蓋到卡片文字，
   所以可以壓得夠深、真的像夜晚；卡片維持明亮像「暗房間裡點著燈的畫面」。
   .weather-layer::after 只在夜晚給整體一層很淡的冷色調（包含卡片），淡到不影響閱讀。 */
.night-dim{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.5s ease;
  background:linear-gradient(180deg, rgba(16,22,52,.44), rgba(6,10,30,.62));}
body[data-daynight="night"] .night-dim{opacity:1;}
body.runaway-active .night-dim{display:none;}

.weather-layer::after{content:""; position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease; z-index:2;}
body[data-daynight="night"] .weather-layer::after{opacity:1;
  background:linear-gradient(180deg, rgba(24,32,68,.08), rgba(14,20,44,.06));}
body[data-daynight="day"] .weather-layer::after{opacity:0;}
/* 夜晚時晴天光暈壓深；流星本身就是夜空，::after 不再疊加避免過黑 */
body[data-daynight="night"] .weather-layer.wx-sunny::before{background:radial-gradient(120% 80% at 72% -8%, rgba(255,236,170,.12), rgba(255,240,190,0) 62%);}
body[data-daynight="night"] .weather-layer.wx-meteor::after{opacity:0;}

/* 雨滴（多種雨共用，寬度與長度由 JS 依天氣設定）*/
.wx-drop{position:absolute; top:-12%; width:2px; height:var(--h,18px);
  background:linear-gradient(180deg, rgba(200,225,255,0), rgba(205,228,255,.9)); border-radius:2px;
  animation:wxFall .7s linear infinite;}
@keyframes wxFall{0%{transform:translateY(-20vh);}100%{transform:translateY(122vh);}}
/* 颱風：雨勢明顯傾斜、橫掃（加大斜度）*/
.wx-typhoon .wx-drop{animation-name:wxFallSlant;}
@keyframes wxFallSlant{
  0%{transform:translate(14vw,-20vh) rotate(35deg);}
  100%{transform:translate(-16vw,122vh) rotate(35deg);}
}
/* 暴雨：雨珠更亮更粗 */
.wx-storm .wx-drop{background:linear-gradient(180deg, rgba(210,230,255,0), rgba(220,235,255,1)); border-radius:3px;}
/* 毛毛雨：細細淡淡 */
.wx-drizzle .wx-drop{opacity:.55;}

/* 閃電（暴雨／颱風）：由 JS 觸發 .flashing 才閃一下，間奏不固定、有時連續 */
.wx-flash{position:absolute; inset:0; background:#fff; opacity:0;}
.wx-flash.flashing{animation:wxFlash .5s ease-out;}
@keyframes wxFlash{0%{opacity:0;}8%{opacity:.78;}16%{opacity:.1;}30%{opacity:.55;}100%{opacity:0;}}

/* 雪花／冰晶 */
.wx-flake{position:absolute; top:-8%; color:#fff; text-shadow:0 0 5px rgba(255,255,255,.85);
  animation:wxSnow linear infinite;}
@keyframes wxSnow{
  0%{transform:translate(0,-10vh) rotate(0);}
  100%{transform:translate(var(--sway,0),116vh) rotate(360deg);}
}
/* 寒流結霜：畫面邊角結一層白霜 */
.wx-frost-tl,.wx-frost-br{position:absolute; width:46%; height:46%;}
.wx-frost-tl{top:0; left:0; background:radial-gradient(circle at 0 0, rgba(224,240,255,.6), rgba(224,240,255,0) 70%);}
.wx-frost-br{bottom:0; right:0; background:radial-gradient(circle at 100% 100%, rgba(224,240,255,.6), rgba(224,240,255,0) 70%);}

/* 晴天：右上角太陽光暈＋放射光芒（旋轉）＋閃亮 */
.wx-sun{position:absolute; top:-15%; right:-10%; width:52vw; height:52vw; max-width:300px; max-height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,180,1) 0%, rgba(255,232,140,.85) 30%, rgba(255,222,125,.3) 55%, rgba(255,222,125,0) 72%);
  animation:wxSunPulse 4s ease-in-out infinite;}
@keyframes wxSunPulse{0%,100%{transform:scale(1); opacity:.9;}50%{transform:scale(1.1); opacity:1;}}
/* 太陽雨的太陽小一點、淡一點 */
.wx-sunshower .wx-sun{width:40vw; height:40vw; max-width:220px; max-height:220px; opacity:.85;}
/* 放射狀光芒：用 conic-gradient 做出一條條光束，慢慢旋轉 */
.wx-rays{position:absolute; top:-15%; right:-10%; width:52vw; height:52vw; max-width:300px; max-height:300px;
  border-radius:50%; opacity:.55; transform-origin:center;
  background:repeating-conic-gradient(from 0deg, rgba(255,236,150,.55) 0deg 6deg, rgba(255,236,150,0) 6deg 20deg);
  -webkit-mask-image:radial-gradient(circle, #000 8%, rgba(0,0,0,.5) 40%, transparent 72%);
  mask-image:radial-gradient(circle, #000 8%, rgba(0,0,0,.5) 40%, transparent 72%);
  animation:wxRays 26s linear infinite;}
@keyframes wxRays{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.wx-spark{position:absolute; color:#FFE9A0; text-shadow:0 0 6px rgba(255,220,120,.9);
  animation:wxTwinkle 3s ease-in-out infinite;}
@keyframes wxTwinkle{0%,100%{opacity:0; transform:scale(.6);}50%{opacity:1; transform:scale(1.2);}}

/* 陰天：圓潤蓬鬆的灰雲（柔和、不再長條），慢慢飄過 */
.wx-cloud{position:absolute; left:-30%; width:210px; height:78px; opacity:.7;
  background:
    radial-gradient(closest-side at 28% 68%, rgba(158,166,178,.9), rgba(158,166,178,0)),
    radial-gradient(closest-side at 50% 42%, rgba(170,178,190,.95), rgba(170,178,190,0)),
    radial-gradient(closest-side at 72% 66%, rgba(150,158,172,.88), rgba(150,158,172,0)),
    radial-gradient(closest-side at 50% 82%, rgba(160,168,180,.85), rgba(160,168,180,0));
  filter:blur(6px); animation:wxDrift linear infinite;}
@keyframes wxDrift{0%{transform:translateX(-30vw) scale(var(--sc,1));}100%{transform:translateX(150vw) scale(var(--sc,1));}}

/* 颱風：落葉從上方被吹著「斜向飄落」（右上→左下，--dx 為向左位移），不規則翻滾 */
.wx-swirl{position:absolute; top:-8%; font-size:22px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
  animation:wxSwirl linear infinite;}
@keyframes wxSwirl{
  0%{transform:translate(0,-10vh) rotate(0deg) scale(1);}
  18%{transform:translate(calc(var(--dx,-40vw) * .16),12vh) rotate(160deg) scale(.9);}
  38%{transform:translate(calc(var(--dx,-40vw) * .36),34vh) rotate(300deg) scale(1.08);}
  58%{transform:translate(calc(var(--dx,-40vw) * .56),56vh) rotate(560deg) scale(.88);}
  80%{transform:translate(calc(var(--dx,-40vw) * .8),82vh) rotate(760deg) scale(1.06);}
  100%{transform:translate(var(--dx,-40vw),120vh) rotate(1040deg) scale(1);}
}

/* 季節落花／落葉（櫻花、楓葉）：飄落＋左右擺盪＋翻轉 */
.wx-petal{position:absolute; top:-6%; filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));
  animation:wxPetal linear infinite;}
@keyframes wxPetal{
  0%{transform:translate(0,-8vh) rotate(0);}
  25%{transform:translate(calc(var(--sway,40px) * .6),28vh) rotate(140deg);}
  50%{transform:translate(calc(var(--sway,40px) * -.4),56vh) rotate(240deg);}
  75%{transform:translate(calc(var(--sway,40px) * .5),84vh) rotate(360deg);}
  100%{transform:translate(0,116vh) rotate(480deg);}
}

/* 流星（夜晚限定）：靜止星點＋不時劃過的流星 */
.wx-star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff;
  box-shadow:0 0 4px 1px rgba(255,255,255,.9); animation:wxStarTwinkle var(--tw,2s) ease-in-out infinite;}
@keyframes wxStarTwinkle{0%,100%{opacity:.25; transform:scale(.7);}50%{opacity:1; transform:scale(1);}}
/* 流星：平常隱藏，由 JS 觸發 .shooting 才劃過一次（位置、方向、間隔都隨機）*/
.wx-meteor{position:absolute; width:3px; height:3px; border-radius:50%; background:#fff;
  box-shadow:0 0 6px 2px rgba(255,255,255,.9); opacity:0;}
.wx-meteor::before{content:""; position:absolute; right:1px; top:1px; width:90px; height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85)); transform:rotate(35deg); transform-origin:right center;}
.wx-meteor.shooting{animation:wxShoot 1.1s ease-in;}
@keyframes wxShoot{
  0%{transform:translate(0,0); opacity:0;}
  8%{opacity:1;}
  90%{transform:translate(var(--mx,-44vw), var(--my,32vh)); opacity:1;}
  100%{transform:translate(var(--mx,-44vw), var(--my,32vh)); opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .weather-layer *{animation:none !important;}
  .wx-drop, .wx-flake, .wx-swirl, .wx-petal, .wx-meteor{display:none !important;}
}

/* ---------- 團購頁「本週主打」banner ---------- */
.shop-banner{margin-bottom:12px;}
.shop-banner-inner{display:block; position:relative; text-decoration:none; color:#fff;
  background:linear-gradient(120deg, #F2A63E, #E0742A); border-radius:var(--radius-lg);
  padding:12px 14px; box-shadow:0 6px 18px rgba(224,116,42,.4); overflow:hidden;}
.shop-banner-inner::after{content:"🛍️"; position:absolute; right:8px; bottom:-10px; font-size:52px; opacity:.20;}
.shop-banner-tag{display:inline-block; background:rgba(255,255,255,.28); border-radius:20px;
  padding:2px 11px; font-size:12px; font-weight:700; margin-bottom:6px;}
/* 標題＋金額同一行、金額緊接在標題後面（加粗），版面縮緊 */
.shop-banner-row{display:flex; align-items:baseline; justify-content:flex-start; gap:8px; position:relative; z-index:1;}
.shop-banner-title{font-size:17px; font-weight:900; line-height:1.25; flex:0 1 auto; min-width:0;}
.shop-banner-price{font-size:22px; font-weight:900; white-space:nowrap; flex:none; letter-spacing:.3px;}
.shop-banner-cta{display:inline-block; margin-top:8px; background:#fff; color:#D9862A;
  font-weight:900; font-size:13.5px; padding:7px 15px; border-radius:24px; position:relative; z-index:1;}

/* ---------- 今日推薦・商品輪播（自動＋可手動滑） ---------- */
.shop-reco{margin:16px 0 14px;}
.shop-reco-head{display:flex; align-items:center; gap:7px; margin-bottom:8px;}
.shop-reco-ic{font-size:18px;}
.shop-reco-lab{font-weight:900; color:#7a5220; font-size:15px;}
.shop-reco-dots{display:flex; gap:5px; margin-left:auto;}
.shop-reco-dot{width:6px; height:6px; border-radius:50%; background:#e0d3b4; transition:.2s;}
.shop-reco-dot.on{background:#E0742A; width:16px; border-radius:999px;}
.shop-reco-vp{overflow:hidden; border-radius:var(--radius-lg); touch-action:pan-y;}
.shop-reco-track{display:flex; transition:transform .35s cubic-bezier(.4,.1,.3,1); will-change:transform;}
.shop-reco-slide{flex:0 0 100%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between;
  gap:10px; min-height:92px; text-decoration:none; color:#4a3312;
  background:linear-gradient(180deg,#fff,#fff7ea); border:1.5px solid #f0dfbc; border-radius:var(--radius-lg);
  padding:14px 16px; box-shadow:0 3px 12px rgba(120,80,20,.08);}
.shop-reco-title{font-size:16px; font-weight:900; line-height:1.35;}
.shop-reco-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.shop-reco-price{font-size:20px; font-weight:900; color:#D9720F; white-space:nowrap;}
.shop-reco-go{flex:none; background:#E0742A; color:#fff; font-weight:900; font-size:13px; padding:7px 15px; border-radius:24px;}

/* ---------- 邀請好友卡 ---------- */
.invite-code-box{background:#FFF3DE; border:1.5px dashed var(--marigold); border-radius:var(--radius-sm);
  padding:10px 14px; margin:10px 0; font-size:16px; text-align:center;}
.invite-code-box b{font-size:22px; font-weight:900; letter-spacing:2px; color:var(--marigold-deep);}
.invite-qr{display:flex; justify-content:center; margin:10px 0;}
.invite-qr img, .invite-qr canvas{border:6px solid #fff; border-radius:12px; box-shadow:var(--shadow);}

/* 寵物旅行按鈕（放在會員階級下方）：藍綠色系，跟上下卡片拉開間距 */
.btn-travel{width:100%; background:linear-gradient(120deg,#4FA3C7,#3B7FA8); color:#fff; margin:2px 0 16px;}
.btn-travel:active{filter:brightness(.95);}

/* ================= 每週排行榜頒獎台 & 週成績卡（v0.29.4） ================= */
.wk-modal{z-index:120;overflow-y:auto;background:rgba(48,34,24,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wk-modal>.wk-podium-wrap,.wk-modal>.wk-card{margin:auto}
.wk-podium-wrap{position:relative;width:100%;max-width:430px;animation:wk-pop .5s cubic-bezier(.2,1.3,.35,1) both}
@keyframes wk-pop{0%{transform:scale(.75) translateY(24px);opacity:0}100%{transform:scale(1);opacity:1}}
.wk-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}
.wk-tab{border:none;font-family:inherit;font-weight:800;font-size:13px;color:#8a7457;background:#FFF3DD;border:2px solid #F2DDB2;border-radius:999px;padding:6px 13px;cursor:pointer;transition:.12s}
.wk-tab.on{color:#fff;transform:translateY(-1px)}
.wk-tab.on[data-fx=active]{background:linear-gradient(180deg,#FFA24D,#F2662B);border-color:#F2662B;box-shadow:0 3px 0 #d9531a}
.wk-tab.on[data-fx=grow]{background:linear-gradient(180deg,#7BD08A,#3Fa85f);border-color:#3Fa85f;box-shadow:0 3px 0 #2f8c4a}
.wk-tab.on[data-fx=task]{background:linear-gradient(180deg,#7FB8FF,#3B7BE0);border-color:#3B7BE0;box-shadow:0 3px 0 #2b5fbf}
.wk-tab.on[data-fx=point]{background:linear-gradient(180deg,#FFC24D,#F2942B);border-color:#F2942B;box-shadow:0 3px 0 #d97c14}
.wk-polaroid{position:relative;background:#fffdf8;padding:14px 14px 56px;border-radius:8px;box-shadow:0 22px 46px rgba(120,80,20,.32),0 2px 0 #fff inset;transform:rotate(-1.4deg)}
.wk-polaroid::before,.wk-polaroid::after{content:"";position:absolute;top:-12px;width:96px;height:30px;background:rgba(214,225,235,.55);border:1px solid rgba(255,255,255,.5);border-radius:2px;box-shadow:0 2px 5px rgba(0,0,0,.08)}
.wk-polaroid::before{left:22px;transform:rotate(-7deg)}.wk-polaroid::after{right:22px;transform:rotate(6deg)}
.wk-photo{position:relative;height:min(52vh,340px);border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#FFF0D2,#FCE3B4 55%,#F6D49A);transition:background .4s}
.wk-photo.grow{background:linear-gradient(180deg,#EAF7E4,#D6EFCB 55%,#BFE3B0)}
.wk-photo.task{background:linear-gradient(180deg,#E8F1FF,#D3E4FB 55%,#BBD3F4)}
.wk-photo.point{background:linear-gradient(180deg,#FFF4D6,#FCE7AE 55%,#F6D889)}
.wk-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;filter:blur(1px)}
.wk-conf i{position:absolute;top:-24px;border-radius:2px;opacity:.6;animation:wk-fall linear infinite}
@keyframes wk-fall{0%{transform:translateY(-30px) rotate(0)}100%{transform:translateY(430px) rotate(680deg)}}
.wk-cast{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:0 10px 66px;z-index:3}
.wk-p{display:flex;flex-direction:column;align-items:center;text-align:center}
.wk-p img{height:auto;filter:drop-shadow(0 8px 6px rgba(120,80,30,.3));animation:wk-bob 2.6s ease-in-out infinite;margin-bottom:4px}
.wk-p.second img{width:clamp(70px,22vw,96px)}.wk-p.third img{width:clamp(58px,18vw,80px)}
.wk-p.first img{width:clamp(94px,30vw,128px);animation:wk-bobw 2.1s ease-in-out infinite;margin-bottom:4px}
@keyframes wk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wk-bobw{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.wk-namecrown{font-size:28px;line-height:1;margin-top:-10px;margin-bottom:-4px;filter:drop-shadow(0 2px 2px rgba(200,140,0,.5));transform-origin:50% 90%;}   /* 週冠軍皇冠：不搖晃、不亂動（v0.56.24） */
.wk-namecrown img{width:40px;height:auto;display:block;margin:0 auto;}   /* 造型商城皇冠圖片（比 emoji 更貼合寵物）v0.57.60；v0.60.109 改用冠軍皇冠愛心款、依填滿比例微縮 */
@keyframes wk-buzz{0%,84%,100%{transform:translate(0,0) rotate(0)}86%{transform:translate(-2px,-1px) rotate(-9deg)}88%{transform:translate(2px,0) rotate(9deg)}90%{transform:translate(-2px,0) rotate(-7deg)}92%{transform:translate(2px,-1px) rotate(7deg)}94%{transform:translate(-1px,0) rotate(-4deg)}96%{transform:translate(0,0) rotate(0)}}
.wk-tag{margin-top:2px;background:rgba(255,255,255,.85);border-radius:9px;padding:2px 8px;line-height:1.25;box-shadow:0 2px 5px rgba(120,80,30,.16)}
.wk-tag .medal{font-size:15px}.wk-tag .own{font-weight:900;color:#5b4a34;font-size:13px}
.wk-p.first .wk-tag{border:2px solid #FFD873;box-shadow:0 3px 8px rgba(240,170,40,.35)}
.wk-p.first .wk-tag .own{font-size:15px}.wk-tag .pn{color:#a3907a;font-size:11px}.wk-tag .sc{font-weight:900;font-size:12px}
.wk-aura{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);width:170px;height:190px;z-index:2;pointer-events:none}
.wk-aura .wk-ring{position:absolute;inset:0;border-radius:50%;animation:wk-breathe 3s ease-in-out infinite}
@keyframes wk-breathe{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:.9;transform:scale(1.06)}}
.wk-aura.fx-active .wk-ring{background:radial-gradient(circle at 50% 62%,rgba(255,150,60,.34),rgba(255,150,60,0) 62%)}
.wk-aura.fx-grow .wk-ring{background:radial-gradient(circle at 50% 62%,rgba(90,210,120,.32),rgba(90,210,120,0) 62%)}
.wk-aura.fx-task .wk-ring{background:radial-gradient(circle at 50% 62%,rgba(120,175,255,.32),rgba(120,175,255,0) 62%)}
.wk-aura.fx-point .wk-ring{background:radial-gradient(circle at 50% 62%,rgba(255,205,80,.40),rgba(255,205,80,0) 62%)}
.wk-aura .wk-sheen{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.wk-aura .wk-sheen::after{content:"";position:absolute;top:-40%;left:-70%;width:75%;height:200%;transform:rotate(8deg);animation:wk-sweep 2.8s ease-in-out infinite;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 48%,rgba(200,235,255,.5) 55%,transparent 68%)}
.wk-aura.fx-point .wk-sheen::after{background:linear-gradient(115deg,transparent 35%,rgba(255,240,180,.8) 48%,rgba(255,215,110,.6) 55%,transparent 68%)}
.wk-aura.fx-grow .wk-sheen,.wk-aura.fx-task .wk-sheen{display:none}
@keyframes wk-sweep{0%{left:-75%}60%,100%{left:120%}}
.wk-particle{position:absolute;opacity:0}
.wk-ember{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#FFE39A,#FF8A3C);box-shadow:0 0 8px rgba(255,140,50,.8);animation:wk-emb 2.4s ease-out infinite}
@keyframes wk-emb{0%{opacity:0;transform:translateY(6px) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(-80px) translateX(var(--x)) scale(1)}}
.wk-leaf{font-size:16px;animation:wk-leaf 3s linear infinite}
@keyframes wk-leaf{0%{opacity:0;transform:translateY(10px) rotate(0)}15%{opacity:1}50%{transform:translateY(-38px) translateX(14px) rotate(30deg)}100%{opacity:0;transform:translateY(-80px) translateX(-10px) rotate(-20deg)}}
.wk-star{font-size:14px;color:#fff;text-shadow:0 0 7px rgba(120,175,255,.95);animation:wk-star 1.8s ease-out infinite}
@keyframes wk-star{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1)}}
.wk-coin{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF0B8,#F2B825 58%,#C8860F);border:1px solid #E0A81A;box-shadow:0 0 6px rgba(240,190,60,.75),inset 0 -2px 2px rgba(160,110,10,.4);animation:wk-coin 2.6s linear infinite}
@keyframes wk-coin{0%{opacity:0;transform:translateY(-30px) rotateY(0) scale(.7)}15%{opacity:1}100%{opacity:0;transform:translateY(60px) rotateY(720deg) scale(1)}}
.wk-caption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--font-display,cursive);color:#c98a2f;font-size:20px;letter-spacing:1px}
.wk-caption small{display:block;font-family:inherit;color:#b79a72;font-size:12px;letter-spacing:2px;margin-top:1px}
.wk-title{text-align:center;font-size:15px;color:#7a6446;margin:12px 2px 0;font-weight:800}
.wk-cta{margin-top:12px;width:100%;border:none;border-radius:16px;padding:15px;font-size:18px;font-weight:900;color:#fff;font-family:inherit;cursor:pointer;background:linear-gradient(180deg,#FFC24D,#F2942B);box-shadow:0 5px 0 #d97c14}
.wk-cta:active{transform:translateY(3px);box-shadow:0 2px 0 #d97c14}
.wk-card{width:100%;max-width:400px;background:#FFFBF2;border:3px solid #F6DCA9;border-radius:26px;box-shadow:0 22px 54px rgba(180,120,30,.32),0 2px 0 #fff inset;padding:20px 18px;animation:wk-pop .5s cubic-bezier(.2,1.3,.35,1) both}
.wk-card .kicker{display:inline-block;background:linear-gradient(180deg,#FFD873,#F2A63E);color:#7a4b00;font-weight:900;font-size:14px;padding:6px 18px;border-radius:999px;box-shadow:0 3px 0 #d98a1f}
.wk-card .head{text-align:center}
.wk-card .h1{font-size:23px;font-weight:900;margin:10px 0 2px;color:#5b4a34}
.wk-card .wk{font-size:13px;color:#b09a7d;margin-bottom:12px}
.wk-card .petbox{display:flex;flex-direction:column;align-items:center;gap:4px;margin:2px 0 14px}
.wk-card .petbox img{width:140px;height:auto;filter:drop-shadow(0 10px 8px rgba(120,90,40,.3));animation:wk-petbob 2.6s ease-in-out infinite}
@keyframes wk-petbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wk-card .petbox b{font-size:18px;color:#5b4a34}.wk-card .petbox span{font-size:12px;color:#a3907a}
.wk-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.wk-card .stat{background:#FFF4DE;border:2px solid #F6E4BE;border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.wk-card .stat .ic{font-size:24px}.wk-card .stat .n{font-size:21px;font-weight:900;line-height:1;color:#e2731c}.wk-card .stat .l{font-size:12px;color:#9a856a;margin-top:2px}
.wk-card .rankbox{background:linear-gradient(180deg,#FFF7E6,#FFEFC9);border:2px solid #F4D999;border-radius:16px;padding:14px;text-align:center;margin-bottom:12px}
.wk-card .rankbox .big{font-size:15px;color:#7a6446;font-weight:800}
.wk-card .rankbox .rk{font-size:34px;font-weight:900;color:#e2731c;line-height:1.1;margin:2px 0 6px}.wk-card .rankbox .rk small{font-size:16px;color:#c78a3a}
.wk-card .bar{height:16px;background:#F0E0BE;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 3px rgba(140,100,40,.18)}
.wk-card .bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#FFC24D,#F2942B);box-shadow:0 0 8px rgba(242,148,43,.6);transition:width .8s cubic-bezier(.2,1,.3,1)}
.wk-card .chase{font-size:14px;color:#8a6a3a;margin-top:8px;font-weight:700}.wk-card .chase b{color:#e2731c}
.wk-card .cheer{text-align:center;font-size:14px;color:#a3907a;margin:2px 0 14px}
.wk-card .cta{width:100%;border:none;border-radius:16px;padding:15px;font-size:19px;font-weight:900;color:#fff;font-family:inherit;cursor:pointer;background:linear-gradient(180deg,#FFC24D,#F2942B);box-shadow:0 5px 0 #d97c14}
.wk-card .cta:active{transform:translateY(3px);box-shadow:0 2px 0 #d97c14}

/* ================= 幸運轉轉樂（v0.32.0）================= */
.wheel-card{text-align:center;max-width:420px;overflow:hidden;}   /* v0.60.144 防止光暈/螢火蟲外溢造成左右視窗框、橫向捲動 */
/* v0.60.145 幸運轉盤「滿版沉浸」：由置中小卡→全螢幕；仍是同頁 overlay（不是新頁面），保留右上 ✕＋頂部標題＝不迷路 */
#wheelModal{padding:0;}
body.wheel-open{overflow:hidden!important;overscroll-behavior:none;}   /* v0.60.578：開轉盤鎖底層捲動＝去掉「外層 body + 內層卡片」雙 owner 的外層；不改捲動位置，關閉移除即還原 */
/* v0.60.148 A2：鎖高度 height:100dvh＋overflow:hidden＝滿版但不再跑出捲軸；轉盤用 min(...,42vh) 保證上下都放得下 */
#wheelModal .wheel-card{max-width:none;width:100%;height:100dvh;max-height:none;border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
  background:radial-gradient(125% 85% at 50% 18%, #fffdf7 0%, #f3f7ec 52%, #e7f1dc 100%);}
#wheelModal .wheel-wrap{width:min(96vw,480px,48vh);margin:6px auto;}   /* v0.60.578 轉盤依「可用高度」自適應：矮螢幕(48vh)自動縮小塞得下、寬螢幕仍大；margin 8→6 收緊留白（不改盤面比例，disc/label 都是 wrap 的百分比） */
#wheelModal .modal-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:16px;z-index:20;}
/* v0.60.185 關閉 X 明顯化（轉盤／神樹背景很花，原本灰字幾乎看不到）＝白底深字圓鈕 */
#wheelModal .modal-close,#wishModal .modal-close{width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#4a3312;font-size:26px;font-weight:900;line-height:1;
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.05);}
#wishModal .modal-close{z-index:20;}
.wheel-title{margin:2px 0 2px;font-size:24px;}
.wheel-sub{margin:0 0 6px;color:#8a6a32;font-size:15px;}
.wheel-free{font-size:16px;margin:6px 0 2px;}
.wheel-free b{color:#d8503a;font-size:20px;}
/* 👣 旅人痕跡（v0.60.181）：社交存在感小標，暖綠底、露人數不露 % */
.wheel-travelers{margin:2px auto 4px;font-size:13px;font-weight:700;color:#3f7d4e;
  background:rgba(122,193,66,.16);border:1px solid rgba(122,193,66,.4);border-radius:999px;
  padding:3px 12px;display:inline-block;}
.wheel-wrap{position:relative;width:min(78vw,320px);aspect-ratio:1/1;margin:12px auto 4px;transition:opacity .3s ease;}
.wheel-wrap.wheel-loading{opacity:0;}   /* v0.60.148 A1：資料/外框就緒前先隱藏，避免閃無框空盤 */
.wheel-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;z-index:5;
  border-left:18px solid transparent;border-right:18px solid transparent;border-top:30px solid #f26a4b;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.2));}
.wheel-pointer::after{content:"";position:absolute;left:50%;top:-36px;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #f26a4b;}
.wheel-disc{position:absolute;inset:0;border-radius:50%;border:9px solid #fff;
  box-shadow:0 10px 24px rgba(0,0,0,.2),inset 0 0 0 5px rgba(242,183,5,.27);}
.wheel-hub{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);z-index:4;
  background:#fff;border-radius:50%;border:5px solid #f2b705;display:grid;place-items:center;font-size:24px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);}
.wheel-label{position:absolute;inset:0;z-index:3;pointer-events:none;}
.wheel-div{position:absolute;left:50%;top:0;width:4px;height:50%;margin-left:-2px;background:#fff;transform-origin:50% 100%;z-index:2;pointer-events:none;border-radius:2px;}   /* v0.60.419 等寬白色分隔直線（取代放射狀楔形） */
.wheel-label .inner{position:absolute;left:50%;top:8.5%;transform:translateX(-50%);width:76px;text-align:center;line-height:1.12;pointer-events:auto;cursor:pointer;}   /* v0.60.188 可點看說明 */
/* 🎁 點獎項看說明彈窗（v0.60.188）*/
.prize-peek{position:fixed;inset:0;z-index:3200;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s;}
.prize-peek.show{opacity:1;}
.prize-peek .pp-card{background:linear-gradient(#fffdf6,#fff0ce);border:5px solid #f2b705;border-radius:22px;
  padding:22px 26px 20px;text-align:center;max-width:300px;width:100%;box-shadow:0 18px 46px rgba(0,0,0,.4);
  animation:wheelPop .35s cubic-bezier(.2,1.3,.4,1);}
.prize-peek .pp-ic{font-size:52px;line-height:1;}
.prize-peek .pp-ic img{width:64px;height:64px;object-fit:contain;}
.prize-peek .pp-nm{font-size:22px;font-weight:900;color:#4a3312;margin:8px 0 6px;}
.prize-peek .pp-desc{font-size:14.5px;color:#6a5320;line-height:1.65;margin-bottom:16px;}
.prize-peek .pp-desc.pp-muted{color:#a2926e;}
.prize-peek .pp-ok{font-size:17px;font-weight:800;color:#fff;background:#f2b705;border:none;border-radius:13px;padding:10px 30px;cursor:pointer;box-shadow:0 4px 0 #c99304;}
.wheel-label .wi{font-size:24px;display:block;}
.wheel-label img{width:30px;height:30px;object-fit:contain;display:block;margin:0 auto;}
.wheel-label .nm{font-size:13px;font-weight:800;color:#3a2a10;display:block;margin-top:1px;text-shadow:0 0 2px #fff,0 0 3px rgba(255,255,255,.95),0 1px 0 #fff;}   /* v0.60.403 Vivid：深字＋白色光暈，讓短名在亮藍/亮紫等高飽和扇形上也讀得清 */
/* 🎭 命運事件・轉前三選一祈願（v0.60.184）：分段清楚＝今日事件標題→事件句→引導語→三選一→說明。重用既有金色。 */
/* v0.60.425 今日事件彈窗＝全螢幕遮罩(.wheel-destiny)＋內層卡片(.wd-card)。之前用 transform 置中→遮罩被限制在卡片內(灰灰一塊)，改成 flex 置中就正常 */
.wheel-destiny{position:fixed!important;inset:0;z-index:60;margin:0!important;display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));background:rgba(40,55,45,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}   /* v0.60.580：滿版半透明 backdrop（避免誤觸轉盤）＋上下 safe-area */
.wheel-destiny[hidden]{display:none!important;}
.wd-card{width:min(calc(100vw - 32px),360px);max-width:360px;box-sizing:border-box;text-align:center;background:#fffdf6;border-radius:22px;padding:22px 18px;box-shadow:0 20px 55px rgba(60,80,60,.45);animation:destinyPop .35s cubic-bezier(.2,1.3,.4,1);}   /* v0.60.580：小型置中卡片＝依三選一內容緊密自適應高度、不滿版、不內層捲動（移除 max-height:88vh + overflow-y:auto）；手機寬 calc(100vw-32px) 上限 360 */
@keyframes destinyPop{0%{transform:scale(.86);opacity:0}100%{transform:scale(1);opacity:1}}
.wd-title{font-size:13px;font-weight:900;letter-spacing:2px;color:#c8892a;margin:0 0 6px;}
.wd-line{font-size:15px;color:#4a3312;background:rgba(255,255,255,.75);border:1px solid rgba(200,180,120,.55);
  border-radius:14px;padding:13px 16px;margin:0 0 16px;line-height:1.8;letter-spacing:.3px;}
.wd-ask{font-size:14px;font-weight:800;color:#5b4a2e;margin:0 0 10px;}
.wd-choices{display:flex;flex-direction:column;gap:10px;}
.wd-choice{display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  font-size:17px;font-weight:800;color:#4a3312;background:linear-gradient(#fff9ec,#ffedd0);
  border:2px solid #f2b705;border-radius:16px;padding:14px 18px;cursor:pointer;
  box-shadow:0 4px 0 #d9a636,0 6px 14px rgba(0,0,0,.12);transition:transform .1s;}
.wd-choice:active{transform:translateY(3px);box-shadow:0 1px 0 #d9a636;}
.wd-choice .wd-ic{font-size:22px;line-height:1;}
.wd-hint{font-size:12px;color:#8a6a32;margin:12px 0 0;line-height:1.6;}
@media (prefers-reduced-motion: reduce){ .wheel-destiny{animation:none} }
/* ⏳ 倒數裂開稀有彩蛋（v0.60.187）：神樹聚力→倒數→裂開閃光。純 CSS/JS 零素材、不動中獎。 */
#wheelCrack{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 45%,rgba(28,58,20,.55),rgba(0,0,0,.85));opacity:0;transition:opacity .3s;overflow:hidden;}
#wheelCrack.show{opacity:1;}
#wheelCrack .wc-center{text-align:center;}
#wheelCrack .wc-tree{font-size:64px;line-height:1;animation:wcTreePulse 1s ease-in-out infinite;}
@keyframes wcTreePulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 14px rgba(255,224,120,.7))}50%{transform:scale(1.12);filter:drop-shadow(0 0 32px rgba(255,236,150,1))}}
#wheelCrack .wc-hint{color:#ffe9a3;font-weight:800;font-size:16px;margin-top:12px;text-shadow:0 1px 3px rgba(0,0,0,.6);}
#wheelCrack .wc-count{position:absolute;font-size:118px;font-weight:900;color:#fff;
  text-shadow:0 0 26px rgba(255,224,120,.95),0 4px 12px rgba(0,0,0,.6);animation:wcCount .6s ease-out;}
@keyframes wcCount{0%{transform:scale(2.3);opacity:0}25%{opacity:1}100%{transform:scale(.65);opacity:0}}
#wheelCrack .wc-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.96),rgba(255,224,120,0) 60%);opacity:0;animation:wcFlash .5s ease-out;}
@keyframes wcFlash{0%{opacity:0}28%{opacity:1}100%{opacity:0}}
#wheelCrack .wc-crack{position:absolute;left:50%;top:45%;width:4px;height:120vh;transform-origin:top center;opacity:.92;
  background:linear-gradient(rgba(255,255,255,.98),rgba(255,236,150,.6),rgba(255,255,255,0));
  filter:drop-shadow(0 0 6px rgba(255,236,150,.9));animation:wcCrackGrow .5s cubic-bezier(.2,.9,.3,1) forwards;}
@keyframes wcCrackGrow{0%{transform:translate(-50%,0) rotate(var(--cr)) scaleY(0)}100%{transform:translate(-50%,0) rotate(var(--cr)) scaleY(1)}}
.wc-shake{animation:wcShake .52s ease-in-out;}
@keyframes wcShake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}
@media (prefers-reduced-motion:reduce){#wheelCrack .wc-tree,#wheelCrack .wc-count,#wheelCrack .wc-crack,#wheelCrack .wc-flash,.wc-shake{animation-duration:.01ms!important}}
.wheel-spin{margin-top:12px;font-size:22px;font-weight:900;color:#fff;background:linear-gradient(#ff8264,#f26a4b);
  border:none;border-radius:16px;padding:14px 42px;box-shadow:0 6px 0 #d8503a,0 10px 18px rgba(0,0,0,.2);
  cursor:pointer;letter-spacing:2px;}
.wheel-spin:active{transform:translateY(4px);box-shadow:0 2px 0 #d8503a;}
.wheel-spin:disabled{filter:grayscale(.5) brightness(.92);box-shadow:0 6px 0 #b9b0a0;cursor:default;}
.wheel-note{font-size:12.5px;color:#8a6a32;margin-top:12px;line-height:1.6;}
.wheel-reveal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(0,0,0,.33),rgba(0,0,0,.66));}
.wheel-reveal.show{display:flex;animation:wheelFade .25s;}
@keyframes wheelFade{from{opacity:0}to{opacity:1}}
.wheel-prizecard{position:relative;z-index:2;background:linear-gradient(#fffdf6,#fff0ce);border:6px solid #f2b705;border-radius:24px;
  padding:24px 28px 22px;text-align:center;max-width:320px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.4);
  animation:wheelPop .4s cubic-bezier(.2,1.3,.4,1);}
@keyframes wheelPop{from{transform:scale(.7);opacity:.4}to{transform:scale(1);opacity:1}}
.wheel-prizecard .wp-big{font-size:60px;line-height:1;}
.wheel-prizecard .wp-big img{width:80px;height:80px;object-fit:contain;}
.wheel-prizecard .wp-win{font-size:18px;color:#b4531a;margin:8px 0 2px;font-weight:800;}
.wheel-prizecard .wp-name{font-size:28px;font-weight:900;margin:2px 0 4px;}
.wheel-prizecard .wp-desc{font-size:14px;color:#7a5a1e;margin:6px 0 16px;line-height:1.6;}
.wheel-ok{font-size:19px;font-weight:800;color:#fff;background:#f2b705;border:none;border-radius:14px;
  padding:11px 32px;cursor:pointer;box-shadow:0 4px 0 #c99304;}
/* 🎡 幸運轉轉樂爽度優化（v0.60.132）：待轉呼吸邀請、中獎盤面金光脈衝、傳說級盤面歡呼晃動。
   顏色一律重用既有金色 rgba(242,183,5) token（＝.wheel-disc 原本用色），不新增配色。 */
.wheel-spin.ready{animation:wheelReady 1.8s ease-in-out infinite;}
@keyframes wheelReady{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.035)}}
.wheel-disc.win{animation:wheelWin .9s ease-out;}
@keyframes wheelWin{
  0%{box-shadow:0 10px 24px rgba(0,0,0,.2),inset 0 0 0 5px rgba(242,183,5,.27)}
  35%{box-shadow:0 0 0 9px rgba(242,183,5,.55),0 10px 30px rgba(0,0,0,.28),inset 0 0 0 5px rgba(242,183,5,.92)}
  100%{box-shadow:0 10px 24px rgba(0,0,0,.2),inset 0 0 0 5px rgba(242,183,5,.27)}}
.wheel-prizecard.legendary{animation:wheelPop .4s cubic-bezier(.2,1.3,.4,1),wheelLegend .7s ease-in-out .4s;}
@keyframes wheelLegend{0%,100%{transform:scale(1) rotate(0deg)}20%{transform:scale(1.06) rotate(-2deg)}40%{transform:scale(1.05) rotate(2deg)}60%{transform:scale(1.04) rotate(-1.5deg)}80%{transform:scale(1.03) rotate(1deg)}}
@media (prefers-reduced-motion: reduce){
  .wheel-spin.ready{animation:none}
  .wheel-disc.win{animation:none}
  .wheel-prizecard.legendary{animation:wheelPop .4s cubic-bezier(.2,1.3,.4,1)}
}

/* ================= 🎉 中獎大慶祝・開箱儀式（v0.60.183）：寶箱迸出→金光射線→紙花→傳說螢幕金光。
   純 CSS/JS 零素材；重用既有金色 rgba(242,183,5)＋既有獎項色，不新增品牌配色；prefers-reduced-motion 收斂。 */
.wp-rays{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(242,183,5,.15) 0deg 8deg,rgba(242,183,5,0) 8deg 20deg);
  animation:wpRaysIn .5s ease-out forwards,wpRaysSpin 9s linear infinite;}
.wp-rays.big{background:repeating-conic-gradient(from 0deg,rgba(242,183,5,.28) 0deg 7deg,rgba(242,183,5,0) 7deg 18deg);}
@keyframes wpRaysIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes wpRaysSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* 寶箱搖一下→獎勵迸出 */
.wp-big.wp-chest-shake{animation:wpChestShake .45s ease-in-out;}
@keyframes wpChestShake{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-9deg) scale(1.06)}50%{transform:rotate(9deg) scale(1.09)}75%{transform:rotate(-6deg) scale(1.12)}}
.wp-big.wp-burst{animation:wpBurst .6s cubic-bezier(.2,1.5,.4,1);}
@keyframes wpBurst{0%{transform:scale(0) rotate(-18deg)}55%{transform:scale(1.35) rotate(8deg)}75%{transform:scale(.92) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
/* 紙花 */
.wp-confetti{position:absolute;top:-6%;width:9px;height:14px;border-radius:2px;z-index:3;pointer-events:none;
  animation:wpFall linear forwards;}
@keyframes wpFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(118vh) rotate(760deg);opacity:.8}}
/* 傳說螢幕金光 */
.wp-flash{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%,rgba(255,236,160,.55),rgba(242,183,5,0) 70%);
  animation:wpFlash .8s ease-out forwards;}
@keyframes wpFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .wp-rays,.wp-confetti,.wp-flash{animation:none!important}
  .wp-big.wp-chest-shake,.wp-big.wp-burst{animation:none!important}
  .wp-rays{opacity:.4}
}

/* ================= 🎡 幸運轉盤等級外框＋進度＋升級 ceremony（v0.60.137）=================
   當前等級外框疊在盤面外圈；盤面縮進外框開口（內圈≈69% 正圓、六張已對齊）。
   只載玩家「當前階」外框圖＝零 egress。盤面幾何以真圖 render 驗證（六階皆獎項不被框咬）。 */
.wheel-frame{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));animation:wheelFrameIn .5s cubic-bezier(.2,1.3,.4,1);}
@keyframes wheelFrameIn{0%{opacity:0;transform:scale(.86)}100%{opacity:1;transform:scale(1)}}
.wheel-wrap.has-frame .wheel-disc{inset:21%;border-width:0;box-shadow:none;}   /* v0.60.191 還原最原本（v169 對位）：盤面 inset 21% 全對稱 */
.wheel-wrap.has-frame .wheel-label .inner{top:22.5%;width:67px;}   /* v0.60.191 還原：獎項往內 22.5%、內容區 67px */
.wheel-wrap.has-frame .wheel-label .wi{font-size:22px;}   /* v0.60.191 還原 22 */
.wheel-wrap.has-frame .wheel-label img{width:37px;height:37px;}   /* v0.60.191 還原 37 */
.wheel-wrap.has-frame .wheel-label .nm{font-size:11.5px;}   /* v0.60.191 還原 11.5 */
.wheel-wrap.has-frame .wheel-hub{width:38px;height:38px;font-size:20px;}
.wheel-wrap.has-frame .wheel-pointer{top:14%;z-index:6;border-left-width:9px;border-right-width:9px;border-top-width:16px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));}
/* 神話階外框：漂浮呼吸 */
.wheel-wrap.has-frame.tier-myth .wheel-frame{animation:wheelFrameIn .5s cubic-bezier(.2,1.3,.4,1), wheelFrameFloat 4.5s ease-in-out .5s infinite;}
@keyframes wheelFrameFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.012)}}

/* 等級進度（藏數值露敘事：只露「累積 N 次／距下一階 M 次」，畫面不顯示任何 %） */
.wheel-level{margin:2px auto 6px;max-width:300px;font-size:12.5px;color:#6a5327;}
.wheel-level .wl-row{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;color:#5a4620;flex-wrap:wrap;}
.wheel-level .wl-title{color:#2e7d5b;}
.wheel-level .wl-bar{height:8px;border-radius:99px;background:#eadfc4;margin:5px auto 3px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
.wheel-level .wl-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#bff0cb,#7ee08a);transition:width .6s cubic-bezier(.16,.84,.28,1);}
.wheel-level .wl-sub{font-size:11.5px;color:#8a7a5f;}

/* 升級 ceremony：新框迸出→光芒爆開→標語 */
.wheel-levelup{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(28,20,10,.55);backdrop-filter:blur(2px);animation:wheelFade .3s;}
.wheel-levelup.show{display:flex;}
.wheel-levelup .lu-card{text-align:center;color:#fff;animation:luPop .6s cubic-bezier(.2,1.5,.4,1);}
.wheel-levelup .lu-frame{width:min(64vw,240px);height:auto;filter:drop-shadow(0 0 22px rgba(255,224,140,.85));animation:luBurst .8s ease-out;}
.wheel-levelup .lu-banner{font-size:22px;font-weight:900;margin-top:14px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.wheel-levelup .lu-name{color:#ffe08c;}
.wheel-levelup .lu-tap{font-size:12.5px;opacity:.85;margin-top:10px;}
@keyframes luPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes luBurst{0%{transform:scale(.4) rotate(-8deg);opacity:0}45%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0)}}

@media (prefers-reduced-motion: reduce){
  .wheel-frame,.wheel-wrap.has-frame.tier-myth .wheel-frame{animation:none}
  .wheel-levelup .lu-card,.wheel-levelup .lu-frame{animation:none}
}

/* ================= 🎡 轉盤生命感（v0.60.141）：柔光暈＋螢火蟲繞環＋呼吸＋四葉草搖曳發光。全 CSS/JS 零下載 ================= */
/* v0.60.144 拿掉整體「呼吸」（會讓畫面一直飄）；柔光暈收進框內、只淡淡脈動不縮放（不外溢、不造成左右視窗框/橫向捲動） */
.wheel-wrap::before{content:"";position:absolute;inset:-2%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(126,224,138,.22) 0%, rgba(255,224,140,.12) 44%, rgba(126,224,138,0) 66%);
  animation:wheelGlow 5s ease-in-out infinite;}
@keyframes wheelGlow{0%,100%{opacity:.5}50%{opacity:.85}}
/* 螢火蟲繞環（JS 生成 .wf-orbit>.wf-dot；在最上層飄過外框） */
.wf-orbit{position:absolute;left:50%;top:50%;width:0;height:0;z-index:7;pointer-events:none;
  animation:wfSpin var(--d,15s) linear infinite;animation-direction:var(--dir,normal);}
.wf-dot{position:absolute;left:-3px;top:calc(-1 * var(--r,150px));width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fffbe6 0%,#ffe9a8 45%,rgba(255,233,168,0) 72%);
  box-shadow:0 0 8px 2px rgba(255,233,168,.85),0 0 16px 4px rgba(255,214,120,.4);
  animation:wfTwinkle var(--t,2.4s) ease-in-out infinite;}
@keyframes wfSpin{to{transform:rotate(360deg)}}
@keyframes wfTwinkle{0%,100%{opacity:.12;transform:scale(.6)}45%{opacity:1;transform:scale(1.25)}70%{opacity:.5;transform:scale(.9)}}
/* 四葉草中心搖曳＋發光 */
.wheel-hub{animation:hubSway 3.8s ease-in-out infinite, hubGlow 2.6s ease-in-out infinite;}
/* v0.60.191 還原最原本：中心四葉草只搖曳＋綠色發光（拿掉呼吸放大與金色） */
@keyframes hubSway{0%,100%{transform:translate(-50%,-50%) rotate(-6deg)}50%{transform:translate(-50%,-50%) rotate(6deg)}}
@keyframes hubGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(126,224,138,.5))}50%{filter:drop-shadow(0 0 14px rgba(126,224,138,.95))}}
/* v0.60.148 A3：中心幸運草可點、點下去彈一下（動畫含 translate(-50%,-50%) 才不會跳位） */
.wheel-hub{cursor:pointer;}
.wheel-hub.hub-tap{animation:hubTap .5s ease;}
@keyframes hubTap{0%{transform:translate(-50%,-50%) scale(1)}28%{transform:translate(-50%,-50%) scale(1.34)}58%{transform:translate(-50%,-50%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion: reduce){
  .wheel-wrap,.wheel-wrap::before,.wf-orbit,.wf-dot,.wheel-hub{animation:none!important}
}

/* ================= 🎡 幸運轉盤・高級 UI 素材接線（v0.60.162）：滿版情境背景＋綠緞帶標題＋金環正立四葉草 hub＋綠寶石水滴指針＋粉紅膠囊按鈕。
   圖皆 icons/wheel/ 已壓縮去背（放 GitHub Pages＝零 Supabase egress）。圖上無文字，標題/按鈕字用 CSS 疊。 */
#wheelModal .wheel-card{
  background:linear-gradient(rgba(255,253,244,.30),rgba(255,253,244,.05) 42%,rgba(231,241,220,.12)),
    url("icons/wheel/wheel_bg_mobile.webp") center/cover no-repeat;}
@media (min-width:700px){
  #wheelModal .wheel-card{background:linear-gradient(rgba(255,253,244,.32),rgba(255,253,244,.05) 42%,rgba(231,241,220,.12)),
    url("icons/wheel/wheel_bg_desktop.webp") center/cover no-repeat;}}
/* v0.60.179 綠底金框牌匾標題（title_plate 無文字→文字置中疊、金箔字更立體，取代 v162 綠緞帶偏右疊字） */
/* v0.60.191 還原最原本：綠緞帶標題＋金字（拿掉牌匾與白字綠影） */
.wheel-title{position:relative;width:min(84vw,330px);aspect-ratio:913/198;height:auto;margin:2px auto 0;
  background:url("icons/wheel/title_ribbon.webp") center/contain no-repeat;font-size:0;}
.wheel-title::after{content:"幸運轉轉樂";position:absolute;left:57%;top:44%;transform:translate(-50%,-50%);
  font-size:27px;font-weight:900;letter-spacing:2px;white-space:nowrap;
  background:linear-gradient(#fffceb,#ffe9a0 46%,#f3bf3a 78%,#e5a81f);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.7px #7a5810;
  filter:drop-shadow(0 1px 0 #6b4d0e) drop-shadow(0 2px 3px rgba(30,60,10,.5));}
/* 中央金環正立四葉草 hub（取代白圓＋🍀） */
.wheel-hub{background:url("icons/wheel/hub_clover.webp") center/contain no-repeat!important;
  border:none!important;box-shadow:none!important;font-size:0!important;width:78px;height:78px;}
.wheel-wrap.has-frame .wheel-hub{width:66px;height:66px;}   /* v0.60.191 還原最原本：hub 66px、置中回 top:50%（拿掉縮小與上移） */
/* 綠寶石水滴指針（取代 CSS 三角＋白圓，尖端朝下） */
.wheel-pointer{width:42px;height:auto;aspect-ratio:115/219;top:-50px;border:none!important;
  background:url("icons/wheel/pointer_gem.webp") center/contain no-repeat;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));}
.wheel-pointer::after{display:none!important;}
.wheel-wrap.has-frame .wheel-pointer{display:none!important;}   /* v0.60.169 新外框頂端自帶寶石冠＝當作標記，隱藏重複的指針 */
/* 粉紅膠囊按鈕（膠囊圖無文字→文字疊上、置中） */
.wheel-spin{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.2;
  width:min(64vw,240px);aspect-ratio:639/285;height:auto;padding:0!important;border-radius:0!important;
  background:url("icons/wheel/btn_spin.webp") center/contain no-repeat!important;
  color:#a2385c!important;font-size:20px;letter-spacing:2px;text-shadow:0 1px 1px rgba(255,255,255,.65);
  box-shadow:none!important;}
.wheel-spin:active{transform:translateY(2px);box-shadow:none!important;}
.wheel-spin:disabled{filter:grayscale(.35) brightness(.97);box-shadow:none!important;}
/* v0.60.411 珠寶盒設計語言（《UI Design Bible》）：扇形降飽和約 18%＝柔化、去螢光、精品感；文字四行行距一致、完全置中 */
#wheelModal .wheel-disc{filter:saturate(.82);}
#wheelModal .wheel-spin{justify-content:center!important;align-items:center!important;line-height:1.28!important;}

/* ================= 🎡 轉盤 UI 回饋批次（v0.60.165）：滿版／文字顯眼／神樹綠按鈕置底／獎項紀錄·活動說明角鈕 ================= */
/* ⑤ 滿版：背景鋪到 modal 與安全區、卡片縮小上下間距讓內容都進得來 */
#wheelModal{background:linear-gradient(rgba(255,253,244,.30),rgba(255,253,244,.05) 42%,rgba(231,241,220,.12)),url("icons/wheel/wheel_bg_mobile.webp") center/cover no-repeat;}
#wheelModal .wheel-card{position:relative;justify-content:flex-start;gap:2px;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(64px + env(safe-area-inset-bottom));overflow:hidden;}   /* v0.60.578 正常直向＝卡片不捲（配合 body 鎖捲＝單螢幕完整呈現、無雙層捲軸）；只有下面 media 的橫向/極矮螢幕才開放整個卡片捲動 */
/* v0.60.578 降級模式：只有橫向、或極矮螢幕(高≤600，含手機橫放/鍵盤壓縮)確實放不下時，才讓「整個轉盤卡片」成為唯一捲動區；內層仍不獨立捲動＝不會有巢狀雙捲軸 */
@media (orientation:landscape),(max-height:600px){ #wheelModal .wheel-card{overflow-y:auto;-webkit-overflow-scrolling:touch;} }
@media (min-width:700px){#wheelModal{background:linear-gradient(rgba(255,253,244,.32),rgba(255,253,244,.05) 42%,rgba(231,241,220,.12)),url("icons/wheel/wheel_bg_desktop.webp") center/cover no-repeat;}}
/* ⑧⑩ 文字顯眼：副標／免費機會／等級列加白色柔光＋加重；免費機會做成小卡 */
#wheelModal .wheel-sub{color:#4a5b24;font-weight:700;text-shadow:0 1px 2px rgba(255,255,255,.85);}
#wheelModal .wheel-free{color:#4a3a1e;font-weight:800;background:rgba(255,255,255,.68);border-radius:999px;padding:5px 18px;box-shadow:0 1px 4px rgba(80,90,40,.12);}
#wheelModal .wheel-level{background:rgba(255,255,255,.62);border-radius:14px;padding:6px 12px 5px;}
#wheelModal .wheel-note{color:#4a3a1e;font-weight:700;background:rgba(255,255,255,.6);border-radius:12px;padding:7px 14px;text-shadow:0 1px 1px rgba(255,255,255,.8);}
/* ⑥⑦ 神樹按鈕：改綠色美術圖膠囊、置底置中永遠可見 */
.wish-entry{position:relative;margin:10px auto 2px;width:min(74vw,270px);aspect-ratio:665/300;border:0;
  background:url("icons/wheel/green_btn_spin.webp") center/contain no-repeat;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;padding:0;color:#2b5d16;font-weight:900;font-size:16px;
  text-shadow:0 1px 1px rgba(255,255,255,.7);
  animation:wishEntryFloat 2.8s ease-in-out infinite;}   /* v0.60.185 神樹按鈕：綠光漂浮呼吸（與粉色 spin 鈕不同的生命感、不再死氣）*/
.wish-entry:active{transform:translateY(2px) scale(.98);}
@keyframes wishEntryFloat{0%,100%{transform:translateY(0);filter:drop-shadow(0 4px 9px rgba(80,165,70,.35))}50%{transform:translateY(-4px);filter:drop-shadow(0 9px 16px rgba(80,165,70,.62)) drop-shadow(0 0 8px rgba(150,220,120,.5))}}
.wish-entry .we-txt{position:relative}
.wish-entry .we-tree{animation:wishLeafWiggle 2.8s ease-in-out infinite;display:inline-block}
@keyframes wishLeafWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.wish-entry,.wish-entry .we-tree{animation:none!important}}
.wish-entry[hidden]{display:none!important;}
.wish-entry .we-tree{font-size:18px;}
.wish-entry .we-dot{position:absolute;top:6%;right:12%;background:#e0842c;color:#fff;font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;}
/* ② 左下獎品紀錄／右下活動說明 角鈕 */
.wheel-corner{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));z-index:9;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:0;background:transparent;color:#3B6D11;font-size:11px;font-weight:800;cursor:pointer;text-shadow:0 1px 2px rgba(255,255,255,.85);}
.wheel-corner .wc-ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 6px rgba(80,90,40,.18);}
.wheel-corner.left{left:16px;} .wheel-corner.right{right:16px;}
/* ❓ 活動說明彈窗 */
.wheel-info-pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(30,40,15,.5);}
.wheel-info-pop .wip-card{position:relative;max-width:360px;width:100%;background:#fbfff5;border-radius:18px;padding:20px 20px 16px;box-shadow:0 18px 50px rgba(0,0,0,.35);max-height:80vh;overflow-y:auto;}
.wheel-info-pop .wip-x{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:18px;color:#8a9a6e;cursor:pointer;}
.wheel-info-pop .wip-h{font-size:18px;font-weight:900;color:#2e6d33;margin-bottom:10px;}
.wheel-info-pop .wip-body p{font-size:13.5px;color:#4a4a36;line-height:1.75;margin:0 0 10px;}
.wheel-info-pop .wip-body b{color:#3B6D11;}

/* 📢 今日公告跑馬燈（v0.60.176）*/
.announce-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,#fff4d6,#ffe9b3);border-bottom:1px solid #f0d68a;
  color:#7a5a1e;font-weight:800;font-size:13px;padding:6px 12px;overflow:hidden}
.announce-bar.hidden{display:none}
.announce-bar .ab-ic{flex:0 0 auto}
.announce-bar .ab-track{flex:1;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.announce-bar .ab-text{display:inline-block;padding-left:100%;animation:abMarquee 16s linear infinite}
@keyframes abMarquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.announce-bar .ab-text{animation:none;padding-left:0;white-space:normal}}

/* 🛠️ 維護／強制更新全螢幕畫面（v0.60.175）*/
.server-block{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,#fbf3e4,#efe3cf)}
.server-block.hidden{display:none}
.server-block .sb-card{max-width:360px;text-align:center;background:#fff;border-radius:22px;padding:30px 24px;box-shadow:0 14px 40px rgba(90,60,20,.18)}
.server-block .sb-ic{font-size:60px;line-height:1;animation:sbFloat 2.6s ease-in-out infinite}
@keyframes sbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.server-block .sb-title{margin:14px 0 8px;font-size:21px;color:#5a3b1e}
.server-block .sb-msg{margin:0;font-size:15px;line-height:1.7;color:#8a6d4a;white-space:pre-wrap}
.server-block .sb-btn{margin-top:18px;background:#e0842c;color:#fff;border:0;border-radius:14px;padding:12px 26px;font-size:16px;font-weight:900;cursor:pointer}
.server-block .sb-btn.hidden{display:none}
@media (prefers-reduced-motion:reduce){.server-block .sb-ic{animation:none}}

/* ================= 🌳 全服祈願祭典（v0.60.163／172）：轉盤頁神樹入口＋神樹 overlay。神樹圖 icons/wheel/wish_tree.webp（零 egress） ================= */
.wish-card{max-width:440px;width:100%;max-height:92vh;overflow-y:auto;text-align:center;background:linear-gradient(#fbfff5,#eef6e2)}
.wish-h{margin:2px 0 6px;font-size:20px;color:#2e6d33}
/* 🌳 v0.60.172 神樹放大＋各階段 CSS 特效（冒芽發光→開花飄瓣→結果冒果實→滿樹星火＋達標綻放） */
.wish-tree-wrap{position:relative;margin:2px auto 4px;height:300px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.wish-tree{height:100%;width:auto;object-fit:contain;transform-origin:bottom center;transition:transform .7s cubic-bezier(.2,1.2,.4,1),filter .7s;position:relative;z-index:1}
.wish-tree.stage-0{transform:scale(.8);filter:saturate(.95) drop-shadow(0 0 7px rgba(120,224,140,.45));animation:wtBreath 3.4s ease-in-out infinite}   /* v0.60.185 樹苗也要有呼吸生命感（原本靜止）*/
.wish-tree.stage-1{transform:scale(.86);filter:drop-shadow(0 0 8px rgba(120,224,140,.55));animation:wtBreath 3.2s ease-in-out infinite}
.wish-tree.stage-2{transform:scale(.92);filter:drop-shadow(0 0 12px rgba(120,224,140,.7));animation:wtBreath 3s ease-in-out infinite}
.wish-tree.stage-3{transform:scale(.97);filter:drop-shadow(0 0 16px rgba(255,206,90,.72));animation:wtBreath 2.8s ease-in-out infinite}
.wish-tree.stage-4{transform:scale(1);filter:drop-shadow(0 0 24px rgba(255,206,90,.92));animation:wtBreath 2.4s ease-in-out infinite}
@keyframes wtBreath{0%,100%{translate:0 0}50%{translate:0 -5px}}
.wt-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.wt-fx span{position:absolute;opacity:0}
.wt-petal{top:12%;font-size:15px}
.wish-tree-wrap.st2 .wt-petal,.wish-tree-wrap.st3 .wt-petal,.wish-tree-wrap.st4 .wt-petal{animation:wtFall 3.4s linear infinite}
.wt-fruit{font-size:18px;filter:drop-shadow(0 0 6px rgba(255,220,120,.9))}
.wish-tree-wrap.st3 .wt-fruit,.wish-tree-wrap.st4 .wt-fruit{animation:wtTwinkle 2.2s ease-in-out infinite}
.wt-spark{font-size:14px}
.wish-tree-wrap.st4 .wt-spark{animation:wtTwinkle 1.8s ease-in-out infinite}
@keyframes wtFall{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(190px) translateX(var(--dx,10px)) rotate(300deg)}}
@keyframes wtTwinkle{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.wt-ring{position:absolute;left:50%;top:42%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid rgba(255,214,120,.9);opacity:0;pointer-events:none;z-index:3}
.wish-tree-wrap.bloom{animation:wtBloom .9s cubic-bezier(.2,1.5,.4,1)}
.wish-tree-wrap.bloom .wt-ring{animation:wtRing .9s ease-out}
@keyframes wtBloom{0%,100%{transform:scale(1)}30%{transform:scale(1.1)}60%{transform:scale(.98)}}
@keyframes wtRing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(7)}}
@media (prefers-reduced-motion:reduce){.wish-tree,.wt-fx span,.wish-tree-wrap.bloom,.wish-tree-wrap.bloom .wt-ring{animation:none!important}}
.wish-prog{margin:2px auto 10px;max-width:340px}
.wish-prog .wp-stage{font-size:15px;font-weight:900;color:#2e7d5b}
.wish-prog .wp-bar{height:12px;border-radius:99px;background:#dcecc7;margin:7px auto 5px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.wish-prog .wp-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#bff0cb,#7ee08a);transition:width .7s cubic-bezier(.16,.84,.28,1)}
.wish-prog .wp-line{font-size:14px;color:#4a5b38}.wish-prog .wp-line b{color:#3B6D11}
.wish-prog .wp-sub{font-size:12px;color:#7c8a6e;margin-top:3px}
.wish-miles{max-width:360px;margin:0 auto 10px;display:flex;flex-direction:column;gap:8px}
.wish-claimall{background:#639922;color:#fff;border:0;border-radius:10px;padding:9px;font-size:14px;font-weight:900;cursor:pointer}
.wish-mile{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;border:1.5px solid #e6efd6;text-align:left}
.wish-mile.reached{border-color:#bfe0a0;background:#f2f9e9}
.wish-mile .wm-stage{font-size:15px;font-weight:900;color:#3B6D11;flex:0 0 auto;width:40px}
.wish-mile .wm-info{flex:1;min-width:0;display:flex;flex-direction:column}
.wish-mile .wm-th{font-size:12px;color:#8a7a5f}
.wish-mile .wm-rw{font-size:13.5px;font-weight:800;color:#5a4620}
.wm-claim{flex:0 0 auto;background:#e0842c;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-size:13.5px;font-weight:900;cursor:pointer}
.wm-claimed{flex:0 0 auto;color:#2e7d5b;font-size:13px;font-weight:800}
.wm-locked{flex:0 0 auto;color:#a09a8a;font-size:12px}
.wish-actbar{display:flex;gap:8px;max-width:360px;margin:2px auto 8px}
.wish-actbar #wishInput{flex:1;min-width:0;padding:10px 12px;border:1.5px solid #cfe0b8;border-radius:11px;font-size:14px;font-family:inherit}
.wish-do{flex:0 0 auto;background:#639922;color:#fff;border:0;border-radius:11px;padding:10px 14px;font-size:14px;font-weight:900;cursor:pointer}
.wish-do:disabled{background:#cdbf9f}
.wish-feed{max-width:360px;margin:4px auto 6px;text-align:left}
.wish-feed .wf-title{font-size:13px;font-weight:800;color:#3B6D11;margin:6px 0 4px}
.wish-feed .wf-item{font-size:12.5px;color:#5a5040;padding:4px 0;border-bottom:1px solid rgba(90,110,60,.1)}
.wish-feed .wf-item b{color:#3B6D11}

/* ================= 生活智慧王挑戰（v0.32.0）================= */
.quiz-card{max-width:440px;}
.quiz-title{margin:2px 0 10px;font-size:23px;text-align:center;}
.quiz-bar-row{display:flex;align-items:center;gap:10px;margin:2px 0 12px;}
.quiz-bar{flex:1;height:13px;background:#fff6e0;border:2px solid #ead7ae;border-radius:999px;overflow:hidden;}
.quiz-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd666,#f2b705);transition:width .3s;}
.quiz-score{font-size:15px;font-weight:800;color:#b4531a;white-space:nowrap;}
.quiz-score b{font-size:19px;}
.quiz-qno{font-size:14px;color:#9a7a3a;font-weight:800;margin-bottom:6px;}
.quiz-q{font-size:21px;font-weight:900;line-height:1.4;margin:0 0 14px;}
.quiz-opts{display:flex;flex-direction:column;gap:11px;}
.quiz-opt{font-size:18px;font-weight:700;text-align:left;color:#4a3312;background:#fff;border:2.5px solid #ead7ae;
  border-radius:15px;padding:14px 15px;cursor:pointer;line-height:1.4;display:flex;align-items:center;gap:10px;
  font-family:inherit;transition:transform .08s,background .15s;}
.quiz-opt .k{flex:none;width:29px;height:29px;border-radius:50%;background:#fbebc2;color:#8a6412;display:grid;place-items:center;font-weight:900;font-size:15px;}
.quiz-opt:active{transform:scale(.99);}
.quiz-opt.ok{background:#e6f6ec;border-color:#3fa96a;color:#1f6e42;}
.quiz-opt.ok .k{background:#3fa96a;color:#fff;}
.quiz-opt.bad{background:#fceae6;border-color:#e4694e;color:#a83a28;}
.quiz-opt.bad .k{background:#e4694e;color:#fff;}
.quiz-opt.mute{opacity:.55;}
.quiz-opt:disabled{cursor:default;}
.quiz-fb{margin-top:13px;display:none;}
.quiz-fb.show{display:block;animation:wheelFade .2s;}
.quiz-fb .head{font-size:19px;font-weight:900;margin-bottom:4px;}
.quiz-fb .head.good{color:#3fa96a;}
.quiz-fb .head.no{color:#e4694e;}
.quiz-fb .exp{font-size:15px;line-height:1.6;color:#5a451e;background:#fff7e0;border-left:5px solid #f2b705;border-radius:8px;padding:10px 12px;}
.quiz-next{margin-top:13px;width:100%;font-size:20px;font-weight:900;color:#fff;background:linear-gradient(#7ec091,#6bae7e);
  border:none;border-radius:15px;padding:14px;box-shadow:0 5px 0 #4e9163;cursor:pointer;font-family:inherit;}
.quiz-next:active{transform:translateY(3px);box-shadow:0 2px 0 #4e9163;}
.quiz-end{text-align:center;padding:22px 8px;}
.quiz-end .emo{font-size:62px;line-height:1;}
.quiz-end .ttl{font-size:24px;font-weight:900;margin:8px 0 2px;}
.quiz-end .big{font-size:21px;margin:8px 0 2px;}
.quiz-end .big b{color:#b4531a;font-size:28px;}
.quiz-end .coin{font-size:19px;margin:6px 0 2px;color:#8a6412;}
.quiz-end .coin b{color:#d89a04;font-size:24px;}
.quiz-end .word{font-size:15px;color:#7a5a1e;margin:10px 0 4px;}

/* ===== 🧺 今天的小日子 · P2 對話式（v0.57.46）——沿用既有療癒色，未新增主色 ===== */
.td-dots{display:flex;gap:8px;justify-content:center;margin:2px 0 14px;}
.td-dots>span{width:9px;height:9px;border-radius:50%;background:#ecdcb6;transition:.25s;}
.td-dots>span.done{background:#7ec091;}
.td-dots>span.cur{background:#f2b705;transform:scale(1.35);}
.td-topic{background:linear-gradient(#fff6e0,#ffeec6);border:2px solid #ead7ae;border-radius:16px;padding:13px 14px;text-align:center;margin-bottom:14px;}
.td-topic-h{font-size:19px;font-weight:900;color:#b4531a;}
.td-topic-props{font-size:26px;letter-spacing:6px;margin:8px 0 4px;}
.td-topic-sub{font-size:13px;color:#9a7a3a;}
.td-role{display:table;font-size:13px;font-weight:800;color:#8a6412;background:#fbebc2;border-radius:999px;padding:3px 12px;margin:0 auto 8px;}
.td-bubble{display:flex;align-items:flex-start;gap:10px;margin:6px 0 14px;}
.td-bubble.center{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:6px;}
.td-bubble.intro{margin-top:4px;}
.td-face{font-size:40px;line-height:1;flex:none;}
.td-face.sm{font-size:22px;vertical-align:middle;margin-right:4px;}
.td-say{background:#fff;border:2.5px solid #ead7ae;border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:19px;font-weight:800;line-height:1.5;color:#4a3312;}
.td-bubble.center .td-say{border-radius:16px;}
.td-hold{color:#b4531a;}
.td-opts{display:flex;flex-direction:column;gap:11px;}
.td-opt{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:800;text-align:left;color:#4a3312;background:#fff;border:2.5px solid #ead7ae;border-radius:16px;padding:14px 16px;cursor:pointer;transition:.15s;}
.td-opt-ic{font-size:26px;flex:none;}
.td-opt-t{flex:1;}
.td-opt:active{transform:scale(.99);}
.td-opt.ok{background:#e6f6ec;border-color:#3fa96a;color:#1f6e42;}
.td-opt.bad{background:#fbeee2;border-color:#e79a4e;color:#a05a1a;}
.td-opt.mute{opacity:.5;}
.td-opt:disabled{cursor:default;}
.td-fb{margin-top:14px;display:none;}
.td-fb.show{display:block;animation:wheelFade .2s;}
.td-react{font-size:18px;font-weight:900;margin-bottom:8px;}
.td-react.good{color:#3fa96a;}
.td-react.soft{color:#c77b2e;}
.td-reson{font-size:15px;line-height:1.6;color:#6a5424;background:#fff7ea;border-radius:10px;padding:8px 12px;margin-bottom:8px;}
.td-bust{font-size:15px;line-height:1.6;color:#5a451e;background:#fff7e0;border-left:5px solid #f2b705;border-radius:8px;padding:10px 12px;margin-bottom:8px;}
.td-rate{font-size:14px;font-weight:800;color:#b4531a;margin-bottom:6px;}
.td-combo{font-size:15px;font-weight:900;color:#e4694e;margin-bottom:6px;}
/* 團購連動（答對時出現）：有真實商品＝可點金色卡；沒有＝自帶文字淡卡 */
.td-shop{display:block;margin:2px 0 6px;font-size:15px;font-weight:800;text-align:center;color:#b4531a;background:linear-gradient(#fff3d6,#ffe7b0);border:2px solid #f2c368;border-radius:12px;padding:11px 12px;text-decoration:none;box-shadow:0 2px 6px rgba(242,183,5,.18);}
.td-shop:active{transform:scale(.99);}
.td-shop.plain{color:#8a6412;background:#fff7e6;border-color:#ead7ae;box-shadow:none;}
.td-go{margin-top:6px;width:100%;font-size:20px;font-weight:900;color:#fff;background:linear-gradient(#7ec091,#6bae7e);border:none;border-radius:14px;padding:13px;box-shadow:0 4px 0 #4e9163;cursor:pointer;}
.td-go:active{transform:translateY(3px);box-shadow:0 1px 0 #4e9163;}
.td-sum{text-align:center;padding:10px 4px 6px;}
.td-sum-h{font-size:23px;font-weight:900;color:#b4531a;margin-bottom:14px;}
.td-sum-items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px;}
.td-sum-chip{font-size:32px;line-height:1;background:#fff6e0;border:2px solid #ead7ae;border-radius:16px;padding:10px 14px;}
.td-sum-chip.miss{opacity:.55;border-style:dashed;}
.td-sum-miss{font-size:13px;color:#9a7a3a;margin-bottom:12px;}
.td-grow{font-size:17px;font-weight:800;color:#8a6412;margin:12px 0 6px;}
.td-grow b{color:#d89a04;font-size:22px;}
.td-streak{font-size:15px;color:#7a5a1e;margin-bottom:6px;}
.td-streak b{color:#b4531a;font-size:19px;}
.td-tomorrow{font-size:15px;color:#6bae7e;font-weight:800;margin:8px 0 12px;}
.td-sum-btns{margin-top:4px;}
.td-share{font-size:16px;font-weight:800;color:#b4531a;background:#fff;border:2px solid #ead7ae;border-radius:12px;padding:10px 20px;cursor:pointer;}

/* ================= 沒上線越久越可憐（v0.33.0）================= */
/* CSS 畫的蒼蠅（取代 🦟 emoji，部分手機 emoji 會顯示成 □）*/
.flies .fly b{
  display:inline-block; width:9px; height:6px; font-size:0;
  background:radial-gradient(circle at 40% 35%, #4a4a4a, #101010);
  border-radius:50%; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.3);
}
.flies .fly b::before, .flies .fly b::after{
  content:""; position:absolute; top:-2px; width:6px; height:5px;
  background:rgba(215,228,238,.55); border:1px solid rgba(120,140,150,.45); border-radius:50%;
}
.flies .fly b::before{ left:-3px; transform:rotate(-25deg); }
.flies .fly b::after{ right:-3px; transform:rotate(25deg); }

/* 大便（坨數＝天數；3 天起可點手動清理）*/
.poop-field{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.poop-field .poop{
  position:absolute; width:30px; height:30px; border:none; background:none; padding:0;
  font-size:24px; line-height:1; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));
  animation:poopWob 1.6s ease-in-out infinite;
}
.poop-field .poop::before{ content:"💩"; }
.poop-field .poop.tappable{ pointer-events:auto; cursor:pointer; }
.poop-field .poop.gone{ animation:poopPuff .3s ease forwards; pointer-events:none; }
@keyframes poopWob{ 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }
@keyframes poopPuff{ to{opacity:0; transform:scale(.2) translateY(-8px)} }

/* 6 天瀕臨離家：冷色淒涼＋強烈警示脈動（比 3 天的暖色委屈更淒涼）*/
.pet-stage-wrap.neglect-6 .pet-emoji{ filter:grayscale(.78) brightness(.6) contrast(1.06) !important; }
.pet-stage-wrap.neglect-6{ animation:neglect6Pulse 1.1s ease-in-out infinite !important; }
@keyframes neglect6Pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(90,120,160,0); }
  50%{ box-shadow:0 0 0 4px rgba(228,105,78,.5), 0 0 22px rgba(70,100,140,.55); }
}

/* 洗澡（清潔）鎖住樣式 */
.action-btn.wash-locked{ filter:grayscale(.55) brightness(.96); position:relative; }
.action-btn.wash-locked::after{
  content:"🔒"; position:absolute; top:1px; right:5px; font-size:12px; line-height:1;
}

/* ================= 貨幣圖示（取代 💰/🎁）================= */
.cur-ic{ width:1.15em; height:1.15em; object-fit:contain; vertical-align:-0.22em; }
.wallet-chip .cur-ic{ width:20px; height:20px; vertical-align:-0.34em; }

/* 旅行帶回隱藏優惠券 揭曉卡（v0.33.0）*/
.tv-coupon{
  display:flex; align-items:center; gap:12px; margin:12px auto 4px; max-width:320px;
  background:linear-gradient(#FFF7E0,#FFE9BE); border:2px dashed #E0A94E; border-radius:14px;
  padding:10px 14px; text-align:left; animation:wheelPop .4s cubic-bezier(.2,1.3,.4,1);
}
.tv-coupon img{ width:56px; height:56px; object-fit:contain; flex:none; }
.tv-coupon b{ color:#B4531A; }

/* 遊戲中心 新手指南 條列（v0.33.2）*/
.game-howto{ margin:6px 0 4px; padding-left:20px; }
.game-howto li{ font-size:14.5px; line-height:1.7; margin-bottom:6px; color:#5a451e; }
.game-howto li b{ color:#4A3312; }
/* 新手指南改可收合（項目變多也不會把「怎麼玩」畫面拉太長）；預設收合，點開才展開 */
.howto-acc > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.howto-acc > summary::-webkit-details-marker{ display:none; }
.howto-acc > summary .howto-h{ font-size:19px; font-weight:900; color:#3B2A20; }
.howto-acc > summary .acc-hint{ font-size:14px; font-weight:800; color:#B5480B; white-space:nowrap; }
.howto-acc:not([open]) > summary .acc-hint::before{ content:'▸ 點我看'; }
.howto-acc[open] > summary .acc-hint::before{ content:'▾ 收合'; }

/* ================= 拍照餵食（v0.34.0）================= */
.camera-card{ max-width:440px; text-align:center; }
.cam-title{ margin:2px 0 2px; font-size:23px; }
.cam-sub{ margin:0 0 10px; color:#8a6a32; font-size:14px; }
.cam-warn{ background:#FCE7E2; border:1.5px solid #E4694E; color:#A83A28; border-radius:12px;
  padding:9px 12px; font-size:13px; line-height:1.6; margin-bottom:10px; text-align:left; }
.cam-stage{ border-radius:16px; overflow:hidden; background:#222; aspect-ratio:4/3; display:grid; place-items:center; }
#camVideo{ width:100%; height:100%; object-fit:cover; display:none; }
.cam-ph{ color:#cbb; font-size:15px; padding:20px; line-height:1.7; text-align:center; }
.cam-status{ font-size:14px; margin:10px 0 4px; color:#7a5a1e; }
.cam-status b{ color:#d8891f; }
.cam-btn{ font-size:19px; font-weight:900; color:#fff; border:none; border-radius:14px; padding:13px;
  cursor:pointer; width:100%; margin-top:8px; font-family:inherit; }
.cam-start{ background:linear-gradient(#8FD0A6,#5FB07E); box-shadow:0 4px 0 #4E9163; }
.cam-shot{ background:linear-gradient(#FF8264,#F26A4B); box-shadow:0 4px 0 #D8503A; }
.cam-row{ display:flex; gap:8px; }
.cam-flip{ flex:none; width:56px; background:#FBEBC2; color:#8a6412; box-shadow:0 4px 0 #d8c48a; }
.cam-btn:active{ transform:translateY(3px); }
.cam-btn:disabled{ filter:grayscale(.4) brightness(.95); }
.cam-note{ font-size:12px; color:#8a6a32; margin-top:10px; line-height:1.6; }

/* iPhone 加到主畫面步驟（iOS 無法一鍵安裝，改用清楚三步教學）v0.35.4 */
.ios-install{ background:#FFF6E6; border:1.5px solid #F0D9A8; border-radius:12px; padding:12px 14px; margin-top:6px; }
.ios-install-note{ margin:0 0 8px; font-size:13.5px; font-weight:700; color:#7a5a1e; }
.ios-install-steps{ margin:0; padding-left:22px; }
.ios-install-steps li{ font-size:15px; line-height:1.9; color:#5a451e; }
.ios-install-steps b{ color:#D9862A; }

/* ===== 拍照畫面遊戲化：幸運值進度條＋今日星星＋回饋動畫（v0.35.4）===== */
.cam-luck{ margin:4px auto 12px; max-width:320px; text-align:left; }
.cam-luck-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; font-weight:800; color:#3f7d4f; margin-bottom:5px; }
.cam-luck-top b{ color:#2f9e57; font-size:17px; }
.cam-luck-lv{ font-size:12px; font-weight:900; color:#fff; background:linear-gradient(#7BD39A,#4CAE73); padding:2px 9px; border-radius:999px; }
.cam-luck-bar{ position:relative; height:16px; border-radius:999px; background:#E4EFE3; overflow:visible;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12); border:1.5px solid #CFE6CE; }
.cam-luck-fill{ height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,#8FD9A8,#4CAE73); box-shadow:0 0 8px rgba(76,174,115,.6);
  transition:width .55s cubic-bezier(.2,1.2,.4,1); position:relative; }
.cam-luck-fill::after{ content:"🍀"; position:absolute; right:-3px; top:50%; transform:translateY(-50%); font-size:14px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.cam-luck-float{ position:absolute; right:8px; top:-4px; font-size:15px; font-weight:900; color:#2f9e57; opacity:0; pointer-events:none; }
.cam-luck-float.go{ animation:luckFloat 1s ease-out; }
@keyframes luckFloat{ 0%{opacity:0; transform:translateY(6px) scale(.7)} 25%{opacity:1} 100%{opacity:0; transform:translateY(-26px) scale(1.15)} }
.cam-luck.bump .cam-luck-bar{ animation:luckBump .45s ease; }
@keyframes luckBump{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.04)} }

.cam-daily{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:12px 0 8px; }
.cam-daily-lbl{ font-size:13px; font-weight:800; color:#7a5a1e; }
.cam-stars{ display:inline-flex; gap:6px; }
.cam-stars i{ width:22px; height:22px; border-radius:50%; background:#EAD9BB; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-style:normal; color:#fff; transition:transform .25s, background .25s; box-shadow:inset 0 1px 2px rgba(0,0,0,.12); }
.cam-stars i.on{ background:linear-gradient(#FFD24D,#F2A63E); box-shadow:0 2px 5px rgba(242,166,62,.5); transform:scale(1.08); }
.cam-stars i.on::before{ content:"🍀"; }
.cam-stars i.pop{ animation:starPop .5s ease; }
@keyframes starPop{ 0%{transform:scale(.6)} 55%{transform:scale(1.35)} 100%{transform:scale(1.08)} }
.cam-status-msg{ font-size:13px; color:#7a5a1e; font-weight:700; }
.cam-status-msg b{ color:#2f9e57; }
/* 開啟相機按鈕：加一點呼吸光暈，更有引導性 */
.cam-start{ animation:camBreath 2.2s ease-in-out infinite; }
@keyframes camBreath{ 0%,100%{ box-shadow:0 4px 0 #4E9163, 0 0 0 rgba(95,176,126,0);} 50%{ box-shadow:0 4px 0 #4E9163, 0 0 16px rgba(95,176,126,.55);} }

/* 屬性圖示（飽食/心情/幸運，取代 emoji）v0.34.1 */
.stat-ic{ width:20px; height:20px; object-fit:contain; vertical-align:-0.35em; margin-right:2px; }

/* ============ iPhone 實測修正（v0.34.2）============ */
/* 相機：上方顯示自己的寵物、下方照片牆 */
.cam-pet{ width:72px; height:72px; object-fit:contain; display:block; margin:2px auto 8px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
.cam-gallery{ margin-top:8px; }
.cam-gal-title{ font-size:12.5px; color:#8a6a32; font-weight:800; margin-bottom:6px; text-align:left; }
.cam-gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.cam-gal-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.12); }

/* 屬性圖示：統一放大到「飽食」那種大小、對齊文字 */
.stat-ic{ width:22px !important; height:22px !important; vertical-align:-0.32em; margin-right:2px; }
.wallet-chip .cur-ic{ width:22px !important; height:22px !important; vertical-align:-0.32em; margin-right:1px; }
/* v0.35.4：所有屬性/貨幣圖示已在圖檔層統一成 80% 內容佔比，這裡不再單獨放大寵幣 */
/* 心情三段動態表情（v0.35.3）：開心閃爍／低落垂頭 */
#moodChip{ position:relative; }
.mood-happy .stat-ic{ animation:moodTwinkle 1.5s ease-in-out infinite; transform-origin:center; }
@keyframes moodTwinkle{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.16) rotate(-6deg); } }
.mood-happy::after{ content:"✨"; position:absolute; top:-7px; left:6px; font-size:12px; pointer-events:none;
  animation:moodSpark 1.5s ease-in-out infinite; }
@keyframes moodSpark{ 0%,100%{ opacity:0; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.1); } }
.mood-low .stat-ic{ animation:moodDroop 2.4s ease-in-out infinite; }
@keyframes moodDroop{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(2px); } }
.mood-low b{ color:#5a86b8; }

/* 底部導覽「遊戲中心」icon 圖案偏小、留白多 → 放大框對齊其他分頁 */
.nav-btn[data-tab="game"] .nav-ic{ width:36px !important; height:36px !important; margin-top:-4px; margin-bottom:-3px; }

/* 團購點數 chip 不要綠底：改白底、暖色數字強調 */
.wallet-chip.highlight{ background:#fff !important; color:var(--ink) !important; border-color:var(--cloud-line) !important; font-weight:700; }
.wallet-chip.highlight b{ color:#D8503A; }

/* 遊戲中心選單 icon 統一大小、置中對齊 */
.game-btn .g-ic{ font-size:36px !important; width:42px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }

/* 頂部列：手機壓成一排、不擁擠 */
@media (max-width:480px){
  .top-bar{ gap:6px; flex-wrap:nowrap; }
  .top-bar-title{ font-size:16px; white-space:nowrap; flex:0 0 auto; }
  .top-bar-right{ gap:5px; min-width:0; flex-wrap:nowrap; }
  .sound-btn{ font-size:15px; padding:4px 7px; }
  .guide-btn{ font-size:11px; padding:4px 8px; white-space:nowrap; }
  .rank-pill{ font-size:11px; padding:4px 9px; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* 本週新加入（v0.35.0）*/
.new-members{ display:grid; gap:6px; }
.nm-row{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--cloud-line); border-radius:12px; padding:7px 12px; }
.nm-pet{ font-size:22px; flex:none; }
.nm-name{ flex:1; font-size:14px; min-width:0; }
.nm-join{ font-size:12px; color:#9a8a6a; flex:none; }

/* ===== v0.50.0 成就「十全十美」：紅色呼吸＋閃光（achievement_defs.glow='red'） ===== */
.ach-item.ach-glow-red{border-color:#e53935;background:linear-gradient(135deg,#fff5f5,#ffe3e0);animation:achRedBreath 2.2s ease-in-out infinite;position:relative;overflow:hidden;}
@keyframes achRedBreath{0%,100%{box-shadow:0 0 6px rgba(229,57,53,.35);}50%{box-shadow:0 0 22px rgba(229,57,53,.9);}}
.ach-item.ach-glow-red::after{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);animation:achRedFlash 2.8s ease-in-out infinite;pointer-events:none;}
@keyframes achRedFlash{0%{left:-75%;}60%{left:130%;}100%{left:130%;}}
.ach-item.ach-glow-red .ach-name{color:#c62828;}

/* ===== 成就「第一間小屋」：淡紫呼吸發光（achievement_defs.glow='purple'；v0.60.21）——溫柔呼吸、不閃光 ===== */
.ach-item.ach-glow-purple{border-color:#9f7ad8;background:linear-gradient(135deg,#f8f4ff,#ece1fa);animation:achPurpleBreath 2.6s ease-in-out infinite;position:relative;}
@keyframes achPurpleBreath{0%,100%{box-shadow:0 0 6px rgba(159,122,216,.30);}50%{box-shadow:0 0 20px rgba(159,122,216,.85);}}
.ach-item.ach-glow-purple .ach-name{color:#7c4dd0;}
/* 鎖定時：淡淡的靜態淡紫（預告），不呼吸；解鎖後才換成上面的滿版呼吸 */
.ach-item.ach-glow-purple-locked{border-color:#e0d5f2;background:linear-gradient(135deg,#fcfaff,#f5f0fc);}
.ach-item.ach-glow-purple-locked .ach-name{color:#9a86c4;}

/* ===== 特殊成就（重生劇場等 glow='blackgold'）：暗黑神秘風——黑＋深灰、緩慢黑霧＋黑玻璃流光，非金色發光，文字仍清楚 (v0.56.24) ===== */
/* 用 .unlocked 提高權重，確保蓋過一般 .special 的金色底 */
.ach-item.ach-glow-blackgold.unlocked{border:1px solid #3a3a46;background:linear-gradient(135deg,#0d0d12,#1b1b24 55%,#101015);color:#d6d6e2;box-shadow:none;animation:achDarkBreath 3.4s ease-in-out infinite;position:relative;overflow:hidden;}
@keyframes achDarkBreath{0%,100%{box-shadow:0 0 10px 1px rgba(50,50,85,.45), inset 0 0 22px rgba(0,0,0,.6);}50%{box-shadow:0 0 20px 3px rgba(80,80,140,.55), inset 0 0 26px rgba(0,0,0,.72);}}
/* 緩慢流動的黑霧 */
.ach-item.ach-glow-blackgold.unlocked::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 85% at 28% 18%,rgba(70,70,110,.4),transparent 60%),radial-gradient(100% 75% at 82% 92%,rgba(25,25,45,.5),transparent 55%);animation:achMist 7.5s ease-in-out infinite alternate;}
@keyframes achMist{0%{opacity:.5;transform:translateX(-5px);}100%{opacity:.9;transform:translateX(5px);}}
/* 黑玻璃流光（Gloss）：暗色低調高光緩慢掃過 */
.ach-item.ach-glow-blackgold.unlocked::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(150,160,200,.16),transparent);animation:achDarkGloss 6s ease-in-out infinite;pointer-events:none;}
@keyframes achDarkGloss{0%{left:-80%;}55%{left:135%;}100%{left:135%;}}
.ach-item.ach-glow-blackgold.unlocked .ach-emoji{filter:none;opacity:1;position:relative;z-index:1;}
.ach-item.ach-glow-blackgold.unlocked .ach-name{color:#eaeaf4;text-shadow:0 0 7px rgba(120,140,210,.55);position:relative;z-index:1;}
.ach-item.ach-glow-blackgold.unlocked .ach-desc,.ach-item.ach-glow-blackgold.unlocked .ach-state{color:#9d9db0;position:relative;z-index:1;}

/* ============================================================
   🏆 成就外觀特效庫 · 可裝備特效（axfx）—— 位置無關、一份設計可套多處
   用法：元素加 [axfx-<code>]（設定顏色變數）＋一種形態 class：
     .axfx-ring（環形，用於頭像等圓框）／.axfx-halo（柔光暈，用於寵物舞台）
   顏色一律沿用既有成就特效色（金 marigold／綠 #57a86b／紅 #e53935／黑金 #3a3a46+金），未新增色。
   之後要套到鄰居拜訪／排行榜／留言板，只要在該處元素加同樣的 class 即可，不改資料結構。
   ============================================================ */
.axfx-gold{--axfx-c:242,166,62;--axfx-ring:242,193,78;}
.axfx-green{--axfx-c:87,168,107;--axfx-ring:87,168,107;}
.axfx-red{--axfx-c:229,57,53;--axfx-ring:229,57,53;}
.axfx-blackgold{--axfx-c:242,193,78;--axfx-ring:58,58,70;}
.axfx-purple{--axfx-c:159,122,216;--axfx-ring:159,122,216;}
.axfx-ring{animation:axfxRing 2.3s ease-in-out infinite;border-radius:inherit;}
@keyframes axfxRing{0%,100%{box-shadow:0 0 0 2px rgba(var(--axfx-ring),.55),0 0 12px rgba(var(--axfx-c),.55);}50%{box-shadow:0 0 0 3px rgba(var(--axfx-ring),.85),0 0 22px rgba(var(--axfx-c),.9);}}
.axfx-halo{animation:axfxHalo 2.7s ease-in-out infinite;}
@keyframes axfxHalo{0%,100%{box-shadow:0 0 18px 4px rgba(var(--axfx-c),.45);}50%{box-shadow:0 0 34px 10px rgba(var(--axfx-c),.75);}}
/* 裝備特效挑選列（我的 → 成就 上方） */
.axfx-equip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 12px;}
.axfx-equip .axfx-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:#5a4a2e;background:#fff;border:1px solid #EFE4D0;border-radius:999px;padding:6px 12px;cursor:pointer;}
.axfx-equip .axfx-chip.on{border-color:var(--marigold);box-shadow:0 0 0 2px rgba(242,166,62,.22);}
.axfx-equip .axfx-chip[disabled]{opacity:.45;cursor:not-allowed;}
/* 🏅 成就稱號（Phase D） */
.axfx-titlewrap{margin-top:6px;}
.axfx-titlehd{font-size:13px;font-weight:800;color:#6b5a3c;margin:2px 0 6px;}
.axfx-titlehint{font-size:12px;color:#9a8f7d;}
.me-ach-title{margin-top:4px;font-size:12.5px;font-weight:800;color:#c98a3a;}

/* ============================================================
   會呼吸的寵物元件（View Layer 顯示層；不改任何遊戲邏輯）
   在 #petStageWrap 內：#petEmoji 呼吸、.pet-contact 接觸陰影、.pet-light 柔光
   呼吸：scaleY 1→1.018、scaleX 1→0.995、4s ease-in-out、origin bottom center，純 CSS
   ============================================================ */
.pet-emoji{
  transform-origin:50% 100%;
  animation:petBreath 4s ease-in-out infinite, petSway 7s ease-in-out infinite;
  will-change:transform, rotate;      /* 合成層；呼吸動 transform(scale)、重心微調動 rotate，兩者自動疊加 */
  backface-visibility:hidden;
}
/* 重心微調（weight shift）：用獨立的 rotate 屬性，與呼吸的 transform 各走各的、自動疊加；
   以 bottom center 為支點極輕微左右傾（±0.7°、7s），像自然的重心轉移。純 CSS、不改 HTML/JS。 */
@keyframes petSway{
  0%   { rotate: 0deg; }
  25%  { rotate: 0.7deg; }
  50%  { rotate: 0deg; }
  75%  { rotate: -0.7deg; }
  100% { rotate: 0deg; }
}
@keyframes petBreath{
  0%   {transform:scaleY(1)     scaleX(1);}
  45%  {transform:scaleY(1.018) scaleX(0.995);}
  55%  {transform:scaleY(1.018) scaleX(0.995);}  /* 吸滿短暫停留，更像呼吸 */
  100% {transform:scaleY(1)     scaleX(1);}
}
/* 柔光：左上受光＋右下微陰影，疊在寵物之上、配件（z-index:3）之下 */
.pet-light{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1;
  background:
    radial-gradient(38% 34% at 30% 24%, rgba(255,250,235,.55), rgba(255,250,235,0) 60%),
    radial-gradient(60% 60% at 74% 86%, rgba(120,86,52,.10), rgba(120,86,52,0) 60%);
  mix-blend-mode:soft-light;
}
/* 接觸陰影：腳底，置於寵物之後（z-index:-1，與 isolation 堆疊環境相容） */
.pet-contact{
  position:absolute; left:50%; bottom:12%; width:56%; height:12%;
  transform:translateX(-50%); pointer-events:none; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(90,70,45,.28), rgba(90,70,45,.10) 55%, rgba(90,70,45,0) 75%);
  filter:blur(1px);
}
/* 尊重「減少動態」系統設定：停用呼吸（含手機省電情境） */
@media (prefers-reduced-motion: reduce){
  .pet-emoji{animation:none !important;}
  .pet-anchor-box{animation:none !important;}   /* v0.60.130 一起停用「配件同步呼吸/擺動」 */
}

/* ============================================================
   眨眼閉眼層（View Layer；#petBlink 疊在 #petEmoji 上）
   與主圖同尺寸、同呼吸(petBreath)，opacity 由 petBlink 每 5.5s 快速閃一下＝眨眼
   src 由 app.js renderPet 同步成對應的 *_blink.png；造型/髒污時自動隱藏
   ============================================================ */
.pet-blink{
  position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;
  width:120px; height:120px; object-fit:contain;
  pointer-events:none; opacity:0; z-index:1;
  transform-origin:50% 100%;
  animation:petBreath 4s ease-in-out infinite, petBlink 5.5s ease-in-out infinite, petSway 7s ease-in-out infinite;
  will-change:transform,opacity; backface-visibility:hidden;
}
@keyframes petBlink{
  0%, 88% {opacity:0;}
  91%, 94%{opacity:1;}   /* 閉眼約 165ms */
  97%,100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .pet-blink{animation:none !important; opacity:0 !important;}
}

/* ===== 更新紀錄：可收合、分類條列、🟢 Latest 標籤（前後台共用 .cl-*） ===== */
.cl-list{display:flex;flex-direction:column;gap:10px}
.cl-entry{border:1px solid #EAD9BB;border-radius:12px;background:#fff;overflow:hidden}
.cl-head{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;cursor:pointer;padding:12px 14px;font-family:inherit;text-align:left;font-weight:800;color:#6b5f4d;font-size:15px}
.cl-v{font-weight:900;color:#3B6C60}
.cl-latest{font-size:12px;font-weight:800;color:#2e7d32;background:#e6f4ea;border:1px solid #b7e0c2;border-radius:999px;padding:1px 8px}
.cl-date{font-size:12.5px;color:#b0a48f;font-weight:600}
.cl-caret{margin-left:auto;font-size:12px;color:#b0a48f;white-space:nowrap;flex-shrink:0}
.cl-caret::after{content:'▼ 展開'}
.cl-entry.cl-open .cl-caret::after{content:'▲ 收合'}
.cl-summary{padding:0 14px 12px;display:flex;flex-wrap:wrap;gap:6px}
.cl-entry.cl-open .cl-summary{display:none}
.cl-tag{font-size:12.5px;font-weight:700;color:#7a6a52;background:#f6efe1;border-radius:8px;padding:3px 9px}
.cl-note-short{font-size:13px;color:#8a7a68;font-weight:500;line-height:1.5}
.cl-body{display:none;padding:0 14px 12px}
.cl-entry.cl-open .cl-body{display:block}
.cl-group{margin-top:8px}
.cl-group-h{font-weight:800;color:#5a4a34;font-size:13.5px;margin-bottom:2px}
.cl-body ul{margin:2px 0 0;padding-left:20px}
.cl-body li{font-size:13.5px;color:#5a4a34;line-height:1.6;margin:2px 0}
.cl-note{font-size:13.5px;color:#5a4a34;line-height:1.7;margin:6px 0 0}

/* ===== Setting 母版 v3（Type C・所有設定頁共用）=====
   節奏：Header 三列(識別/版本資訊/按鈕) → 兩欄(左三張浮起卡/右玩家畫面 Preview) → 固定操作 Footer。
   目標：卡片浮起、背景退後；5 秒內看得出「有幾個設定區」。 */
.set-wrap{max-width:1180px}
/* Header 三列 */
.set-head{margin-bottom:10px}
.set-head-main h2{margin:0 0 4px}
.set-hint{margin:0;font-size:13px;color:#7d6e5a;line-height:1.6;max-width:640px}
.set-verbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.set-verinfo{font-size:13px;font-weight:800;color:#3B6C60;background:rgba(243,250,246,.96);border:1px solid #CDE7DA;border-radius:999px;padding:5px 14px}
.set-verinfo .v{font-weight:900;font-size:15px}
.set-verinfo code{background:#e4f1ea;border-radius:5px;padding:0 5px;font-weight:700}
.set-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.set-actions .set-div{width:1px;height:22px;background:#E0D3B6;margin:0 3px}
.set-verhist{background:rgba(255,255,255,.97);border:1px solid #EADFC8;border-radius:14px;padding:6px;margin:-4px 0 14px;box-shadow:0 6px 18px rgba(70,50,20,.10)}
.set-verhist .vrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:13px;color:#5a4a34}
.set-verhist .vrow+.vrow{border-top:1px solid #F3EADB}
.set-verhist .vmeta{color:#b0a48f;font-weight:600}
.set-skeleton{display:flex;flex-direction:column;gap:12px}
.set-skeleton .set-sk{height:120px;border-radius:18px;background:linear-gradient(90deg,#efe6d2 25%,#faf5ea 50%,#efe6d2 75%);background-size:200% 100%;animation:set-sh 1.2s infinite;box-shadow:0 8px 24px rgba(70,50,20,.10)}
@keyframes set-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.set-empty{padding:34px;text-align:center;color:#7d6e5a;background:rgba(255,255,255,.95);border:1px dashed #E0D3B6;border-radius:16px;display:flex;flex-direction:column;gap:12px;align-items:center;font-size:14px;box-shadow:0 8px 24px rgba(70,50,20,.10)}
/* 兩欄 */
.set-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media(max-width:900px){.set-cols{grid-template-columns:1fr}}
.set-main{display:flex;flex-direction:column;gap:16px}
.set-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.set-duo{grid-template-columns:1fr}}
/* 浮起的設定卡（每區＝一張卡；卡頭有色帶，5 秒看得出幾個區）*/
.set-card{background:rgba(255,255,255,.97);border:1px solid #EADFC8;border-radius:18px;box-shadow:0 8px 24px rgba(70,50,20,.13),0 1px 2px rgba(0,0,0,.04);overflow:hidden}
.set-cardh{display:flex;align-items:center;gap:9px;background:#F3FAF6;border-bottom:1px solid #E1EEE7;padding:12px 16px}
.set-cardh .em{font-size:20px;background:#fff;border:1px solid #DCEBE3;border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.set-cardh h3{margin:0;font-size:15.5px;color:#33564d}
.set-cardh small{color:#9fb4aa;margin-left:auto;font-size:12px}
.set-cardb{padding:14px 16px 6px}
.set-f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:480px){.set-f2{grid-template-columns:1fr}}
.set-adv{background:rgba(255,255,255,.92);border:1px solid #EADFC8;border-radius:16px;padding:4px 16px;box-shadow:0 6px 18px rgba(70,50,20,.09)}
.set-adv summary{cursor:pointer;font-weight:800;color:#6b5f4d;padding:10px 0}
/* Preview：玩家畫面卡 */
.set-side{position:sticky;top:14px}
@media(max-width:900px){.set-side{position:static}}
.set-preview{background:linear-gradient(180deg,#FFFDF7,#FFF0D8);border:1px solid #EAD09A;border-radius:20px;padding:16px 15px;box-shadow:0 12px 30px rgba(150,110,40,.18)}
.pv-title{font-size:15px;font-weight:900;color:#6b5233;margin-bottom:13px;text-align:center;letter-spacing:.5px}
.pv-sec{background:#fff;border:1px solid #F1DFB4;border-radius:15px;padding:12px 14px;margin-bottom:11px;box-shadow:0 2px 8px rgba(180,140,60,.10)}
.pv-sec:last-child{margin-bottom:0}
.pv-sec-h{font-size:14.5px;font-weight:800;color:#3B6C60;margin-bottom:7px}
.pv-line{font-size:13px;color:#6b5f4d;line-height:1.9}
.pv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.pv-chip{background:#FFF3DC;border:1px solid #EAD09A;border-radius:999px;padding:4px 12px;font-size:13.5px;font-weight:800;color:#6b5233}
/* Footer 固定操作 */
.set-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;align-items:center;gap:12px;background:rgba(255,255,255,.97);border:1px solid #EADFC8;box-shadow:0 -4px 18px rgba(70,50,20,.12);padding:12px 16px;margin-top:16px;border-radius:16px}
.set-dirty{margin-right:auto;font-size:13px;color:#C1503F;font-weight:800}
.set-jsonerr{color:#C1503F;font-size:12.5px;margin-top:8px;font-weight:700}

/* ═══════════ 🌤️ Dream Casual・紅金天空版 換皮（v0.60.191・依《小萌寵 UI 美術聖經》）═══════════
   背景=天空草地｜標題=泡泡字圖｜外框=紅金燈泡環(frame_sky)｜中心=金GO(hub_go)｜指針=藍水滴(pointer_drop)
   粉彩扇形｜玻璃資訊卡｜生命感(燈泡跑馬燈/GO呼吸/指針微晃)。玩法/獎項圖/短名全保留。★!important 覆蓋舊 v162 素材★ */
#wheelModal{background:url("icons/wheel/wheel_bg_sky_mobile.webp") center/cover no-repeat fixed!important;}
@media(min-width:700px){#wheelModal{background:url("icons/wheel/wheel_bg_sky_desktop.webp") center/cover no-repeat fixed!important;}}
#wheelModal .wheel-card{background:none!important;}
#wheelModal .wheel-title{background:url("icons/wheel/title_bubble.webp") center/contain no-repeat!important;
  width:min(80vw,320px)!important;aspect-ratio:900/680!important;height:auto!important;font-size:0!important;
  margin:2px auto 4px!important;-webkit-text-stroke:0!important;filter:drop-shadow(0 4px 8px rgba(30,90,150,.25));}
#wheelModal .wheel-title::after{display:none!important;}
#wheelModal .wheel-sub{display:inline-block;background:linear-gradient(#5bb8f5,#3a92e0);color:#fff;font-weight:800;
  padding:5px 16px;border-radius:999px;box-shadow:0 4px 0 #2f7fc4;text-shadow:none;}
#wheelModal .wheel-free,#wheelModal .wheel-travelers{background:rgba(255,255,255,.6)!important;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.85)!important;border-radius:16px!important;box-shadow:0 8px 22px rgba(80,130,170,.16)!important;
  padding:9px 16px!important;color:#3a4a5a!important;}
#wheelModal .wheel-free b{color:#ff8f3a!important;}
#wheelModal .wheel-level{background:rgba(255,255,255,.55)!important;border-radius:16px!important;}
.wheel-wrap.has-frame .wheel-frame{display:block!important;object-fit:contain;}
.wheel-wrap.has-frame .wheel-disc{inset:11%!important;border:0!important;box-shadow:none!important;}   /* v0.60.430 盤面再放大到 78%（＞新孔73.2%），多的被綠邊蓋住＝填滿不露縫；無白邊無陰影 */
.wheel-wrap.has-frame .wheel-label .inner{top:5.5%!important;width:calc(92px * var(--wpz,1))!important;overflow:visible!important;}   /* v0.60.427 整組往外但保留文字安全區：圖片縮13%＝群組變矮，圖片仍靠外圈、文字底不超出內金框 */
.wheel-wrap.has-frame .wheel-label .wi{font-size:calc(33px * var(--wpz,1))!important;}   /* v0.60.427 emoji 圖縮 ~13%（配合圖片縮小，讓群組變矮、文字有安全區） */
.wheel-wrap.has-frame .wheel-label img{width:calc(52px * var(--wpz,1))!important;height:calc(52px * var(--wpz,1))!important;}   /* v0.60.427 60→52（縮 ~13%）＝群組變矮、圖片仍靠外圈、文字不被裁 */
.wheel-wrap.has-frame .wheel-label .nm{font-size:10.5px!important;color:#5a5040!important;background:none!important;white-space:nowrap!important;margin-top:6px!important;}   /* v0.60.426 文字固定放在圖片下方約 6px（隨圖一起是同一 Group） */
/* v0.60.193 版面縮緊：上方少留白 */
#wheelModal .wheel-card{gap:3px!important;padding-top:calc(4px + env(safe-area-inset-top))!important;justify-content:flex-start!important;}
#wheelModal .wheel-title{width:min(72vw,290px)!important;margin:0 auto 0!important;}
#wheelModal .wheel-sub{margin:2px auto 6px!important;}
#wheelModal .wheel-free,#wheelModal .wheel-travelers,#wheelModal .wheel-level{margin:4px auto!important;}
#wheelModal .wheel-wrap{margin-top:6px!important;}
.wheel-pointer{background:url("icons/wheel/pointer_drop.webp") center/contain no-repeat!important;
  width:50px!important;height:64px!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;top:5%!important;z-index:8!important;   /* v0.60.197 指針放大＋下移壓在獎項內圈上（原 34×44、top:-6px 太小又浮在框外看不清） */
  clip-path:none!important;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));transform-origin:50% 22%;animation:ptSway 2.6s ease-in-out infinite;}
.wheel-pointer::after{display:none!important;}
.wheel-wrap.has-frame .wheel-pointer{display:block!important;background:url("icons/wheel/pointer_drop.webp") center/contain no-repeat!important;width:58px!important;height:76px!important;top:2%!important;margin-left:-4px!important;z-index:8!important;transform-origin:50% 24%!important;animation:ptSway 2.6s ease-in-out infinite!important;}   /* v0.60.421 指針往左微移 4px（原本偏右）；pointer_drop＋會擺動 */
@keyframes ptSway{0%,100%{transform:translateX(-50%) rotate(-4deg)}50%{transform:translateX(-50%) rotate(4deg)}}
/* v0.60.414 六階外框演出：青銅無、白銀→神話漸強（光暈套外框圖，GPU 友善） */
@keyframes tierGlow{0%,100%{filter:drop-shadow(0 0 5px var(--tg))}50%{filter:drop-shadow(0 0 20px var(--tg))}}
@keyframes tierMyth{0%{filter:drop-shadow(0 0 8px #ff7aa8)}25%{filter:drop-shadow(0 0 20px #ffd24d)}50%{filter:drop-shadow(0 0 20px #7ad0ff)}75%{filter:drop-shadow(0 0 20px #c79bff)}100%{filter:drop-shadow(0 0 8px #ff7aa8)}}
.wheel-wrap.tier-silver   .wheel-frame{--tg:rgba(190,205,220,.75);animation:tierGlow 2.6s ease-in-out infinite}
.wheel-wrap.tier-gold     .wheel-frame{--tg:rgba(245,190,66,.8);animation:tierGlow 2.2s ease-in-out infinite}
.wheel-wrap.tier-crystal  .wheel-frame{--tg:rgba(43,186,208,.8);animation:tierGlow 2.4s ease-in-out infinite}
.wheel-wrap.tier-amethyst .wheel-frame{--tg:rgba(155,99,214,.8);animation:tierGlow 2.8s ease-in-out infinite}
.wheel-wrap.tier-myth     .wheel-frame{animation:tierMyth 4s linear infinite}
@media (prefers-reduced-motion:reduce){.wheel-wrap[class*="tier-"] .wheel-frame{animation:none!important}}
/* v0.60.417 移除粉紅「開始轉／今天轉」按鈕＝改用中心 GO 當開始鈕（wheelGoTap 已含轉動邏輯）；剩餘次數看「今日免費機會」 */
#wheelModal .wheel-spin{display:none!important;}
/* v0.60.418 中心 GO 狀態：有免費次數＝輕輕呼吸邀請點擊（保留原金光）；用完＝變暗變靜 */
@keyframes goBreath{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
/* v0.60.421 GO 狀態：預設就鮮豔＋呼吸邀請（有次數）；只有「用完次數」加 wheel-nospins 才變暗＝fail-safe 到鮮豔 */
.wheel-wrap.has-frame .wheel-hub{filter:none!important;opacity:1!important;animation:hubGlow 2.6s ease-in-out infinite, goBreath 1.5s ease-in-out infinite;cursor:pointer;}
.wheel-wrap.has-frame.wheel-nospins .wheel-hub{filter:grayscale(.6) brightness(.78)!important;opacity:.68!important;animation:none!important;}
.wheel-hub{background:url("icons/wheel/hub_go.webp") center/contain no-repeat!important;border:0!important;box-shadow:none!important;
  font-size:0!important;width:27%!important;height:27%!important;aspect-ratio:1/1;filter:drop-shadow(0 6px 8px rgba(120,80,0,.35));
  animation:goPulse 2.2s ease-in-out infinite;}
.wheel-wrap.has-frame .wheel-hub{width:27%!important;height:27%!important;top:50%!important;}
@keyframes goPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}
.wheel-marquee{position:absolute;inset:0;border-radius:50%;z-index:7;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,rgba(255,255,210,0) 0deg,rgba(255,255,190,.55) 18deg,rgba(255,255,210,0) 40deg,rgba(255,255,210,0) 178deg,rgba(255,255,190,.5) 196deg,rgba(255,255,210,0) 218deg);
  -webkit-mask:radial-gradient(circle,transparent 76%,#000 79%,#000 96%,transparent 99%);mask:radial-gradient(circle,transparent 76%,#000 79%,#000 96%,transparent 99%);
  animation:mqSpin 4.2s linear infinite;}
@keyframes mqSpin{to{transform:rotate(360deg)}}
/* v0.60.195 開始轉＝粉嫩膠囊美術圖 btn_start（文字疊上置中；胖胖 Soft 3D） */
#wheelModal .wheel-spin{background:url("icons/wheel/btn_start.webp") center/contain no-repeat!important;
  width:min(62vw,236px)!important;aspect-ratio:640/226!important;height:auto!important;
  padding:0 8%!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  display:none!important;align-items:center!important;justify-content:center!important;text-align:center!important;   /* v0.60.420 粉色開始鈕移除（改用中心 GO）——這行原本 display:flex 在 2831 隱藏規則之後、把它又顯示出來，改成 none 才真的隱藏 */
  white-space:normal!important;word-break:keep-all!important;overflow-wrap:anywhere!important;
  color:#fff!important;font-size:clamp(15px,4.5vw,19px)!important;font-weight:900!important;letter-spacing:.5px!important;line-height:1.1!important;
  text-shadow:0 2px 3px rgba(190,40,90,.6),0 0 2px rgba(190,40,90,.5)!important;
  filter:drop-shadow(0 6px 10px rgba(220,80,130,.28));}
#wheelModal .wheel-spin:active{transform:translateY(3px)!important;box-shadow:none!important;filter:brightness(1.04) drop-shadow(0 3px 5px rgba(220,80,130,.28))!important;}
#wheelModal .wheel-spin:disabled{filter:grayscale(.4) brightness(.97)!important;box-shadow:none!important;text-shadow:0 1px 2px rgba(120,90,90,.5)!important;}
/* v0.60.195 全服神樹＝綠色膠囊美術圖 btn_wish（文字疊上） */
#wheelModal .wish-entry{background:url("icons/wheel/btn_wish.webp") center/contain no-repeat!important;
  width:min(52vw,196px)!important;aspect-ratio:566/413!important;height:auto!important;margin:6px auto 2px!important;
  padding:0 9%!important;gap:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;   /* v0.60.197 綠膠囊本體置中(49.4%)＝文字水平垂直置中 */
  color:#215012!important;font-size:18px!important;font-weight:900!important;
  text-shadow:0 1px 1px rgba(255,255,255,.85),0 0 3px rgba(255,255,255,.6)!important;}
#wheelModal .wish-entry .we-txt{font-size:19px!important;}
/* v0.60.195 版面再上移（瀏海允許）＋標題與「一天轉一次」副標間距縮緊 */
#wheelModal .wheel-card{padding-top:max(2px,calc(env(safe-area-inset-top) - 54px))!important;padding-left:0!important;padding-right:0!important;gap:2px!important;align-items:center!important;overflow-x:hidden!important;text-align:center!important;}   /* v0.60.424 拿掉左右 22px 內距＝放大的轉盤(97vw)才能在整個螢幕寬置中，不再偏右 */
#wheelModal .wheel-title{margin:-12px auto -82px!important;}   /* v0.60.197 拉近標題↔副標（原 -54，泡泡字圖下方留白太多）＋縮短整頁 */
#wheelModal .wheel-sub{margin:0 auto 2px!important;}
#wheelModal .wheel-free,#wheelModal .wheel-travelers,#wheelModal .wheel-level{margin:3px auto!important;}   /* v0.60.197 資訊卡間距再收緊，縮短頁面 */
#wheelModal .wheel-wrap{margin:2px auto 0!important;}
#wheelModal .wheel-bonus{color:#2f8a3a;font-weight:800;font-size:.86em;}   /* v0.60.195 採收加碼提示 */
@media (prefers-reduced-motion:reduce){.wheel-pointer,.wheel-hub,.wheel-marquee{animation:none!important}}

/* ═══════════ 🍀 幸運連線＋幸運圖鑑（v0.60.199・玩法⑤）═══════════ */
.wheel-combo{margin:4px auto 2px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.wheel-combo[hidden]{display:none!important;}
.wc-dots{display:flex;gap:6px;}
.wc-dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.55);border:1.5px solid rgba(120,130,90,.4);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);}
.wc-dot.on{background:var(--c,#7ee08a);border-color:rgba(255,255,255,.92);box-shadow:0 0 6px var(--c,#7ee08a),0 1px 2px rgba(0,0,0,.15);}
.wc-hint{margin:0;font-size:12.5px;font-weight:800;color:#4a5b24;text-shadow:0 1px 2px rgba(255,255,255,.85);}
.wc-hint b{color:#e0842c;}
.wc-book-btn{border:0;background:rgba(255,255,255,.72);border-radius:999px;padding:4px 14px;font-size:12.5px;font-weight:800;color:#3a6b2e;cursor:pointer;box-shadow:0 2px 6px rgba(80,120,60,.18);}
.wc-book-btn:active{transform:translateY(1px);}

/* 幸運圖鑑 */
.lucky-book-card{max-width:400px;text-align:center;}
.lb-title{margin:2px 0 2px;font-size:20px;}
.lb-sum{margin:0 0 10px;font-size:14px;color:#6a5327;font-weight:800;}
.lb-sum b{color:#e0842c;font-size:18px;}
.lb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.lb-cell{border:1px solid #eadfc8;border-radius:14px;background:#fff;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font-family:inherit;}
.lb-cell .lb-ic{font-size:34px;line-height:1;height:44px;display:flex;align-items:center;justify-content:center;}
.lb-cell .lb-ic img{width:44px;height:44px;object-fit:contain;}
.lb-cell .lb-nm{font-size:12.5px;font-weight:800;color:#5a4620;}
.lb-cell .lb-hint{font-size:10.5px;color:#8a7a5f;}
.lb-cell.locked{background:#f4efe6;}
.lb-cell.locked .lb-ic{filter:grayscale(1);opacity:.5;}
.lb-cell.locked .lb-nm{color:#b0a690;}
.lb-cell.rr-rare{border-color:#7fc0ff;}
.lb-cell.rr-epic{border-color:#c9a7ff;}
.lb-cell.rr-legend{border-color:#ffcf6a;box-shadow:0 4px 12px rgba(255,180,60,.22);}
.lb-detail{margin-top:12px;background:#fbf7ee;border:1px dashed #eadfc8;border-radius:14px;padding:12px;}
.lb-detail .lbd-ic{font-size:44px;}
.lb-detail .lbd-ic img{width:64px;height:64px;object-fit:contain;}
.lb-detail .lbd-nm{font-weight:900;font-size:16px;color:#5a4620;margin-top:4px;}
.lb-detail .lbd-line{font-size:13px;color:#7a6b4a;margin-top:6px;font-style:italic;}
.lb-loading{color:#8a7a5f;font-size:13px;padding:20px;}

/* ✨ NEW 收藏演出：放大→旋轉→金光→收進收藏冊 */
.lucky-new{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(20,15,30,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.lucky-new.show{display:flex;}
.lucky-new .ln-card{position:relative;width:min(80vw,320px);background:linear-gradient(#fffdf6,#fff2d8);border-radius:22px;padding:22px 20px 18px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden;}
.ln-tag{position:relative;z-index:1;font-size:15px;font-weight:900;color:#e0842c;letter-spacing:1px;margin-bottom:8px;}
.ln-halo{position:absolute;left:50%;top:46%;width:200px;height:200px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,225,140,.9),rgba(255,225,140,0) 70%);opacity:0;z-index:0;}
.ln-icon{position:relative;z-index:1;font-size:76px;line-height:1;height:96px;display:flex;align-items:center;justify-content:center;}
.ln-icon img{width:96px;height:96px;object-fit:contain;}
.ln-name{position:relative;z-index:1;font-size:20px;font-weight:900;color:#5a4620;margin-top:6px;}
.ln-line{position:relative;z-index:1;font-size:13.5px;color:#8a6a32;margin-top:6px;font-style:italic;}
.ln-coins{position:relative;z-index:1;margin-top:8px;font-size:14px;font-weight:900;color:#2f8a3a;}
.ln-coins[hidden]{display:none;}
.ln-ok{position:relative;z-index:1;margin-top:14px;border:0;border-radius:999px;background:linear-gradient(#ffd066,#f2a63a);color:#5a3a10;font-weight:900;font-size:15px;padding:10px 26px;cursor:pointer;box-shadow:0 6px 0 #d6862a;}
.ln-ok:active{transform:translateY(3px);box-shadow:0 3px 0 #d6862a;}
.lucky-new.play .ln-icon{animation:lnPop .7s cubic-bezier(.2,1.4,.4,1), lnSpin 1s .7s ease-in-out;}
.lucky-new.play .ln-halo{animation:lnHalo 1.3s .3s ease-out;}
.lucky-new.play .ln-name,.lucky-new.play .ln-line,.lucky-new.play .ln-coins,.lucky-new.play .ln-ok{animation:lnUp .5s .7s both;}
.lucky-new.rr-legend .ln-card{background:linear-gradient(#fffdf6,#ffe9c8);box-shadow:0 20px 50px rgba(180,120,20,.5),0 0 0 2px #ffcf6a inset;}
@keyframes lnPop{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes lnSpin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes lnHalo{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes lnUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.lucky-new.play .ln-icon,.lucky-new.play .ln-halo,.lucky-new.play .ln-name,.lucky-new.play .ln-line,.lucky-new.play .ln-coins,.lucky-new.play .ln-ok{animation:none!important}}

/* ═══════════ 🎡 全服轉盤次數里程碑（v0.60.200・取代神樹祈願入口）═══════════ */
/* 右側直立長鈕（放活動說明上方、不佔垂直版面） */
/* v0.60.203 換膠囊美術圖 btn_side_count（去背壓縮 17KB）；文字疊上、避開頂部四葉草/星 */
.wheel-side-btn{position:fixed;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:10;border:0;cursor:pointer;
  width:58px;aspect-ratio:180/361;height:auto;padding:14% 0 8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:url("icons/wheel/btn_side_count.webp") center/contain no-repeat;
  color:#fff;font-weight:900;line-height:1.12;text-shadow:0 1px 2px rgba(25,85,35,.75),0 0 2px rgba(25,85,35,.6);
  filter:drop-shadow(0 4px 8px rgba(40,120,60,.35));}
.wheel-side-btn[hidden]{display:none!important;}
.wheel-side-btn:active{transform:translateY(2px) scale(.97);filter:drop-shadow(0 2px 5px rgba(40,120,60,.35));}
.wheel-side-btn .wsb-tx{font-size:14px;}
/* v0.60.208 左側對稱鈕（中獎紀錄）：換粉珊瑚膠囊美術圖 btn_side_feed（去背壓縮 20KB）＝與右側綠鈕左右對稱 */
.wheel-side-btn.left{left:12px;right:auto;background:url("icons/wheel/btn_side_feed.webp") center/contain no-repeat;border-radius:0;box-shadow:none;
  text-shadow:0 1px 2px rgba(150,50,80,.7),0 0 2px rgba(150,50,80,.55);filter:drop-shadow(0 4px 8px rgba(210,90,140,.35));}
.wheel-side-btn.left:active{transform:translateY(2px) scale(.97);box-shadow:none;filter:drop-shadow(0 2px 5px rgba(210,90,140,.35));}
/* 全服中獎紀錄彈窗 */
.feed-card{max-width:440px;text-align:center;}
.wf-h{margin:2px 0 2px;font-size:20px;}
.wf-lead{margin:0 0 10px;font-size:13px;color:#6a5327;}
.wf-list{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;text-align:left;}
.wf-row{display:flex;gap:8px;align-items:baseline;padding:8px 12px;background:#fbf7ee;border:1px solid #eadfc8;border-radius:12px;font-size:13px;color:#5a4620;}
.wf-at{color:#a89878;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wf-txt b{color:#3a6b2e;}
.wf-big{display:inline-block;background:linear-gradient(#ffd066,#f2a63a);color:#5a3a10;font-weight:900;font-size:11px;border-radius:6px;padding:1px 6px;margin-right:4px;}
/* 🎯 自己的中獎紀錄變色好辨識 */
.wf-row.wf-me{background:#fff3de;border-color:#f2c14e;box-shadow:0 0 0 1px #f2c14e inset;}
.wf-row.wf-me .wf-txt b{color:#c98a3a;}
.wf-you{display:inline-block;background:#f2a63a;color:#fff;font-weight:900;font-size:10px;border-radius:6px;padding:1px 6px;margin-right:4px;}
/* 🎉 成就解鎖演出（Phase B） */
.ach-unlock{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(30,20,5,.66);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));}
.ach-unlock.show{opacity:1;}
.ach-unlock .au-box{position:relative;width:300px;max-width:88vw;text-align:center;transform:scale(.5);transition:transform .4s cubic-bezier(.2,1.4,.4,1);}
.ach-unlock.show .au-box{transform:scale(1);}
.au-rays{position:absolute;top:-6px;left:50%;width:240px;height:240px;transform:translateX(-50%);border-radius:50%;opacity:.8;
  background:conic-gradient(from 0deg,rgba(255,214,90,.9),transparent 22deg,rgba(255,214,90,.9) 44deg,transparent 66deg,rgba(255,214,90,.9) 88deg,transparent 110deg,rgba(255,214,90,.9) 132deg,transparent 154deg,rgba(255,214,90,.9) 176deg,transparent 198deg,rgba(255,214,90,.9) 220deg,transparent 242deg,rgba(255,214,90,.9) 264deg,transparent 286deg,rgba(255,214,90,.9) 308deg,transparent 330deg);
  -webkit-mask:radial-gradient(circle,transparent 44px,#000 48px);mask:radial-gradient(circle,transparent 44px,#000 48px);animation:auSpin 8s linear infinite;}
@keyframes auSpin{to{transform:translateX(-50%) rotate(360deg);}}
.au-medal{position:relative;font-size:74px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));animation:auShake .6s ease .1s;}
@keyframes auShake{0%,100%{transform:translate(0,0) rotate(0);}20%{transform:translate(-3px,0) rotate(-5deg);}40%{transform:translate(3px,0) rotate(5deg);}60%{transform:translate(-2px,0) rotate(-3deg);}80%{transform:translate(2px,0) rotate(3deg);}}
.au-lbl{color:#ffe08a;font-size:13px;font-weight:800;letter-spacing:3px;margin-top:8px;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.au-name{color:#fff;font-size:23px;font-weight:900;margin-top:4px;text-shadow:0 2px 8px rgba(0,0,0,.6);}
.au-rzlabel{color:#ffcf6b;font-size:12px;font-weight:800;letter-spacing:1px;margin-top:4px;}
.au-story{color:#f3e7cf;font-size:12.5px;margin-top:8px;line-height:1.5;font-style:italic;}
.au-reward{display:inline-block;margin-top:12px;color:#5a3d00;font-weight:800;font-size:13px;background:linear-gradient(90deg,#ffe08a,#f5b73d);padding:7px 16px;border-radius:20px;}
.au-title{color:#e9d9ff;font-size:12px;font-weight:800;margin-top:9px;}
.au-tap{color:#d8ccb0;font-size:11px;margin-top:14px;}
.au-spark{position:absolute;top:44%;left:50%;width:8px;height:8px;border-radius:50%;pointer-events:none;}
.au-rz-epic .au-medal{filter:drop-shadow(0 0 14px rgba(168,121,255,.85));}
.au-rz-legendary .au-medal{filter:drop-shadow(0 0 16px rgba(245,183,61,.9));}
.au-rz-mythic .au-medal{filter:drop-shadow(0 0 18px rgba(255,120,200,.9));}
.au-rz-mythic .au-name{background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bff9e,#4aa3ff,#a879ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.wf-empty{color:#8a7a5f;font-size:13px;text-align:center;padding:24px;}
/* v0.60.204 有里程碑可領→換金色版＋微光呼吸（比紅點更明顯） */
.wheel-side-btn.has-claim{background-image:url("icons/wheel/btn_side_count_gold.webp");text-shadow:0 1px 2px rgba(150,90,10,.8),0 0 2px rgba(150,90,10,.6);animation:sideGlow 1.5s ease-in-out infinite;}
@keyframes sideGlow{0%,100%{filter:drop-shadow(0 4px 8px rgba(200,150,20,.45))}50%{filter:drop-shadow(0 4px 16px rgba(255,205,50,.9))}}
@media (prefers-reduced-motion:reduce){.wheel-side-btn.has-claim{animation:none}}
.wheel-side-btn .wsb-dot{position:absolute;top:5px;right:5px;width:11px;height:11px;border-radius:50%;background:#e0392c;box-shadow:0 0 0 2px #fff;}
.wheel-side-btn .wsb-dot[hidden]{display:none;}
/* ❓ 活動說明文字加強：改成白底藥丸、深色粗字（原本淺綠字在天空背景看不清） */
.wheel-corner .wc-tx{background:rgba(255,255,255,.94);color:#2f5a0e;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:900;box-shadow:0 2px 6px rgba(80,90,40,.22);}
/* 全服轉盤次數彈窗 */
.spinfest-card{max-width:420px;text-align:center;}
.sf-h{margin:2px 0 4px;font-size:20px;}
.sf-lead{margin:0 0 10px;font-size:13px;color:#6a5327;}.sf-lead b{color:#e0842c;}
.sf-total{font-size:15px;color:#6a5327;font-weight:800;}
.sf-total b{font-size:30px;color:#e0842c;display:inline-block;vertical-align:-2px;}
.sf-bar{height:12px;border-radius:99px;background:#eadfc4;margin:10px auto;max-width:320px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
.sf-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#bff0cb,#7ee08a);transition:width .6s cubic-bezier(.16,.84,.28,1);}
.sf-mine{margin:0 0 12px;font-size:12.5px;color:#5a4620;font-weight:700;}.sf-mine b{color:#e0842c;}
.sf-miles{display:flex;flex-direction:column;gap:8px;text-align:left;}
.sf-mile{border:1px solid #eadfc8;border-radius:14px;padding:10px 14px;background:#fff;}
.sf-mile.reached{border-color:#7ee08a;background:#f4fbf3;}
.sf-mile.can{border-color:#ffcf6a;background:#fffaef;box-shadow:0 2px 8px rgba(255,180,60,.2);}
.sf-mile.claimed{opacity:.72;}
.sfm-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.sfm-th{font-weight:900;font-size:16px;color:#5a4620;}
.sfm-stage{font-size:12px;color:#8a7a5f;font-weight:800;}
.sfm-bot{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.sfm-rw{font-size:13px;color:#3a6b2e;font-weight:800;}
.sfm-claim{border:0;border-radius:999px;background:linear-gradient(#ffd066,#f2a63a);color:#5a3a10;font-weight:900;font-size:13px;padding:6px 16px;cursor:pointer;box-shadow:0 3px 0 #d6862a;}
.sfm-claim:active{transform:translateY(2px);box-shadow:0 1px 0 #d6862a;}
.sfm-badge{font-size:12px;color:#8a7a5f;font-weight:800;}.sfm-badge.done{color:#3a9a53;}
/* 🔒 轉盤頁鎖單螢幕：神樹綠鈕拿掉後空間變多，收緊底部留白＝一頁滿、不再捲到下一頁 */
#wheelModal .wheel-card{padding-bottom:calc(26px + env(safe-area-inset-bottom))!important;}
#wheelModal .wheel-note{margin-top:6px!important;}
/* v0.60.210 ★修：原 .wish-entry{display:none} 被 sky 皮 #wheelModal .wish-entry{display:flex!important}(高優先權) 壓過→綠鈕還在。改同優先權＋放最後＝必勝★ */
#wheelModal .wish-entry, .wish-entry{display:none!important;}   /* 神樹祈願綠鈕前台永久隱藏（後端保留） */

/* v0.60.214 折價券 7 天到期倒數（我的→兌換紀錄） */
.redemption-item .rd-exp{display:block;font-size:12px;font-weight:800;color:#e0842c;margin-top:2px}
.redemption-item .rd-exp.soon{color:#d8503a}
.redemption-item .rd-exp.expired{color:#9a9a9a}
.redemption-item.rd-gone{opacity:.55}
.redemption-item.rd-gone .code{text-decoration:line-through;color:#9a9a9a}

/* 🐔 大獎全服跑馬燈（v0.60.215）：頂部細條、只播大獎、循環滾動 */
.bigwin-marquee{position:fixed;top:0;left:0;right:0;z-index:9996;height:30px;display:flex;align-items:center;gap:6px;
  background:linear-gradient(90deg,#ffd66a,#ffb347);color:#5a3a10;font-weight:800;font-size:13px;
  box-shadow:0 2px 8px rgba(200,140,20,.3);overflow:hidden;padding-left:8px;}
.bigwin-marquee[hidden]{display:none!important;}
.bigwin-marquee .bwm-ic{flex:0 0 auto;font-size:15px;}
.bigwin-marquee .bwm-view{flex:1;overflow:hidden;position:relative;height:100%;}
.bigwin-marquee .bwm-track{position:absolute;left:0;top:0;white-space:nowrap;display:inline-flex;align-items:center;height:100%;will-change:transform;animation:bwmScroll linear infinite;}
.bigwin-marquee .bwm-item{padding:0 30px;}
.bigwin-marquee .bwm-item b{color:#a03a10;}
@keyframes bwmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.bwm-on{padding-top:30px;}
@media (prefers-reduced-motion:reduce){.bigwin-marquee .bwm-track{animation:none}}

/* 🏠 小屋佈置商城（樣品屋）v0.60.250 */
.hz-stage{margin:6px 0 10px}
.hz-room{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#f6d9c4 62%,#e8b98f 62%);box-shadow:inset 0 2px 10px rgba(120,90,60,.12)}
.hz-floor{position:absolute;left:0;right:0;bottom:0;height:38%}
.hz-preview{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);max-width:46%;max-height:70%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(120,90,60,.3))}
.hz-preview.hz-pop{animation:hzPop .35s ease}
@keyframes hzPop{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}60%{transform:translate(-50%,-54%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.hz-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;text-align:center;color:#8a7663;font-size:14px;font-weight:700;line-height:1.6}
.hz-collect{margin:4px 0 8px}
.hz-collect-in{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#5a4636}
.hz-bar{flex:1;height:8px;border-radius:999px;background:#f0e2d4;overflow:hidden}
.hz-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff9db6,#f0a04b)}
.hz-cat{margin:10px 0}
.hz-cat-title{font-size:15px;margin:6px 0}
.hz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.hz-item{background:#fff;border:1px solid #f0e2d4;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.hz-thumb{border:none;background:#fbf5ee;border-radius:12px;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:6px}
.hz-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.hz-thumb:active{transform:scale(.95)}
.hz-info{text-align:center}
.hz-info b{display:block;font-size:13px;color:#5a4636}
.hz-price{font-size:12px;color:#b5622a;font-weight:700}
.hz-acts{display:flex;gap:6px;width:100%}
.hz-acts .btn{flex:1;padding:7px 4px;font-size:13px}
.hz-owned{flex:1;text-align:center;color:#2e7d5a;font-weight:800;font-size:13px;padding:7px 4px}
@media (prefers-reduced-motion:reduce){.hz-preview.hz-pop{animation:none}}

/* 🏠 樣品屋分類頁籤 v0.60.259 */
.hz-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 8px;margin-bottom:4px}
.hz-tabs .hz-tab{flex:0 0 auto;border:1px solid #f0d9c4;background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:#8a6a4a;cursor:pointer;font-family:inherit;white-space:nowrap}
.hz-tabs .hz-tab.on{background:#ff8fb1;color:#fff;border-color:#ff8fb1}
.hz-tabs .hz-tab i{font-style:normal;opacity:.7;font-size:11px;margin-left:2px}
.hz-tabs .hz-tab.on i{opacity:.9}
.hz-cattitle{font-size:13px;font-weight:800;color:#8a6a4a;margin:2px 0 8px}

/* 🏠 樣品屋：篩選＋一鍵免費領取 v0.60.260 */
.hz-claimall{display:block;width:100%;margin:6px 0 2px;border:none;border-radius:999px;background:linear-gradient(90deg,#ffb14e,#ff8f5a);color:#fff;font-weight:800;font-size:14px;padding:9px;cursor:pointer;box-shadow:0 3px 10px rgba(230,140,60,.3)}
.hz-claimall:active{transform:scale(.98)}
.hz-filters{display:flex;gap:6px;margin:2px 0 6px}
.hz-fbtn{border:1px solid #f0d9c4;background:#fff;border-radius:999px;padding:4px 14px;font-size:12.5px;font-weight:700;color:#8a6a4a;cursor:pointer;font-family:inherit}
.hz-fbtn.on{background:#6fc28b;color:#fff;border-color:#6fc28b}

/* 🏠 探索型樣品屋 v0.60.261（首頁：今日推薦/最近/免費/分類卡；點分類才進列表） */
.hz-sec{margin:8px 0 2px}
.hz-sec-h{font-size:14px;font-weight:800;color:#8a6a4a;margin:8px 0 6px}
.hz-row{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.hz-row .hz-item{flex:0 0 138px}
.hz-catgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hz-catcard{display:flex;align-items:center;gap:8px;border:1px solid #f0e2d4;background:#fff;border-radius:14px;padding:12px;cursor:pointer;font-family:inherit;text-align:left}
.hz-catcard .hz-cc-ic{font-weight:800;font-size:14px;color:#5a4636}
.hz-catcard .hz-cc-n{margin-left:auto;font-size:12px;color:#b5622a;font-weight:700}
.hz-catcard .hz-cc-arrow{color:#c3b48f;font-size:18px}
.hz-catcard:active{transform:scale(.98)}
.hz-back{border:none;background:#f0e2d4;color:#5a4636;border-radius:999px;padding:7px 16px;font-weight:800;font-size:14px;cursor:pointer;margin:2px 0 8px}

/* 🏠 樣品屋卡片固定版型 v0.60.263：圖片區固定高、名稱單行、按鈕貼底、卡片等高（不忽高忽低） */
.hz-thumb{aspect-ratio:auto!important;height:104px}
.hz-thumb img{max-width:90%;max-height:90%;object-fit:contain}
.hz-info b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hz-item{min-height:198px}
.hz-acts{margin-top:auto}
.hz-row{align-items:stretch}

/* 🏠 樣品屋卡片固定模板（徹底版）v0.60.265：圖片區固定高、contain、名稱單行、按鈕貼底、所有卡等高 */
.hz-item{display:flex!important;flex-direction:column!important;min-height:214px}
.hz-thumb{aspect-ratio:auto!important;height:120px!important;flex:0 0 120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hz-thumb img{max-width:88%!important;max-height:88%!important;width:auto!important;height:auto!important;object-fit:contain;transition:transform .12s}
.hz-info{flex:0 0 auto}
.hz-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hz-acts{margin-top:auto!important}
.hz-grid{align-items:stretch}
.hz-row{align-items:stretch}
.hz-row .hz-item{height:auto}

/* 🔋 省電：分頁切到背景/待機時（body.pg-hidden 由 app.js 於 visibilitychange 切換），
   暫停所有 @keyframes 動畫＝玩家沒在看就不燒 GPU/電；回到前景自動恢復。
   只暫停動畫、不影響 transition，對玩家完全無感。 */
body.pg-hidden *,
body.pg-hidden *::before,
body.pg-hidden *::after { animation-play-state: paused !important; }