/* v454 手機版（#ttM）套用整站主題：白紙深藍框＋淡藍內緣、粉色錯位紙頁、粉色主按鈕、寶石步驟編號。
   只換外觀，處理器與資料流程不變。只在 html.ttm-on 生效。 */
html.ttm-on{--ttm-ink:var(--sk-ink,#1C2156);--ttm-soft:var(--sk-mute,#5C6196);--ttm-line:#D3D8F2;--ttm-card:#fff;--ttm-bg:#EEF3FF;--ttm-accent:var(--sk-ink,#1C2156);--ttm-pink:var(--sk-pink,#FF4F8B)}
html.ttm-on #ttM{background:radial-gradient(circle at 12% 8%,#FFE3EF 0,transparent 38%),radial-gradient(circle at 92% 92%,#DDF1FF 0,transparent 40%),linear-gradient(180deg,#F5F8FF,#EEF1FF)!important;color:var(--ttm-ink)}
/* 共用紙卡 */
#ttM .ttm-card,#ttmWallet .ttm-step,#ttmWallet .ttm-done,#ttmWallet .ttm-tx{border:2.5px solid var(--ttm-ink)!important;border-radius:16px!important;background:linear-gradient(170deg,#fff,#F7FAFF 70%,#FAF5FF)!important;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #CFEFFF,6px 6px 0 -1px #FFD6E6,6px 6px 0 1.5px var(--ttm-ink)!important}
#ttM .ttm-card{margin-right:7px}
#ttM .ttm-who small{color:var(--ttm-soft);font-weight:700}
#ttM .ttm-who b{color:var(--ttm-ink);font-weight:900}
#ttM #ttmDoll{background:#EAF2FF!important;border:2px solid var(--ttm-ink);box-sizing:border-box}
#ttM .ttm-coins{border:2px solid var(--ttm-ink)!important;background:#FFF6D6!important;color:var(--ttm-ink)!important;box-shadow:0 3px 0 var(--ttm-ink)}
#ttM .ttm-order{border:2.5px solid var(--ttm-ink)!important;background:linear-gradient(180deg,#FF8DB5,#FF4F8B 60%,#F03C7C)!important;box-shadow:0 4px 0 var(--ttm-ink),inset 0 2px 0 #ffffff80!important;font-weight:900}
#ttM .ttm-help{border:2.5px solid var(--ttm-ink)!important;background:#fff!important;color:var(--ttm-ink)!important;font-weight:700;box-shadow:0 4px 0 var(--ttm-ink)}
/* 下方分頁 */
#ttM .ttm-tabs{background:#fff!important;border-top:2.5px solid var(--ttm-ink)!important;box-shadow:none!important}
#ttM .ttm-tabs button{color:var(--ttm-soft);font-weight:700}
#ttM .ttm-tabs button[aria-selected=true]{color:#fff!important;background:var(--ttm-ink)!important}
/* 儲值：餘額 */
#ttmWallet .ttm-balance{border:2.5px solid var(--ttm-ink)!important;border-radius:16px!important;background:linear-gradient(150deg,#FFF8DC,#FFEFC2)!important;box-shadow:inset 0 0 0 2px #fff,6px 6px 0 -1px #FFD6E6,6px 6px 0 1.5px var(--ttm-ink)!important;margin-right:7px}
#ttmWallet .ttm-balance small,#ttmWallet .ttm-balance span{color:var(--ttm-soft)!important;font-weight:700}
#ttmWallet .ttm-balance b{color:var(--ttm-ink)!important;font-weight:900}
#ttmWallet .ttm-link{color:var(--ttm-ink)!important;font-weight:700}
#ttmWallet .ttm-step,#ttmWallet .ttm-done,#ttmWallet .ttm-tx{margin-right:7px!important;margin-bottom:16px!important}
/* 步驟標題：寶石編號＋粉色螢光底線 */
#ttmWallet .ttm-step h3{font-weight:900;color:var(--ttm-ink)}
#ttmWallet .ttm-step h3 span.hl{padding:0 4px;background:linear-gradient(transparent 58%,#FFD6E6 58%,#FFD6E6 92%,transparent 92%)}
#ttmWallet .ttm-step h3 i{width:26px;height:26px;border-radius:7px!important;transform:rotate(45deg);background:var(--ttm-ink)!important;color:#fff!important}
#ttmWallet .ttm-step h3 i>u{display:block;transform:rotate(-45deg);text-decoration:none}
#ttmWallet .ttm-step.done h3 i{background:var(--ttm-pink)!important}
#ttmWallet .ttm-step.done h3 i>u{font-size:0}
#ttmWallet .ttm-step.done h3 i::after{content:'✓';transform:rotate(-45deg);font-size:13px;position:absolute}
#ttmWallet .ttm-step h3 i{position:relative}
#ttmWallet .ttm-guide{margin:-2px 0 10px;padding:8px 10px;border-radius:10px;background:#EEF6FF;border:1.5px dashed #9FB4E8;font-size:12.5px;line-height:1.55;color:var(--ttm-ink);font-weight:700}
/* 方案卡：看起來是「選一個」而不是「輸入金額」 */
#ttmWallet .ttm-tiers{grid-template-columns:1fr 1fr!important;gap:12px!important}
#ttmWallet .ttm-tiers button{position:relative;min-height:96px!important;padding:12px 12px 10px 40px!important;border:2.5px solid var(--ttm-ink)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 4px 0 var(--ttm-ink)!important;transition:transform .12s,box-shadow .12s}
#ttmWallet .ttm-tiers button::before{content:'';position:absolute;left:12px;top:15px;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ttm-ink);background:#fff;box-sizing:border-box}
#ttmWallet .ttm-tiers button b{color:var(--ttm-ink)!important;font-weight:900}
#ttmWallet .ttm-tiers button b small{color:var(--ttm-soft)}
#ttmWallet .ttm-tiers button span{color:var(--ttm-soft)!important;font-weight:700}
#ttmWallet .ttm-tiers button .pick{margin-top:4px;font-size:12px;font-weight:900;color:var(--ttm-pink)}
#ttmWallet .ttm-tiers button[aria-pressed=true]{background:linear-gradient(170deg,#FFF0F6,#FFE3EE)!important;transform:translateY(2px);box-shadow:0 2px 0 var(--ttm-ink),inset 0 0 0 2px #fff!important}
#ttmWallet .ttm-tiers button[aria-pressed=true]::before{background:var(--ttm-pink) radial-gradient(circle,#fff 0 3px,transparent 3.5px);border-color:var(--ttm-ink)}
#ttmWallet .ttm-tiers button[aria-pressed=true] .pick{color:var(--ttm-ink)}
/* 還沒選方案前，後面的步驟變淡並提示 */
#ttmWallet .ttm-step.locked{opacity:.5;filter:grayscale(.4);pointer-events:none}
#ttmWallet .ttm-step.locked h3::after{content:'先選上面的方案';margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ttm-soft)}
/* 匯款資料 */
#ttmWallet .ttm-bank{border:2px solid #D3D8F2!important;border-radius:12px!important;background:#fff!important}
#ttmWallet .ttm-row{border-bottom:1.5px dashed #D3D8F2!important}
#ttmWallet .ttm-row span{color:var(--ttm-soft)!important;font-weight:700}
#ttmWallet .ttm-row b{color:var(--ttm-ink)!important;font-weight:900}
#ttmWallet .ttm-amt b{color:#F03C7C!important}
#ttmWallet .ttm-copy{border:2px solid var(--ttm-ink)!important;background:#fff!important;color:var(--ttm-ink)!important;font-weight:900!important;box-shadow:0 3px 0 var(--ttm-ink)}
#ttmWallet .ttm-copy.main{background:linear-gradient(180deg,#FF8DB5,#FF4F8B 60%,#F03C7C)!important;color:#fff!important}
#ttmWallet .ttm-copy.ok{background:#3E8E62!important;color:#fff!important}
#ttmWallet label{color:var(--ttm-ink)!important;font-weight:700}
#ttmWallet input:not([type=file]){border:2px solid var(--ttm-ink)!important;border-radius:12px!important}
#ttmWallet input:focus{box-shadow:0 0 0 3px #FFD6E6!important}
#ttmWallet label.ttm-upload{border:2.5px dashed var(--ttm-ink)!important;background:#F5F9FF!important}
#ttmWallet .ttm-up-empty b,#ttmWallet .ttm-up-again{color:var(--ttm-ink)!important}
#ttmWallet .ttm-up-empty b::before{background-color:var(--ttm-pink)!important}
#ttmWallet .ttm-sub{color:var(--ttm-soft)!important}
#ttmWallet .ttm-primary{border:2.5px solid var(--ttm-ink)!important;background:linear-gradient(180deg,#FF8DB5,#FF4F8B 60%,#F03C7C)!important;color:#fff!important;font-weight:900!important;box-shadow:0 4px 0 var(--ttm-ink),inset 0 2px 0 #ffffff80!important;width:calc(100% - 7px)!important}
#ttmWallet .ttm-primary:disabled{background:#C9CDE6!important;color:#fff!important;box-shadow:0 4px 0 #9AA0C8!important;border-color:#9AA0C8!important}
#ttmWallet .ttm-ghost{border:2.5px solid var(--ttm-ink)!important;color:var(--ttm-ink)!important;font-weight:700;box-shadow:0 4px 0 var(--ttm-ink);width:calc(100% - 7px)!important}
#ttmWallet .ttm-done b{color:var(--ttm-ink)!important;font-weight:900}
#ttmWallet .ttm-txr{border-bottom:1.5px dashed #D3D8F2!important}
/* v499 線上付款區與「或用銀行轉帳」分隔 */
#ttmWallet .ttm-paydivider{display:flex;align-items:center;gap:10px;margin:2px 7px 14px 0;font-size:12.5px;font-weight:700;color:var(--ttm-ink)}
#ttmWallet .ttm-paydivider::before,#ttmWallet .ttm-paydivider::after{content:"";flex:1;border-top:2px dashed #9FB4E8}
#ttmWallet .ttm-online .ttm-primary{margin-top:10px}
/* v500 私訊分頁最上面的「冒險者通訊錄」入口 */
html.ttm-on #frM .ttm-staffbook{display:flex!important;align-items:center;gap:12px;width:calc(100% - 7px)!important;margin:2px 7px 16px 0!important;padding:12px 14px!important;border:2.5px solid var(--ttm-ink)!important;border-radius:16px!important;background:linear-gradient(170deg,#fff,#F7FAFF 70%,#FAF5FF)!important;box-shadow:inset 0 0 0 2px #fff,6px 6px 0 -1px #FFD6E6,6px 6px 0 1.5px var(--ttm-ink)!important;color:var(--ttm-ink)!important;font-family:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
html.ttm-on #frM .ttm-staffbook svg{flex:none;width:40px;height:40px;padding:8px;box-sizing:border-box;border-radius:12px;background:var(--ttm-pink);fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.ttm-on #frM .ttm-staffbook span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.ttm-on #frM .ttm-staffbook b{font-size:16px;font-weight:900;color:var(--ttm-ink)}
html.ttm-on #frM .ttm-staffbook small{font-size:12.5px;font-weight:700;color:var(--ttm-soft)}
html.ttm-on #frM .ttm-staffbook i{font-style:normal;font-size:24px;font-weight:900;line-height:1;color:var(--ttm-ink)}
html.ttm-on #frM .ttm-staffbook:active{transform:translate(2px,2px)}

/* v527 手機每日任務卡（掛機收益下面，同一套外框）＋「在大廳說一句話」小視窗 */
#ttmDaily[hidden]{display:none!important}
#ttmDaily{--ink:#1C2156;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;margin-top:8px;padding:7px 10px;color:var(--ink);
 background:linear-gradient(118deg,rgba(255,175,212,.3) 0 7%,transparent 7% 92%,rgba(140,215,248,.28) 92%),linear-gradient(160deg,#fff,#FFF6FA 60%,#F6FAFF);
 border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #FFE3EF,5px 6px 0 -3px #CFEFFF,5px 6px 0 0 var(--ink)}
#ttmDaily .md-ic{display:grid;place-items:center;width:34px;height:34px}
#ttmDaily .md-main{min-width:0;display:grid;gap:5px}
#ttmDaily .md-top{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
#ttmDaily .md-top b{font-size:13px;letter-spacing:.06em}
#ttmDaily .md-top em{font-style:normal;font-size:8px;letter-spacing:.16em;color:#fff;background:var(--ink);padding:1px 6px 1px 5px;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
#ttmDaily .md-top small{margin-left:auto;font-size:11px;font-weight:700;color:#C2366F}
#ttmDaily .md-steps{display:flex;flex-wrap:wrap;gap:6px}
#ttmDaily .md-i{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;border:2px solid #CFC7E4;background:#fff;color:#5C6196;white-space:nowrap}
#ttmDaily .md-i i{font-style:normal;color:#C2366F}
#ttmDaily .md-i.ok{border-color:#9FDBBE;background:#EEFBF4;color:#2E8B5E}
#ttmDaily .md-i.ok i{color:#2E8B5E}
#ttmDaily .md-i:has(button){padding:0;border:0;background:none}
#ttmDaily .md-i button{font:inherit;font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;border:2px solid var(--ink);background:linear-gradient(180deg,#FF7AA8,#FF3F80);color:#fff;box-shadow:0 2px 0 var(--ink);cursor:pointer}
#ttmDaily .md-i button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
#ttmDaily .md-bar{display:block;height:6px;border:2px solid var(--ink);border-radius:99px;background:#F1ECF8;overflow:hidden}
#ttmDaily .md-bar span{display:block;height:100%;background:repeating-linear-gradient(-45deg,#FF8FB8 0 6px,#FF6FA3 6px 12px);transition:width .4s}
#ttmDaily .md-done{font-size:12px;font-weight:700;color:#2E8B5E}
#ttmDaily.done{padding:4px 10px;opacity:.9}
#ttmDaily.done .md-ic{width:24px;height:24px}
#ttmDaily.done .md-ic .nyan{transform:scale(.75)}
#ttmDaily.done .md-top small{color:#2E8B5E}
/* v528 手機上太小、不好按的按鈕：信件的刪除 ×、客服視窗的關閉 */
html.ttm-on #mailBoxM button[title="刪掉這封"]{min-width:40px;min-height:40px;font-size:20px!important;padding:6px!important;display:inline-flex;align-items:center;justify-content:center}
html.ttm-on .support-close{width:44px;height:44px;right:6px!important;top:6px!important;display:flex;align-items:center;justify-content:center}
#ttmSay{position:fixed;inset:0;z-index:12000;display:none;align-items:flex-end;justify-content:center;padding:16px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(28,33,86,.45);backdrop-filter:blur(3px)}
#ttmSay.on{display:flex}
#ttmSay .ms-card{width:100%;max-width:420px;display:grid;gap:10px;padding:14px;color:#1C2156;background:linear-gradient(160deg,#fff,#FFF6FA);border:3px solid #1C2156;border-radius:18px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #FFE3EF,6px 6px 0 -3px #CFEFFF,6px 6px 0 0 #1C2156}
#ttmSay header{display:grid;gap:2px}
#ttmSay header b{font-size:16px}
#ttmSay header small{font-size:12px;color:#5C6196}
#ttmSay .ms-chips{display:flex;flex-wrap:wrap;gap:6px}
#ttmSay .ms-chips button{font:inherit;font-size:13px;padding:5px 11px;border-radius:99px;border:2px solid #1C2156;background:#fff;color:#1C2156;cursor:pointer}
#ttmSay input{font:inherit;font-size:16px;padding:9px 12px;border:2.5px solid #1C2156;border-radius:12px;background:#fff;color:#1C2156;min-width:0}
#ttmSay .ms-acts{display:grid;grid-template-columns:1fr 2fr;gap:8px}
#ttmSay .ms-acts button{font:inherit;font-size:15px;font-weight:700;padding:10px;border-radius:12px;border:2.5px solid #1C2156;cursor:pointer;box-shadow:0 3px 0 #1C2156}
#ttmSay .ms-no{background:#fff;color:#1C2156}
#ttmSay .ms-go{background:linear-gradient(180deg,#FF7AA8,#FF3F80);color:#fff}
#ttmSay .ms-go:disabled{opacity:.6}

/* v528 客人：手機介面擠、東西疊在一起 → 上方變矮，留空間給下面的內容：
   掛機收益拿掉「每小時 22・再 N 小時存滿」那行、每日任務拿掉進度條，兩張卡都變薄；說明字只在高螢幕顯示 */
html.ttm-on #ttmIdle .tt-idle-m{margin:6px 0 0;padding:5px 7px 5px 8px;gap:7px}
html.ttm-on #ttmIdle .tt-idle-ic{width:28px;height:28px}
html.ttm-on #ttmIdle .tt-idle-main{gap:3px}
html.ttm-on #ttmIdle .tt-idle-sub{display:none}
#ttmDaily{margin-top:6px;padding:5px 8px;gap:7px}
#ttmDaily .md-ic{width:28px;height:28px}
#ttmDaily .md-main{gap:4px}
#ttmDaily .md-bar{display:none}
#ttmDaily .md-i button{padding:3px 11px}
@media (max-height:820px){html.ttm-on #ttmNote{display:none}}
@media (max-width:360px){#ttmDaily .md-top em{display:none}}
/* 訂單任務卡「接下來？」只有 11px 高 → 手機上至少 32px 好按；私訊視窗「檢舉或封鎖」也放大 */
html.ttm-on .qc-btn{min-height:32px;padding:4px 12px}
html.ttm-on #dmWarnBtn{min-width:36px;min-height:36px}
/* v532 手機橫放（客人：按鈕擠成一團、互相重疊）：上面四塊原本排成一列硬擠 → 改三欄（闆卡｜掛機｜每日任務），按鈕列另起一行；說明文字橫放時不顯示 */
@media(orientation:landscape) and (max-height:520px){
 html.ttm-on #ttM .ttm-top{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
 html.ttm-on #ttM .ttm-top>*{margin:0!important;min-width:0;max-width:none!important}
 html.ttm-on #ttM .ttm-top>.ttm-actions{grid-column:1/-1}
 html.ttm-on #ttM .ttm-actions>*{flex:1;min-height:38px!important}
 html.ttm-on #ttM #ttmNote{display:none!important}
 html.ttm-on #ttM .ttm-card{gap:8px}
 html.ttm-on #ttM .ttm-coins{flex-wrap:wrap;justify-content:center;row-gap:0}
 html.ttm-on #ttmIdle .tt-idle-h i,html.ttm-on #ttmIdle .tt-idle-em2{display:none}
}
/* v532 直立時上面三張卡固定占掉半個畫面 → 掛機收益、每日任務只在第一頁（訂單）顯示；私訊、儲值、信箱上面只留闆卡，內容區大一倍 */
html.ttm-on:not([data-ttm-tab=orders]) #ttM #ttmIdle,html.ttm-on:not([data-ttm-tab=orders]) #ttM #ttmDaily{display:none!important}
@media(orientation:landscape) and (max-height:520px){html.ttm-on:not([data-ttm-tab=orders]) #ttM .ttm-top{grid-template-columns:minmax(0,1fr)}}
/* v532 手機橫放的結帳視窗：大標題占掉大半畫面、要填的內容只露一行 → 標題縮成一條、拿掉大字浮水印，視窗貼滿 */
@media(orientation:landscape) and (max-height:520px){
 html.ttm-on .tt-order-flow{padding:6px!important}
 html.ttm-on .tt-order-flow .shopCard{max-height:calc(100dvh - 12px)!important}
 html.ttm-on .tt-order-flow .of-heading{padding:8px 60px 8px 16px!important;min-height:0!important}
 html.ttm-on .tt-order-flow .of-heading h2{font-size:18px!important;margin:2px 0 0!important;padding:3px 12px!important}
 html.ttm-on .tt-order-flow .of-heading small{font-size:10px!important}
 html.ttm-on .tt-order-flow .of-ghost{display:none!important}
 html.ttm-on .tt-order-flow .of-track{padding-top:4px!important;padding-bottom:4px!important;min-height:0!important}
}