/* 🔒 賣東西要月卡（sellcard.js，第 119 項）：自動賣出頁頂端狀態卡、背包賣出鈕的鎖頭與小卡、掛機中沒賣成的提示條 */

/* 圖示（金幣、鎖頭）的顏色 */
.scd-ic svg, .sc-emb svg, .sc-tic svg, .sc-bl svg { display: block; width: 100%; height: 100%; }
.scd-ic .c1 { fill: #c8902c; stroke: #fff0b4; stroke-width: 1.2; }
.scd-ic .c2 { fill: #f3d48a; stroke: #8a5a14; stroke-width: 1; }
.scd-ic .c3 { fill: #8a5a14; }
.scd-ic .l1, .sc-emb .l1, .sc-tic .l1, .sc-bl .l1 { fill: none; stroke: #d8c49a; stroke-width: 3; stroke-linecap: round; }
.scd-ic .l2, .sc-emb .l2, .sc-tic .l2, .sc-bl .l2 { fill: #8a6424; stroke: #f3d48a; stroke-width: 1.2; }
.scd-ic .l3, .sc-emb .l3, .sc-tic .l3, .sc-bl .l3 { fill: #2a1804; }
.scd-ic .l4, .sc-emb .l4, .sc-tic .l4, .sc-bl .l4 { stroke: #2a1804; stroke-width: 2; stroke-linecap: round; }

/* 金底「開通月卡」（同商城的開通鈕） */
.scd-go { flex: none; padding: 7px 14px; border: 1px solid #ffe9a8; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 900; letter-spacing: 1px; white-space: nowrap;
  background: linear-gradient(180deg, #fff3c4 0%, #f3d48a 28%, #c8902c 70%, #8a5a14 100%); color: #2a1804; box-shadow: 0 0 0 1px #3a2408, 0 1px 4px #000, inset 0 1px 0 rgba(255,255,255,.6); }
.scd-go:active { filter: brightness(1.15); }

/* 1. 自動賣出頁頂端的狀態卡 */
.scd { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #6b5636; border-radius: 8px;
  background: linear-gradient(110deg, rgba(40,32,24,.95), rgba(18,14,10,.95) 60%, rgba(34,27,20,.95)); box-shadow: inset 0 1px 0 rgba(255,220,150,.08), 0 1px 4px #000; }
.scd-ic { flex: none; width: 34px; height: 34px; }
.scd:not(.on) .scd-ic { filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); }
.scd-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scd-tx b { color: #ffe9a8; font-size: 16px; letter-spacing: 1px; }
.scd-tx small { color: #b9ad98; font-size: 13px; line-height: 1.4; }
.scd.on { border-color: #f3d48a; background: linear-gradient(110deg, rgba(74,52,16,.95), rgba(28,20,8,.95) 60%, rgba(62,44,14,.95));
  box-shadow: inset 0 1px 0 rgba(255,220,150,.25), 0 0 10px rgba(242,193,78,.3); }
.scd.on .scd-ic { width: 30px; height: 30px; filter: drop-shadow(0 0 5px rgba(255,190,60,.6)); }
.scd.on .scd-tx b { color: #fff0b4; text-shadow: 0 0 6px rgba(242,193,78,.45); }

/* 2. 背包道具視窗的賣出鈕：沒月卡掛小鎖頭（還是能按，按了跳小卡） */
.lmui-ov .ft button.sc-locked { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: #b9ad98; border-color: #4a3f30; }
.sc-bl { flex: none; display: inline-block; width: 15px; height: 15px; }

/* 2. 隨地賣出被鎖的小卡 */
#sc-lock { z-index: 125; }
#sc-lock .box { max-width: 300px; }
#sc-lock .bd { align-items: center; gap: 4px; padding: 16px 12px 12px; text-align: center; }
.sc-emb { width: 44px; height: 44px; margin-bottom: 4px; filter: drop-shadow(0 0 8px rgba(242,193,78,.35)); }
.sc-tt { color: #ffe9a8; font-size: 18px; letter-spacing: 1px; }
.sc-sub { color: #b9ad98; font-size: 14px; line-height: 1.45; }
#sc-lock .ft button.scd-go { color: #2a1804; border-color: #ffe9a8; background: linear-gradient(180deg, #fff3c4 0%, #f3d48a 28%, #c8902c 70%, #8a5a14 100%); }

/* 3. 掛機中沒賣成的提示條：上方置中、不擋操作（只有自己那條吃點擊），7 秒自己收 */
#sc-tip { position: fixed; left: 0; right: 0; top: calc(var(--orig-bar-h, 0px) + 58px); z-index: 128; display: flex; align-items: center; gap: 8px;
  width: fit-content; max-width: min(520px, calc(100vw - 24px)); margin: 0 auto; box-sizing: border-box; padding: 6px 6px 6px 10px; border: 1px solid #8a6a32; border-radius: 10px;
  background: linear-gradient(110deg, rgba(48,36,20,.96), rgba(20,15,10,.96) 60%, rgba(44,33,18,.96)); box-shadow: inset 0 1px 0 rgba(255,220,150,.15), 0 4px 14px rgba(0,0,0,.7);
  color: #f1e6cf; font-size: 14px; line-height: 1.4; opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .3s; pointer-events: none; }
#sc-tip.on { opacity: 1; transform: none; pointer-events: auto; }
.sc-tic { flex: none; width: 22px; height: 22px; }
.sc-ttx { flex: 1 1 auto; min-width: 0; }
#sc-tip .scd-go { padding: 5px 12px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { #sc-tip { transition: none; } }
.sc-npc { color: #f3d48a; font-weight: 700; white-space: nowrap; }

/* 沒月卡的狀態卡：鎖頭＋兩行字一列，開通鈕整條在下面（手機直式、電腦的 257 寬小視窗都放得下） */
.scd:not(.on) { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 8px; }
.scd:not(.on) .scd-ic { width: 30px; height: 30px; align-self: start; margin-top: 2px; }
.scd:not(.on) .scd-go { grid-column: 1 / -1; width: 100%; }
/* 電腦、手機橫式（body.pcui）：視窗窄，字縮一號 */
body.pcui .scd { padding: 7px 8px; gap: 8px; column-gap: 8px; row-gap: 6px; }
body.pcui .scd-tx b { font-size: 14px; letter-spacing: 0; }
body.pcui .scd-tx small { font-size: 12px; }
body.pcui .scd .scd-ic, body.pcui .scd.on .scd-ic { width: 24px; height: 24px; }
body.pcui .scd:not(.on) { grid-template-columns: 24px 1fr; }
body.pcui .scd-go { padding: 4px 10px; font-size: 14px; }
/* 手機直式窄：提示條字小一點、讓開左上的頭像 */
@media (max-width: 420px) {
  #sc-tip { font-size: 13px; top: calc(var(--orig-bar-h, 0px) + 72px); }
}

/* 2b. 沒月卡按「自動賣出」的小卡：開通月卡一整條在上，取消／移出清單、改成自動刪除並排在下 */
#sc-lock .ft.sc-ft3 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#sc-lock .ft.sc-ft3 .scd-go { grid-column: 1 / -1; }
#sc-lock .ft.sc-ft3 button { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
#sc-lock .ft button.sc-del { border-color: #8a3a2c; background: linear-gradient(#3a1812, #24100c); color: #ffd2c4; }
/* 道具視窗：已在清單裡（自動賣出中／自動刪除中）＝金框＋前面一個小圓點，看得出是開著的 */
.lmui-ov .ft button.sc-ason { border-color: #c9a25a; color: #ffe9a8; background: linear-gradient(#3a2c14, #1c150b); box-shadow: inset 0 0 6px rgba(242,193,78,.25); }
.lmui-ov .ft button.sc-ason::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: middle;
  background: #f3d48a; box-shadow: 0 0 5px rgba(242,193,78,.8); }
/* 自動賣出清單：沒月卡的「賣出」掛鎖、設成賣出的那列字 */
.lmas-mode button.sc-locked { display: inline-flex; align-items: center; gap: 3px; }
.lmas-mode button.sc-locked .sc-bl { width: 12px; height: 12px; }
.lmas-mode button.sc-locked.on { background: #241c12; color: #b9ad98; font-weight: 700; }
.lmas-name small.sc-keep { color: #c9a25a; }
/* 電腦、手機橫式：小卡矮一點（橫式畫面只剩 300 多高，說明那句不能被切掉）；道具視窗四顆鈕排一列時圓點小一點 */
body.pcui #sc-lock .bd { padding: 10px 10px 8px; gap: 2px; }
body.pcui #sc-lock .sc-emb { width: 30px; height: 30px; margin-bottom: 2px; }
body.pcui #sc-lock .sc-tt { font-size: 16px; }
body.pcui #sc-lock .sc-sub { font-size: 13px; }
body.pcui .lmui-ov .ft button.sc-ason::before { width: 5px; height: 5px; margin-right: 3px; }
body.pcui .lmui-ov .ft button.sc-locked, body.pcui .lmui-ov .ft button.sc-ason { white-space: nowrap; padding-left: 2px; padding-right: 2px; gap: 2px; }
body.pcui .lmui-ov .ft button.sc-locked .sc-bl { width: 11px; height: 11px; }

/* 2c. 「改成自動刪除」的確認（同一張卡換內容）：垃圾桶圖示、道具名、返回／確定刪除 */
.sc-trash .t1 { fill: none; stroke: #f0b4a4; stroke-width: 2.2; stroke-linecap: round; }
.sc-trash .t2 { fill: #6a2418; stroke: #f0b4a4; stroke-width: 1.4; stroke-linejoin: round; }
.sc-trash .t3 { stroke: #f0b4a4; stroke-width: 1.8; stroke-linecap: round; }
#sc-lock .sc-sure .sc-emb { filter: drop-shadow(0 0 8px rgba(220,90,60,.4)); }
#sc-lock .sc-sure .sc-tt { color: #ffd2c4; }
.sc-nm { margin: 0 2px; color: #ffe9a8; font-weight: 700; }
.sc-nw { white-space: nowrap; }