/* 🛒 商城＋月卡範本（js/shop.js）：入口鈕是右側直排的方框鈕（樣式在 lmui.css 檔尾「右側直排方框鈕」，位置 js/rcol.js 排）；視窗沿用 3.5 視窗外框（.lmui-ov，見 lmui.css「3.5 視窗外框」）＋分頁（.tabs）。
   金色 #f3d48a、亮金 #ffe9a8、深金 #b7791f、暗底 #120d08（同 market.css） */

/* ── 視窗 ── */
.sh-ov .box { max-width: 560px; container-type: inline-size; }
.sh-ov .hd { padding-bottom: 2px; }   /* 不要 position: relative：關閉鈕要對整個框定位（外框右上角，同交易所、信箱；站長 2026-10-23） */
.sh-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sh-title::before, .sh-title::after { content: ""; flex: 0 1 48px; min-width: 10px; height: 2px; background: linear-gradient(90deg, rgba(242,193,78,0), #f2c14e); }
.sh-title::after { transform: scaleX(-1); }
.sh-title > span { white-space: nowrap; font: 900 21px/1.2 "Microsoft JhengHei", "PingFang TC", serif; letter-spacing: 6px; padding-left: 6px;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe38f 40%, #d99a26 72%, #fff0b4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px rgba(255,190,60,.5)); }
/* 商城幣餘額：分頁那排最右邊 */
.sh-bal { flex: none; align-self: center; margin-left: 2px; display: flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid #6b5636; border-radius: 10px;
  background: rgba(0,0,0,.45); color: #ffe9a8; font: 700 13px/1.4 sans-serif; font-variant-numeric: tabular-nums; }
.sh-coin { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #ffe1f0 25%, #c88cff 60%, #6a2fa8 95%);
  box-shadow: 0 0 0 1px #2a1240, 0 0 4px rgba(200,140,255,.55); }   /* 商城幣：紫寶石色，跟金幣（金色）分得開 */

/* 月卡區 */
.sh-cardwrap { flex: none; padding: 6px 8px 2px; }
.sh-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #8a6a32; border-radius: 8px;
  background: linear-gradient(110deg, rgba(60,40,14,.9), rgba(20,14,8,.92) 60%, rgba(50,34,12,.9)); box-shadow: inset 0 1px 0 rgba(255,220,150,.15), 0 1px 4px #000; }
.sh-card.on { border-color: #f3d48a; box-shadow: inset 0 1px 0 rgba(255,220,150,.25), 0 0 12px rgba(242,193,78,.35); }
.sh-card.pulse { animation: shPulse .9s ease-out 2; }
@keyframes shPulse { 0% { box-shadow: 0 0 0 0 rgba(255,215,110,.9); } 100% { box-shadow: 0 0 0 10px rgba(255,215,110,0); } }
.sh-cemb { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 0 6px rgba(255,190,60,.55)); }
.sh-cemb svg { width: 100%; height: 100%; }
.sh-cemb .f { fill: #f2c14e; stroke: #fff0b4; stroke-width: 1; } .sh-cemb .d { fill: #5a3a08; }
.sh-card:not(.on) .sh-cemb { filter: grayscale(.7) brightness(.8); }
.sh-cinfo { flex: 1 1 auto; min-width: 0; }
.sh-chd b { white-space: nowrap; } .sh-cst { white-space: nowrap; }
.sh-chd { display: flex; align-items: baseline; gap: 8px; }
.sh-chd b { color: #ffe9a8; font-size: 16px; letter-spacing: 2px; }
.sh-cst { padding: 0 7px; border-radius: 9px; background: #3a3128; color: #b9ad98; font-size: 12px; font-weight: 700; line-height: 18px; }
.sh-cst.ok { background: linear-gradient(180deg, #4a7a2a, #2a4a14); color: #e4ffd0; }
.sh-perks { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 3px 0 0; padding: 0; list-style: none; color: #e9d9b0; font-size: 13px; }
.sh-perks li::before { content: "✓"; margin-right: 3px; color: #f2c14e; font-weight: 900; }
.sh-card:not(.on) .sh-perks li { color: #a8997a; } .sh-card:not(.on) .sh-perks li::before { color: #6b5f4a; }
/* 開通鈕（也用在交易所的「去開通」）：金底 */
.sh-cbuy { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border: 1px solid #ffe9a8; border-radius: 8px; cursor: pointer; font-family: inherit;
  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); }
.sh-cbuy b { font-size: 15px; font-weight: 900; letter-spacing: 1px; }
.sh-cbuy small { font-size: 11px; font-weight: 700; color: #4a2c08; }
.sh-cbuy:active { filter: brightness(1.15); }

/* 商品 */
.sh-ov .tabs { padding-top: 6px; }
.sh-ov .bd { padding: 6px 8px 8px; border: 1px solid #5a4630; border-top-color: #b7791f; margin: 0 8px 8px; background: rgba(10,7,4,.55); }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.sh-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #4a3f30; border-radius: 6px; background: linear-gradient(180deg, #1f1912, #14100b); }
.sh-ic { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #6b5636; border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, #3a2e1e, #0b0806 80%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.7); }
.sh-ic svg { width: 30px; height: 30px; }
.sh-ic .f { fill: #c8902c; stroke: #ffe9a8; stroke-width: 1; stroke-linejoin: round; }
.sh-ic .s { fill: none; stroke: #f2c14e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-ic .d { fill: #2a1804; stroke: #ffe9a8; stroke-width: 1; }
.sh-ic .t { fill: #ffe38f; font: 900 10px sans-serif; }
.sh-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.sh-nm { max-width: 100%; color: #fff3d6; font-size: 14px; line-height: 1.3; }
.sh-desc { color: #a8997a; font-size: 12px; line-height: 1.3; }
.sh-tag { padding: 0 6px; border: 1px solid #3d6a8a; border-radius: 8px; color: #b8e0ff; font: normal 700 11px/16px sans-serif; background: rgba(30,60,90,.45); }
.sh-tag.look { border-color: #7a4a9a; color: #ecd0ff; background: rgba(80,40,110,.45); }
.sh-tag.alt { border-color: #8a7a3a; color: #fff0b4; background: rgba(90,80,30,.45); }
.sh-buy { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sh-pr { display: flex; align-items: center; gap: 4px; color: #ffe9a8; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-go { min-width: 72px; padding: 5px 8px; border: 1px solid #b7791f; border-radius: 6px; background: linear-gradient(180deg, #4a3518, #241a0c); color: #ffe9a8;
  font: 700 13px/1.2 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; }
.sh-go.need { border-color: #5a4630; background: #1a1612; color: #8d8574; }
.sh-go:active { filter: brightness(1.25); }

/* 交易所「需要月卡」 */
.sh-gate .box { max-width: 420px; height: auto; max-height: 100%; }
.sh-gate .bd { margin: 8px; }
.sh-lock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px 18px; text-align: center; }
.sh-lock svg { width: 56px; height: 56px; filter: drop-shadow(0 0 8px rgba(255,190,60,.45)); }
.sh-lock svg .f { fill: #c8902c; stroke: #ffe9a8; stroke-width: 1; } .sh-lock svg .s { fill: none; stroke: #f2c14e; stroke-width: 3; stroke-linecap: round; } .sh-lock svg .d { fill: #2a1804; }
.sh-lock > b { color: #ffe9a8; font-size: 18px; letter-spacing: 2px; }
.sh-lock > span { color: #b9ad98; font-size: 14px; }
.sh-lock .sh-cbuy { margin-top: 6px; padding: 8px 28px; }

/* 偷窺卡試看：對方的裝備欄（格子沿用 lmui.css 的 .ld2-*／.ld-cell；外框、格子大小照 #lmui-doll） */
.sh-go.try { border-color: #3d6a8a; background: linear-gradient(180deg, #1e3a52, #0f1e2c); color: #cfe8ff; }
.sh-peek .box { max-width: 444px; }
.sh-peek .bd { margin: 8px; padding: 0; border: 0; background: none; }
.sh-doll { --ld-c: clamp(32px, min(calc((min(calc(var(--vw1, 1vw) * 100), 444px) - 190px) / 4), calc((calc(var(--dvh1, 1dvh) * 100) - 330px) / 8)), 52px); flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: radial-gradient(ellipse at 50% 35%, #2a2520, #0f0c09 75%); border: 1px solid #6b5636; border-radius: 6px; box-shadow: inset 0 0 18px #000; color: #e9dcc0; }
body.pcui .sh-doll { --ld-c: clamp(32px, calc((var(--pc-ww) - 190px) / 4), 52px); }
.sh-peek .sh-title > span { font-size: 18px; letter-spacing: 2px; padding-left: 0; }
.sh-peek .sh-title::before, .sh-peek .sh-title::after { display: none; }   /* 標題比較長（名字＋的裝備）：拿掉兩邊金線，免得壓到關閉鈕 */
body.pcui .sh-peek .sh-title > span { font-size: 15px; letter-spacing: 1px; }
/* 中間：職業徽章淡淡墊底，點到的那件（部位＋強化＋名字）寫在上面 */
.sh-doll .ld2-mid { justify-content: flex-start; align-items: stretch; }
.sh-dlogo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; max-width: 110px; opacity: .22; pointer-events: none; filter: brightness(1.6) drop-shadow(0 0 8px rgba(255,200,120,.5)); }
.sh-doll .ld-cell.sh-sel { border-color: #ffe9a8; box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #f2c14e, 0 0 10px rgba(255,210,110,.8); }
.sh-dsel { position: relative; min-height: 40px; padding: 3px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #4a3c29; border-radius: 4px; background: rgba(0,0,0,.5); }
.sh-dsel small { color: #a8997a; font-size: 12px; }
.sh-dsel b { color: #ffe9a8; font-size: 15px; line-height: 1.25; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }

/* 窄的視窗（手機直式、電腦版面左邊那欄）：月卡鈕排到下面、整條寬 */
@container (max-width: 480px) {
  .sh-card { flex-wrap: wrap; }
  .sh-cbuy { flex-direction: row; gap: 8px; align-items: baseline; justify-content: center; width: 100%; padding: 6px 10px; }
  .sh-bal { padding: 1px 6px; font-size: 12px; }
}
/* 矮的畫面（手機橫式）：月卡區壓扁一點 */
@media (max-height: 500px) {
  .sh-cardwrap { padding: 4px 8px 0; }
  .sh-card { padding: 5px 8px; gap: 8px; }
  .sh-cemb { display: none; }
  .sh-card { flex-wrap: nowrap; }
  .sh-perks { font-size: 12px; margin-top: 1px; }
  .sh-cbuy, .sh-card .sh-cbuy { width: auto; flex-direction: column; gap: 0; padding: 3px 10px; }
  .sh-cbuy b { font-size: 14px; }
  .sh-ov .tabs { padding-top: 4px; }
  .sh-ov .tabs button { padding: 5px; }
  .sh-it { padding: 4px 6px; }
  .sh-lock { padding: 4px 12px 6px; gap: 2px; }
  .sh-lock svg { width: 28px; height: 28px; }
  .sh-lock > b { font-size: 16px; }
  .sh-lock .sh-cbuy { margin-top: 4px; padding: 4px 24px; }
  .sh-gate .bd { margin: 4px 8px 6px; padding: 4px; }
  .sh-doll, body.pcui .sh-doll { --ld-c: 34px; }
  .sh-dsel { min-height: 32px; }
  .sh-peek .sh-title > span { font-size: 16px; letter-spacing: 1px; }
}

/* 第 119 項（月卡）：到期日接在剩幾天後面 */
.sh-chd { flex-wrap: wrap; row-gap: 0; }
.sh-cexp { color: #c9b98f; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 新手任務條開著（tutorial.js 加 body.tut-bar-on）＝新手期間：不顯示商城鈕（站長 2026-10-23「新手期間不顯示商城」；rcol.js 會跳過 display:none 的鈕） */
body.tut-bar-on #shop-btn { display: none !important; }
.sh-cbuy .sh-cpr { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 3px; font-size: 12px; font-weight: 700; color: #3a2208; }

/* 商城藍鑽購買（伺服器第 222 項）：標題旁藍鑽餘額、持有標籤、使用鈕、購買／使用的小對話框 */
#shop-window .sh-bal { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: #f2d77f; font-size: 15px; }
#shop-window .sh-own { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-style: normal; font-size: 12px; color: #1c1306; background: linear-gradient(#f2d77f, #b8913f); }
#shop-window .sh-go.use { border-color: #8fd18b; color: #d9ffd6; background: linear-gradient(#2f5a2a, #183515); }
.sh-ask { z-index: 2147483100; }
.sh-ask .box { height: auto !important; max-width: 340px; margin: auto; }
.sh-ask .bd { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
.sh-ask p { margin: 0; color: #e8dcc0; font-size: 15px; line-height: 1.6; text-align: center; }
.sh-ask .sh-in { height: 40px; padding: 0 10px; border: 1px solid #7d6c4c; border-radius: 6px; background: #0c0a07; color: #f2ead6; font: inherit; font-size: 16px; outline: none; }
.sh-ask .sh-in:focus { border-color: #e2bd6b; }
.sh-askbtn { display: flex; gap: 10px; }
.sh-askbtn button { flex: 1; height: 40px; border-radius: 6px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; border: 1px solid #6b5636; background: linear-gradient(#2a2117, #17110b); color: #d8c8a2; }
.sh-askbtn button.ok { border-color: #e2bd6b; background: linear-gradient(#d8ae54, #8a6424); color: #1c1306; }

/* 藍鑽圖示換成站長給的鑽石圖（2026-10-25，icons/diamond.png 去背裁好）：取代原本的紫色小圓點 */
.sh-coin { width: 16px; height: 16px; border-radius: 0; background: url(/icons/diamond.png) center / contain no-repeat; box-shadow: none; border: 0; filter: drop-shadow(0 0 2px rgba(150,190,255,.6)); }
#shop-window .sh-bal .sh-coin { width: 20px; height: 20px; }
.sh-ask p .sh-coin { width: 18px; height: 18px; vertical-align: -3px; }

/* 偷窺卡的裝備格放大（站長 2026-10-25「偷窺的欄位太小了」）：這個畫面沒有能力值，直的空間都給格子 */
.sh-peek .sh-doll { --ld-c: clamp(40px, min(calc((min(calc(var(--vw1, 1vw) * 100), 444px) - 150px) / 4), calc((calc(var(--dvh1, 1dvh) * 100) - 260px) / 8)), 62px); }
:is(html.stage43 body, body.pcui-sm).pcui .sh-peek .sh-doll { --ld-c: 50px; }
.sh-peek .sh-doll .ld2-col { gap: 3px; }
#shop-window .sh-go.off { filter: grayscale(.8) brightness(.7); }

/* 第 238 項：已擁有／已買滿、偷窺卡張數 */
#shop-window .sh-go.done { border-color: #5a4630; background: #1a1612; color: #9b8e70; cursor: default; }
.sh-ask .sh-qty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; }
.sh-ask .sh-qty button { width: 38px; height: 38px; border-radius: 6px; border: 1px solid #b7791f; background: linear-gradient(180deg, #4a3518, #241a0c); color: #ffe9a8; font-size: 18px; cursor: pointer; }
.sh-ask .sh-qty .sh-in { width: 80px; margin: 0; text-align: center; }
.sh-ask .sh-qtot { text-align: center; margin: 4px 0 10px; }

/* ── 第 283 項（站長 2026-10-26「商城介面在優化一下」→「天堂M 風」）：左邊直排分類、右邊商品格子；標題列藍鑽餘額＋儲值 ── */
.sh-ov .box { max-width: 640px; }
.sh-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 6px; margin: 4px 8px 8px; }
.sh-main > .bd { flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px; border-radius: 6px; overflow-y: auto; }
.sh-nav { flex: 0 0 64px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.sh-nav::-webkit-scrollbar { display: none; }
.sh-nav button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; border: 1px solid #4a3f30; border-radius: 6px;
  background: linear-gradient(180deg, #2a2118, #15100b); color: #b9ad98; font: 700 12.5px/1.1 "Microsoft JhengHei", "PingFang TC", sans-serif; cursor: pointer; }
.sh-nav button svg { width: 24px; height: 24px; }
.sh-nav button svg .f { fill: #6b5636; stroke: #b9ad98; stroke-width: 1; stroke-linejoin: round; }
.sh-nav button svg .s { fill: none; stroke: #b9ad98; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-nav button svg .d { fill: #1a140d; stroke: #b9ad98; stroke-width: 1; }
.sh-nav button svg .t { fill: #b9ad98; font: 900 10px sans-serif; }
.sh-nav button.on { border-color: #f3d48a; background: linear-gradient(180deg, #6b5222, #2e2210); color: #fff3d6; box-shadow: 0 0 8px rgba(242,193,78,.4), inset 0 1px 0 rgba(255,230,160,.25); }
.sh-nav button.on svg .f { fill: #c8902c; stroke: #ffe9a8; } .sh-nav button.on svg .s { stroke: #f2c14e; } .sh-nav button.on svg .d { fill: #2a1804; stroke: #ffe9a8; }
.sh-nav button.pay { border-color: #3d6a8a; } .sh-nav button.pay.on { border-color: #8fd0ff; background: linear-gradient(180deg, #1e4a6a, #0f2232); }
/* 商品格子：大圖示、名字、說明、標籤，最下面價格鈕 */
.sh-grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.sh-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 7px; border: 1px solid #5a4630; border-radius: 8px; text-align: center;
  background: radial-gradient(ellipse at 50% 18%, rgba(242,193,78,.14), transparent 60%), linear-gradient(180deg, #221a12, #120d08); box-shadow: inset 0 1px 0 rgba(255,230,160,.08); }
.sh-cell .sh-ic { width: 54px; height: 54px; border-color: #8a6a32; border-radius: 10px; }
.sh-cell .sh-ic svg { width: 40px; height: 40px; }
.sh-cell .sh-nm { font-size: 14px; font-weight: 700; }
.sh-cell .sh-desc { flex: 1 1 auto; font-size: 11.5px; }
.sh-cell .sh-own { position: absolute; top: 4px; right: 4px; padding: 0 5px; border-radius: 6px; background: rgba(40,90,40,.85); color: #d6ffc8; font: normal 700 10.5px/16px sans-serif; }
.sh-pbtn { align-self: stretch; margin-top: 3px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border: 1px solid #d9a441; border-radius: 6px;
  background: linear-gradient(180deg, #f2c14e, #b7791f); color: #2a1804; font: 900 14px/1.1 inherit; font-family: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.sh-pbtn.off { filter: grayscale(.55) brightness(.75); }
.sh-pbtn.done { border-color: #5a4630; background: #1a1612; color: #8d8574; }
.sh-pbtn.cash { border-color: #8fd0ff; background: linear-gradient(180deg, #5cb2ff, #2563a8); color: #fff; }
.sh-pbtn:active { filter: brightness(1.15); }
.sh-mini { padding: 2px 10px; border: 1px solid #3d6a8a; border-radius: 10px; background: linear-gradient(180deg, #1e3a52, #0f1e2c); color: #cfe8ff; font: 700 11.5px/1.4 inherit; font-family: inherit; cursor: pointer; }
.sh-mini.use { border-color: #4a7a2a; background: linear-gradient(180deg, #2f5a1c, #17300c); color: #e4ffd0; }
/* 儲值方案 */
.sh-gem { display: inline-flex; width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(120,190,255,.55)); }
.sh-gem.sm { width: 16px; height: 16px; filter: none; }
.sh-gem svg { width: 100%; height: 100%; }
.sh-gem svg .f { fill: #5cb2ff; stroke: #e0f2ff; stroke-width: 1; stroke-linejoin: round; } .sh-gem svg .s { fill: none; stroke: #e0f2ff; stroke-width: 1.2; stroke-linejoin: round; }
.sh-pk { border-color: #3d6a8a; background: radial-gradient(ellipse at 50% 22%, rgba(92,178,255,.18), transparent 62%), linear-gradient(180deg, #14202c, #0b1118); }
.sh-pkn { color: #e0f2ff; font: 900 22px/1.1 Arial, sans-serif; text-shadow: 0 0 8px rgba(92,178,255,.6); }
.sh-bonus { position: absolute; top: 5px; left: 5px; padding: 0 6px; border-radius: 6px; background: linear-gradient(180deg, #ff6a4d, #c2321a); color: #fff; font: normal 900 11px/17px sans-serif; }
.sh-paynote { margin: 8px 2px 0; color: #a8997a; font-size: 12px; text-align: center; }
.sh-paygo { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* 標題列：藍鑽餘額＋儲值 */
.sh-bal { gap: 5px; padding: 2px 3px 2px 8px; }
.sh-topup { margin-left: 2px; padding: 1px 9px; border: 1px solid #8fd0ff; border-radius: 9px; background: linear-gradient(180deg, #5cb2ff, #2563a8); color: #fff; font: 900 12px/1.5 inherit; font-family: inherit; cursor: pointer; }
.sh-main .sh-cardwrap { padding: 0; }
/* 手機兩欄、卡片收緊；月卡撐滿；前往付款（連結）同確定鈕 */
.sh-grid3 { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.sh-cell { padding: 8px 5px 6px; }
.sh-cell .sh-ic { width: 46px; height: 46px; } .sh-cell .sh-ic svg { width: 34px; height: 34px; }
/* 第 410 項：借遊戲道具圖的商品（魔法娃娃的盒子）；右下角「×11」 */
.sh-icimg { position: relative; }
.sh-icimg img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.sh-cell .sh-icimg img { width: 40px; height: 40px; }
.sh-icn { position: absolute; right: 2px; bottom: 0; color: #fff3d6; font: normal 900 11px/14px sans-serif; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; }
.sh-cell .sh-nm { font-size: 13.5px; } .sh-cell .sh-desc { font-size: 11px; }
.sh-pk .sh-gem { width: 38px; height: 38px; } .sh-pkn { font-size: 20px; }
.sh-main .sh-cardwrap .sh-card { flex-wrap: wrap; } .sh-main .sh-cardwrap .sh-cbuy { flex: 1 1 100%; }
.sh-askbtn a.ok { flex: 1; height: 40px; border-radius: 6px; font-weight: 700; font-size: 15px; border: 1px solid #e2bd6b; background: linear-gradient(#d8ae54, #8a6424); color: #1c1306; }
@container (min-width: 520px) { .sh-grid3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* 標題列不擠：拿掉標題兩邊的金線、餘額靠右；加送標籤不壓到藍鑽 */
.sh-ov .sh-title::before, .sh-ov .sh-title::after { display: none; }
.sh-ov .sh-title > span { font-size: 18px; letter-spacing: 3px; padding-left: 2px; }
.sh-ov .hd .sh-bal { margin-left: auto; margin-right: 6px; }
.sh-pk { padding-top: 20px; }
.sh-bonus { top: 3px; left: 3px; font-size: 10.5px; line-height: 15px; }
/* 第 291 項：儲值開單表單 */
.sh-payf .box { max-width: 360px; }
.sh-payf .bd { display: flex; flex-direction: column; gap: 10px; }
.sh-f { display: flex; flex-direction: column; gap: 4px; }
.sh-f > span { color: #c9b58a; font-size: 13px; font-weight: 700; }
.sh-f .sh-in { width: 100%; box-sizing: border-box; }
.sh-f .sh-in[readonly] { color: #8d8574; background: #120d08; }
.sh-f select.sh-in { height: 38px; color: #ffe9a8; background: #1a140d; border: 1px solid #6b5636; border-radius: 6px; font: inherit; font-size: 15px; padding: 0 8px; }
.sh-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sh-ways button:disabled { opacity: .4; cursor: not-allowed; }
.sh-via { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #d8c8a2; font-size: 14px; }
.sh-via[hidden] { display: none; }
.sh-via span { flex: 1 1 auto; }
.sh-via button { flex: none; min-width: 56px; height: 32px; border: 1px solid #5a4630; border-radius: 6px; background: linear-gradient(#2a2117, #17110b); color: #d8c8a2; font: inherit; font-weight: 700; cursor: pointer; }
.sh-via button.on { border-color: #8fd0ff; background: linear-gradient(#2563a8, #143a64); color: #fff; }
.sh-ways button { height: 36px; border: 1px solid #5a4630; border-radius: 6px; background: linear-gradient(#2a2117, #17110b); color: #d8c8a2; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.sh-ways button.on { border-color: #8fd0ff; background: linear-gradient(#2563a8, #143a64); color: #fff; box-shadow: 0 0 8px rgba(92,178,255,.45); }
/* 站長 2026-10-29「驗證碼打不到」：視窗窄時輸入框被擠到幾乎沒寬度、跑出框外 → 放不下就換到下一行，至少 110px */
.sh-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sh-cap img { flex: none; width: 120px; height: 40px; border: 1px solid #5a4630; border-radius: 4px; background: #1a140d; }
.sh-cap button { flex: none; width: 36px; height: 36px; border: 1px solid #5a4630; border-radius: 6px; background: #1a140d; color: #f3d48a; font-size: 18px; cursor: pointer; }
.sh-cap .sh-in { flex: 1 1 110px; width: auto; min-width: 110px; letter-spacing: 4px; text-align: center; }
/* iPhone Safari：祖先 user-select:none 會讓輸入框打不了字 */
.sh-in { -webkit-user-select: text; user-select: text; }
.sh-pferr { margin: 0; color: #ff8a7a; font-size: 13px; text-align: center; }
.sh-waynote { color: #a8997a; font-size: 12px; }
/* ATM、超商不能用的理由（站長 2026-10-29「這個不夠明顯 想說灰灰的」）：亮黃、底框、鎖頭 */
.sh-waynote[data-waynote] { display: block; margin-top: 8px; padding: 8px 10px 8px 30px; position: relative; color: #ffd36b; font-size: 14px; font-weight: 700; line-height: 1.4; background: rgba(255,190,60,.12); border: 1px solid rgba(255,200,90,.55); border-radius: 6px; }
.sh-waynote[data-waynote][hidden] { display: none; }
.sh-waynote[data-waynote]::before { content: "🔒"; position: absolute; left: 9px; top: 7px; font-size: 14px; }
.sh-ways button[data-way="TWQR"] { grid-column: 1 / -1; }
/* 第 461 項：綠界幕後取號——繳費資訊視窗、商城「儲值」上方的待繳費 */
.sh-codew .box { max-width: 360px; }
.sh-crow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #4a3a26; border-radius: 6px; background: #120d08; }
.sh-crow > span { flex: none; width: 58px; color: #c9b58a; font-size: 13px; font-weight: 700; }
.sh-crow > b { flex: 1 1 auto; min-width: 0; color: #ffe9a8; font: 700 16px/1.3 Consolas, "Courier New", monospace; letter-spacing: 0; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.sh-crow > b small { margin-left: 6px; color: #a8997a; font: 12px/1 "Microsoft JhengHei", sans-serif; letter-spacing: 0; }
.sh-crow > button { flex: none; height: 30px; padding: 0 10px; border: 1px solid #8fd0ff; border-radius: 6px; background: linear-gradient(#2563a8, #143a64); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sh-ask p.sh-cnote { color: #a8997a; font-size: 12.5px; line-height: 1.5; text-align: left; }
.sh-askbtn a.sh-cbar { flex: 1; height: 40px; border-radius: 6px; border: 1px solid #5a4630; background: linear-gradient(#2a2117, #17110b); color: #d8c8a2; font-weight: 700; font-size: 15px; }
.sh-pend { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #b7791f; border-radius: 8px; background: linear-gradient(180deg, #2c2010, #17110a); }
.sh-pend > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-pend b { color: #ffcf6b; font-size: 14px; }
.sh-pend span { color: #e8dcc0; font-size: 12.5px; }
.sh-pend .sh-pbtn { flex: none; width: auto; padding: 0 14px; }
.sh-pendbtn { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border: 1px solid #b7791f; border-radius: 6px; background: #2c2010; color: #ffcf6b; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ── payux（站長 2026-10-30「實際跑看看，看哪裡卡卡的」「儲值按鈕也太小顆了」）── */
/* 標題列的儲值鈕：原本 47×21（手機）很難按 → 手機 44px 高的藍色大鈕，電腦 34px；餘額框跟著變圓、靠右 */
#shop-window .hd .sh-bal { padding: 3px 3px 3px 10px; gap: 6px; border-radius: 26px; border-color: #3d6a8a; }
.sh-topup { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 84px; min-height: 44px; margin-left: 4px; padding: 0 16px 0 12px;
  border: 1px solid #b9e3ff; border-radius: 22px; background: linear-gradient(180deg, #6cc0ff, #2563a8 70%, #1b4f8c); color: #fff; font-family: inherit; font-weight: 900; font-size: 17px; line-height: 1;
  letter-spacing: 1px; text-shadow: 0 1px 1px rgba(0,0,0,.45); box-shadow: 0 0 10px rgba(92,178,255,.55), inset 0 1px 0 rgba(255,255,255,.35); cursor: pointer; }
.sh-topup i { font-style: normal; font-size: 19px; margin-right: 1px; }
.sh-topup:active { transform: translateY(1px); filter: brightness(.92); }
/* 電腦版面（body.pcui）：商城是左邊一欄、比較窄，又是滑鼠點 → 小一號，不要擠到「商城」兩個字 */
body.pcui:not(.pcui-sm) .sh-topup { min-height: 30px; min-width: 0; margin-left: 2px; padding: 0 12px; font-size: 15px; letter-spacing: 0; }
body.pcui:not(.pcui-sm) .sh-topup i { display: none; }
body.pcui:not(.pcui-sm) #shop-window .hd .sh-bal { padding: 2px 2px 2px 8px; gap: 4px; font-size: 14px; }
/* 開單表單：付款方式兩欄（原本三欄、行動支付佔一整排後下面空一格）；不能用的原因在「有沒有會員」下面＋改用行動支付 */
.sh-ways { grid-template-columns: repeat(2, 1fr); }
.sh-waybox { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sh-waybox[hidden] { display: none; }
.sh-waybox .sh-waynote[data-waynote] { margin-top: 0; }
.sh-wayswap { align-self: stretch; height: 40px; border: 1px solid #8fd0ff; border-radius: 6px; background: linear-gradient(#2563a8, #143a64); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.sh-waybox.flash .sh-waynote { animation: sh-flash .5s 2; }
@keyframes sh-flash { 50% { background: rgba(255,190,60,.38); } }
/* 驗證碼：打滿 4 位先對一次，對了綠框、錯了紅框 */
.sh-cap .sh-in::placeholder { color: #6f6555; letter-spacing: 0; font-size: 14px; }
.sh-cap .sh-in.ok { border-color: #6fd17a; box-shadow: 0 0 0 1px #6fd17a inset; }
.sh-cap .sh-in.bad { border-color: #ff8a7a; }
.sh-askbtn button:disabled { opacity: .75; cursor: progress; }
/* 等待付款／儲值成功 */
.sh-wait .sh-askbtn a.ok { flex: 1; }
.sh-ask p.sh-paid { display: flex; align-items: center; justify-content: center; gap: 6px; color: #e0f2ff; font-size: 20px; font-weight: 900; }
.sh-paid .sh-gem { width: 30px; height: 30px; }
.sh-paid .sh-gem svg { width: 100%; height: 100%; }
/* 手機橫放（body.pcui-sm）：標題列比較擠 → 拿掉「＋」、左右收一點，高度照樣 44 */
body.pcui-sm .sh-topup { min-width: 0; padding: 0 14px; font-size: 16px; letter-spacing: 0; }
body.pcui-sm .sh-topup i { display: none; }
body.pcui-sm #shop-window .hd .sh-bal { padding-left: 7px; gap: 4px; }
/* 開單表單比手機橫放的畫面還高：原本超出去的「確認開單」捲不到、按不到 → 框最高到畫面高，裡面自己捲 */
.sh-ask.sh-payf .box, .sh-ask.sh-codew .box { max-height: 100%; }
.sh-ask.sh-payf .bd, .sh-ask.sh-codew .bd { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }