/* 手機原生手感（依 Emil Kowalski 的 mobile-native／動畫原則）：最後載入，覆蓋前面的樣式。
 * 共用動畫曲線、輸入框 16px（iPhone 不再自動放大）、關掉點按閃色、按下就有回饋、抽屜滑入滑出。 */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);       /* 進場、回饋：一開始就快 */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* 畫面上的移動 */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* iOS 抽屜 */
}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}

/* iPhone 點到小於 16px 的輸入框會自動放大畫面、而且不會縮回來 */
input,textarea,select{font-size:16px}

/* 點下就觸發（不等「是不是要雙擊放大」） */
button,a,[role=button],label,summary,.btn,.row,.tab,.pill,.pill2,.chip{touch-action:manipulation}

/* 控制項的文字不能長按選取／跳出複製選單（內容文字照樣可以複製） */
button,.btn,[role=button],nav.tabs a,.row,.tab,.pill2,.chip,.tp-m,.tp-amts button,.dm-row,.dm-seg button,.cv-ib,.cv-send,.cv-pic,.icobtn,.rolepill,.offer,.call-b{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* 按下回饋：手指一碰就縮一點點（0.97），放開回來；只動 transform，不卡 */
.btn,.icobtn,.rolepill,.offer,.tp-m,.tp-amts button,.dm-row,.cv-ib,.pill2,.chip{transition:transform 120ms var(--ease-out),background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.btn:active,.icobtn:active,.rolepill:active,.offer:active,.tp-m:active,.tp-amts button:active,.pill2:active,.chip:active,.cv-ib:active{transform:scale(.97)}
.btn.pri:active{transform:scale(.97)}
.row{transition:background-color 120ms ease}.row:active{background:var(--tag)}
.dm-row:active{transform:scale(.985)}
nav.tabs a{transition:transform 120ms var(--ease-out),color 160ms ease}nav.tabs a:active{transform:scale(.94)}
.btn:disabled,.btn[disabled]{transform:none}

/* 切換分頁：常常用到，只留很快的淡入（不往下滑） */
.view.on{animation:viewIn 120ms ease-out}
@keyframes viewIn{from{opacity:.4}to{opacity:1}}

/* 抽屜（彈出視窗）：從底部滑上來、往下滑掉；桌機置中的視窗用輕微放大淡入 */
dialog.sheet[open]{animation:sheetUp 280ms var(--ease-drawer)}
dialog.sheet[open]::backdrop{animation:backdropIn 240ms ease-out}
dialog.sheet.closing{animation:sheetDown 200ms var(--ease-out) forwards}
dialog.sheet.closing::backdrop{animation:backdropOut 200ms ease-out forwards}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes backdropOut{from{opacity:1}to{opacity:0}}
@media(min-width:720px){
  dialog.sheet[open]{animation:sheetPop 220ms var(--ease-out)}
  dialog.sheet.closing{animation:sheetPopOut 160ms var(--ease-out) forwards}
  @keyframes sheetPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
  @keyframes sheetPopOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.96)}}
}
/* 抽屜內容自己捲，捲到底不會帶動後面的頁面 */
dialog.sheet .in{overscroll-behavior:contain}

/* 頂部橫幅（極速派單、誰看過你、新訊息）：0.3 秒內、不回彈 */
.bcast,.visit-card,.nb{transition-timing-function:var(--ease-out)!important;transition-duration:300ms,240ms!important}

/* 禮物計數消失：只動位置與透明度 */
.gcount.out{transition:transform 280ms var(--ease-out),opacity 280ms var(--ease-out)!important}

/* 抽屜上方的把手：可以往下拖關閉（桌機置中的視窗不顯示） */
dialog.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--line);margin:-8px auto 10px;opacity:.9}
dialog.sheet .grab,dialog.sheet .hd{touch-action:none}
@media(min-width:720px){dialog.sheet .grab{display:none}dialog.sheet .hd{touch-action:auto}}

/* 底部提示：從下方浮上來、往下沉回去（同一邊進出） */
.toast{transform:translate(-50%,8px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)!important}
.toast.on{transform:translate(-50%,0)}

/* 紅點數字變多：從 0.6 倍彈出 */
.badge.bump,.dm-seg i.bump{animation:badgeIn 160ms var(--ease-out)}
@keyframes badgeIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* 儲值成功：打勾畫出來 */
.paid-ok{display:grid;justify-items:center;gap:10px;padding:8px 0 4px;text-align:center}
.paid-ok svg{width:76px;height:76px;fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.paid-ok circle{stroke-dasharray:151;stroke-dashoffset:151;animation:drawOk 350ms var(--ease-out) forwards}
.paid-ok path{stroke-dasharray:36;stroke-dashoffset:36;animation:drawOk 300ms var(--ease-out) 220ms forwards}
.paid-ok b{font-size:20px}.paid-bal{color:var(--muted);font-variant-numeric:tabular-nums}.paid-bal span{color:var(--ink);font-weight:900;font-size:18px}
.paid-ok .btn{margin-top:8px}
@keyframes drawOk{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  dialog.sheet[open],dialog.sheet.closing,dialog.sheet[open]::backdrop,dialog.sheet.closing::backdrop,.view.on{animation:none}
  .btn:active,.icobtn:active,nav.tabs a:active,.pill2:active,.chip:active{transform:none}
  .toast,.toast.on{transform:translate(-50%,0)}
  .badge.bump,.dm-seg i.bump{animation:badgeIn 160ms ease-out}
  @keyframes badgeIn{from{opacity:0}to{opacity:1}}
  .paid-ok circle,.paid-ok path{animation:none;stroke-dashoffset:0}
}

/* 頂部寶箱：R幣餘額，點一下儲值（夥伴：收益） */
.chestbtn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 13px 0 6px;border-radius:999px;border:1px solid var(--line);background:var(--c-amber-soft);color:var(--c-amber);font:inherit;font-weight:900;font-size:14.5px;font-variant-numeric:tabular-nums;cursor:pointer;flex:0 0 auto;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform 120ms var(--ease-out),border-color 160ms ease}
.chestbtn img{width:30px;height:30px;object-fit:contain;transform-origin:50% 80%}
.chestbtn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chestbtn:hover{border-color:var(--c-amber)}.chestbtn:hover img{animation:chestWiggle 420ms var(--ease-out)}}
.chestbtn.gain img{animation:chestWiggle 420ms var(--ease-out)}.chestbtn.gain span{animation:badgeIn 220ms var(--ease-out)}
@keyframes chestWiggle{0%,100%{transform:none}30%{transform:rotate(-8deg) scale(1.08)}60%{transform:rotate(6deg) scale(1.04)}}
#chestAmtS{display:none}
/* 手機頂部放不下：登入後拿掉裝飾用的跑跑吉娃娃與深淺色切換（移到「我的 → 外觀」），餘額用縮寫 */
@media(max-width:640px){.chestbtn{height:38px;padding:0 9px 0 4px;font-size:13px;gap:3px}.chestbtn img{width:26px;height:26px}
  #chestAmt{display:none}#chestAmtS{display:inline}
  .bar .in:has(.chestbtn) .mascot,.bar .in:has(.chestbtn) #themeBtn{display:none}}
@media(max-width:400px){#chestAmtS{display:none}.chestbtn{padding:0 5px}}
@media(prefers-reduced-motion:reduce){.chestbtn img,.chestbtn.gain img,.chestbtn.gain span{animation:none!important}}