/* Social pages: same editorial material and spacing as the town and settings sheets. */
#social-hero,#social-guide { display:none; }
body[data-mpage="soc"] #social-hero { display:block; flex:none; min-height:151px; padding:28px 31px; border-bottom:1px solid var(--ed-line,#445650); background:linear-gradient(90deg,#142123 0%,#172426e8 60%,#14212385),url('../assets/background/background.png') center 44%/cover; }
#social-hero > span,#social-guide-kicker { color:var(--ed-gold-light,#e1c99a); font-size:10px; font-weight:800; letter-spacing:.16em; }
#social-hero h1 { margin:10px 0 5px; color:var(--ed-text,#edf0e8); font-size:28px; font-weight:700; letter-spacing:.07em; }
#social-hero p { margin:0; color:#b9c9bd; font-size:12px; }
body[data-mpage="soc"] #tabbar { display:flex !important; flex-direction:row !important; flex-wrap:nowrap; flex:none; min-height:52px; gap:0 !important; padding:0 !important; border:0 !important; border-bottom:1px solid #445650 !important; border-radius:0 !important; background:#182527 !important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; box-shadow:none; }
body[data-mpage="soc"] #tabbar::-webkit-scrollbar { display:none; }
body[data-mpage="soc"] #tabbar button:not([data-mgroup="soc"]) { display:none !important; }
body[data-mpage="soc"] #tabbar button[data-mgroup="soc"] { display:block; flex:1 0 auto; min-width:91px; min-height:51px !important; padding:0 13px !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; background:transparent !important; color:#afbeb3 !important; font-size:12px !important; font-weight:800; white-space:nowrap; box-shadow:none !important; }
body[data-mpage="soc"] #tabbar button[data-mgroup="soc"].active { border-bottom-color:#e1c99a !important; background:#21302e !important; color:#e1c99a !important; }
body[data-mpage="soc"] #tabbar button[data-mgroup="soc"]:hover { color:#e1c99a !important; }
body[data-mpage="soc"] #col-right > .panel:last-child { min-width:0; min-height:0; border:0; border-radius:0; background:#172325; box-shadow:none; }
body[data-mpage="soc"] #tab-rank,body[data-mpage="soc"] #tab-guild,body[data-mpage="soc"] #tab-party,body[data-mpage="soc"] #tab-pets,body[data-mpage="soc"] #tab-pvp,body[data-mpage="soc"] #tab-market { min-width:0; min-height:0; padding:22px 30px 30px; gap:0; color:#edf0e8; background:#172325; overflow:hidden; font-size:12px; }
body[data-mpage="soc"] #tab-rank::before,body[data-mpage="soc"] #tab-guild::before,body[data-mpage="soc"] #tab-party::before,body[data-mpage="soc"] #tab-pets::before,body[data-mpage="soc"] #tab-pvp::before,body[data-mpage="soc"] #tab-market::before { content:attr(data-social-heading); display:block; flex:none; min-height:44px; margin-bottom:14px; padding:0 0 12px; border-bottom:1px solid #445650; color:#edf0e8; font-size:18px; font-weight:700; line-height:30px; }
body[data-mpage="soc"] #col-right .scroll-fill,body[data-mpage="soc"] #col-right .scroll-fit { min-width:0; scrollbar-color:#56685e #172325; }
body[data-mpage="soc"] .social-intro { display:flex; align-items:center; gap:12px; flex:none; margin:0 0 16px; padding:11px 13px; border-left:2px solid #b9a070; background:#27332e; color:#c9d6ca; font-size:11px; line-height:1.55; }
body[data-mpage="soc"] .social-intro i { color:#e1c99a; font-size:22px; font-style:normal; }
body[data-mpage="soc"] .social-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex:none; min-height:40px; padding:11px 14px; border:1px solid #445650; border-bottom:0; background:#26332f; }
body[data-mpage="soc"] .social-section-head strong { color:#ead5ac; font-size:13px; }
body[data-mpage="soc"] .social-section-head small { color:#a8b9aa; font-size:10px; text-align:right; }
body[data-mpage="soc"] #tab-rank > .scroll-fill { border:1px solid #445650; background:#1c2a2b; }
body[data-mpage="soc"] #col-right .seg { flex:1 0 auto; min-height:35px; border:0; border-radius:0; background:transparent; color:#afbeb3; font-size:11px; font-weight:800; }
body[data-mpage="soc"] #col-right .seg.active { border:0; background:#3d4135; color:#ebd5aa; }
body[data-mpage="soc"] #tab-rank > div:first-of-type,body[data-mpage="soc"] #tab-market > div:first-of-type,body[data-mpage="soc"] .gd-seg { flex:none; display:flex; gap:3px; margin:0 0 15px; padding:3px; border:1px solid #445650; background:#122022; }
body[data-mpage="soc"] .gd-seg button { min-height:35px; border:0; border-radius:0; background:transparent; color:#afbeb3; font-size:11px; }
body[data-mpage="soc"] .gd-seg button.on { border:0; background:#3d4135; color:#ebd5aa; }
body[data-mpage="soc"] #col-right .btn,body[data-mpage="soc"] #col-right .m-act:not(.tog) { min-height:36px; padding:0 11px; border:1px solid #65756a; border-radius:0; background:#25332f; color:#cbd8cc; font-size:11px; font-weight:800; box-shadow:none; }
body[data-mpage="soc"] #col-right .btn:hover:not(:disabled),body[data-mpage="soc"] #col-right .m-act:hover:not(:disabled) { border-color:#b3a47d; color:#eed9ad; background:#343b32; }
body[data-mpage="soc"] #col-right .btn:disabled,body[data-mpage="soc"] #col-right .m-act:disabled { opacity:.52; cursor:not-allowed; }
body[data-mpage="soc"] #col-right .m-act.pri,body[data-mpage="soc"] #col-right .btn.border-yellow-600,body[data-mpage="soc"] #col-right .btn.border-emerald-700 { border-color:#a69167; background:#403d2e; color:#eed5a3; }
body[data-mpage="soc"] #col-right .m-act.warn,body[data-mpage="soc"] #col-right .btn.bg-red-900 { border-color:#a6776c; background:#3a2827; color:#e9b9aa; }
body[data-mpage="soc"] #col-right .acc-in,body[data-mpage="soc"] #col-right #mk-filter,body[data-mpage="soc"] #col-right #guild-name-input,body[data-mpage="soc"] #col-right .pet-rename,body[data-mpage="soc"] #col-right .ssel { min-height:40px; padding:0 11px; border:1px solid #64756c; border-radius:0; background:#122022; color:#edf0e8; font-size:11px; }
body[data-mpage="soc"] #col-right input::placeholder { color:#8fa397; }
body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center,body[data-mpage="soc"] #col-right .scroll-fit > .flex.items-center { min-height:60px; padding:9px 14px; gap:12px; border:0; border-bottom:1px solid #34443f; border-radius:0; background:transparent; }
body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center:nth-child(odd),body[data-mpage="soc"] #col-right .scroll-fit > .flex.items-center:nth-child(odd) { background:transparent; }
body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center:hover,body[data-mpage="soc"] #col-right .scroll-fit > .flex.items-center:hover { background:#263630; }
body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center .text-slate-500,body[data-mpage="soc"] #col-right .scroll-fit > .flex.items-center .text-slate-500 { color:#91a69a; }
body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center .text-slate-200,body[data-mpage="soc"] #col-right .scroll-fit > .flex.items-center .text-slate-200 { color:#edf0e8; }
body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center .text-yellow-400,body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center .text-yellow-300 { color:#e1c99a; }
body[data-mpage="soc"] #tab-rank > .lb-mine { flex:none; margin:0 0 14px; color:#a8b9aa; }
body[data-mpage="soc"] #tab-rank > .lb-mine > .flex { min-height:54px; border-left:3px solid #c4ab77; border-radius:0; background:#29382f; }
body[data-mpage="soc"] .gd-card { padding:14px; border-color:#445650; border-radius:0; background:#1c2a2b; }
body[data-mpage="soc"] .gd-title,body[data-mpage="soc"] .gd-lv,body[data-mpage="soc"] .gd-sec,body[data-mpage="soc"] .gd-sub { color:#ead5ac; }
body[data-mpage="soc"] .gd-title { font-size:18px; }
body[data-mpage="soc"] .gd-meta,body[data-mpage="soc"] .gd-note,body[data-mpage="soc"] .gd-rk .sub,body[data-mpage="soc"] .gd-mem .c { color:#afbeb3; font-size:11px; }
body[data-mpage="soc"] .gd-bar { height:5px; border-radius:0; background:#35443f; }
body[data-mpage="soc"] .gd-bar i { background:#c9af77; }
body[data-mpage="soc"] .gd-kv { padding:8px 0; border-bottom:1px solid #34443f; color:#afbeb3; font-size:11px; }
body[data-mpage="soc"] .gd-kv b { color:#ead5ac; }
body[data-mpage="soc"] .gd-rk { min-height:60px; margin:0; padding:10px 14px; border:0; border-bottom:1px solid #34443f; border-radius:0; background:#1c2a2b; }
body[data-mpage="soc"] .gd-rk.me { border-left:3px solid #c4ab77; background:#29382f; }
body[data-mpage="soc"] .gd-rk .no { color:#e1c99a; font-size:15px; }
body[data-mpage="soc"] .gd-rk .nm { font-size:12px; }
body[data-mpage="soc"] .gd-discover-list { border:1px solid #445650; background:#1c2a2b; }
body[data-mpage="soc"] .gd-create-head { margin-top:18px; }
body[data-mpage="soc"] .gd-create-body { padding:14px; border:1px solid #445650; background:#1c2a2b; }
body[data-mpage="soc"] .gd-create-body > .text-xs { padding:0; border:0; border-radius:0; background:transparent; color:#afbeb3; line-height:1.6; }
body[data-mpage="soc"] .gd-mem { min-height:54px; border-color:#34443f; font-size:12px; }
body[data-mpage="soc"] .gd-mem .r { border-radius:0; }
body[data-mpage="soc"] .gd-foot { padding-bottom:8px; }
body[data-mpage="soc"] .bf { border-radius:0; }
body[data-mpage="soc"] #tab-party > .scroll-fill > .mt-2.border { border-color:#445650; border-radius:0; background:#1c2a2b; padding:14px; }
body[data-mpage="soc"] #tab-party .social-party-buff { padding:13px 14px; border:1px solid #445650; background:#1c2a2b; color:#afbeb3; line-height:1.6; }
body[data-mpage="soc"] #tab-party .social-party-buff .text-amber-300 { color:#e1c99a; }
body[data-mpage="soc"] #tab-party .social-party-members { margin-top:17px; }
body[data-mpage="soc"] #tab-party .social-party-members ~ .flex.items-center { min-height:60px; padding:9px 14px; border-bottom:1px solid #34443f; background:#1c2a2b; }
body[data-mpage="soc"] #tab-party > .scroll-fill > .font-bold.text-lg { padding:14px; border:1px solid #445650; background:#26332f; color:#ead5ac; }
body[data-mpage="soc"] #tab-party .pt-seg { gap:3px; padding:3px; border:1px solid #445650; background:#122022; }
body[data-mpage="soc"] #tab-party .pt-seg .m-act { min-height:36px; border:0; border-radius:0; background:transparent; color:#afbeb3; }
body[data-mpage="soc"] #tab-party .pt-seg .m-act.on { background:#3d4135; color:#ebd5aa; }
body[data-mpage="soc"] #tab-party .grid.grid-cols-2 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
body[data-mpage="soc"] #tab-pets .pet-pic { width:40px; height:40px; margin-right:10px; padding:3px; border:1px solid #607667; border-radius:0; background:#22322d; }
body[data-mpage="soc"] #tab-pets .social-pet-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 4px; margin:0 0 14px; padding:12px 14px; border:1px solid #445650; background:#1d2b2b; color:#c9d6ca; font-size:12px; }
body[data-mpage="soc"] #tab-pets .social-pet-summary > b:first-child { color:#ead5ac; }
body[data-mpage="soc"] #tab-pets .social-pet-summary > b:not(:first-child) { color:#e1c99a; }
body[data-mpage="soc"] #tab-pets .social-section-head { margin-top:14px; }
body[data-mpage="soc"] .social-empty-pets { display:flex; flex-direction:column; gap:8px; padding:24px 18px; border:1px solid #445650; background:#1c2a2b; }
body[data-mpage="soc"] .social-empty-pets strong { color:#edf0e8; font-size:14px; }
body[data-mpage="soc"] .social-empty-pets span { color:#afbeb3; font-size:11px; line-height:1.6; }
body[data-mpage="soc"] .social-pet-help { margin:16px 0 0; padding:12px 14px; border:1px solid #445650; color:#afbeb3; font-size:11px; }
body[data-mpage="soc"] .social-pet-help summary { color:#e1c99a; font-weight:700; cursor:pointer; }
body[data-mpage="soc"] .social-pet-help p { margin:10px 0 0; line-height:1.7; }
body[data-mpage="soc"] #tab-pets .scroll-fill > .border-b { margin-top:12px; padding:12px 14px; border:1px solid #445650; background:#1c2a2b; }
body[data-mpage="soc"] #tab-pets .scroll-fill > .border-b + .border-b { margin-top:0; border-top:0; }
body[data-mpage="soc"] #tab-pets .h-2.bg-slate-800 { height:5px; border-radius:0; background:#35443f; }
body[data-mpage="soc"] #tab-pets .h-2.bg-slate-800 > div { height:5px; border-radius:0; }
body[data-mpage="soc"] #tab-pets .pet-pot { border-color:#34443f; }
body[data-mpage="soc"] #tab-market #mk-sellable { border:1px solid #445650; background:#1c2a2b; }
body[data-mpage="soc"] #tab-market > .scroll-fill,body[data-mpage="soc"] #tab-market > .scroll-fit,body[data-mpage="soc"] #tab-pvp > .scroll-fill,body[data-mpage="soc"] #tab-pvp > .scroll-fit { border:1px solid #445650; background:#1c2a2b; }
body[data-mpage="soc"] #tab-market #mk-filter { flex:1; }
body[data-mpage="soc"] #tab-market .border-t,body[data-mpage="soc"] #tab-pvp .border-t { border-color:#445650; }
#social-guide { min-width:0; padding:27px 20px; border-left:1px solid #445650; background:#1b292a; overflow-y:auto; }
#social-guide h2 { margin:7px 0; color:#edf0e8; font-size:18px; font-weight:700; }
#social-guide p { margin:0; color:#afbeb3; font-size:11px; line-height:1.65; }
#social-guide-card { margin-top:20px; padding:16px; border:1px solid #445650; background:#22302f; }
#social-guide-card h3 { margin:0 0 6px; color:#edf0e8; font-size:14px; }
#social-guide-rows > div { display:flex; justify-content:space-between; gap:9px; padding:11px 0; border-bottom:1px solid #34443f; color:#afbeb3; font-size:11px; }
#social-guide-rows > div:last-child { border:0; }
#social-guide-rows strong { color:#e1c99a; font-weight:700; text-align:right; overflow-wrap:anywhere; }
#social-guide-tip { margin-top:20px; padding:13px; border-left:2px solid #a58d5e; background:#26302c; color:#c8d2c4; font-size:11px; line-height:1.65; }
@media(min-width:768px){
  body[data-mpage="soc"] #col-center { display:none !important; }
  body[data-mpage="soc"] #col-right { grid-column:2 / 4; grid-row:2; display:grid !important; grid-template-columns:minmax(0,1fr) 313px; grid-template-rows:151px 52px minmax(0,1fr); width:auto !important; min-width:0; min-height:0; gap:0; background:#172325; }
  body[data-mpage="soc"] #social-hero { grid-column:1; grid-row:1; }
  body[data-mpage="soc"] #tabbar { grid-column:1; grid-row:2; }
  body[data-mpage="soc"] #col-right > .panel:last-child { grid-column:1; grid-row:3; display:flex; height:100%; }
  body[data-mpage="soc"] #social-guide { grid-column:2; grid-row:1 / 4; display:block; }
}
@media(min-width:768px) and (max-width:1199px){
  body[data-mpage="soc"] #col-right { grid-template-columns:minmax(0,1fr); }
  body[data-mpage="soc"] #social-guide { display:none; }
}
@media(max-width:767px){
  body[data-mpage="soc"] #col-right { display:flex !important; flex:1 1 0; min-height:0; gap:0; background:#172325; }
  body[data-mpage="soc"] #social-guide { display:none; }
  body[data-mpage="soc"] #social-hero { min-height:80px; padding:13px 15px; background:#1a2728; }
  #social-hero > span,#social-hero p { display:none; }
  #social-hero h1 { margin:8px 0 0; font-size:21px; }
  body[data-mpage="soc"] #tabbar { min-height:50px; }
  body[data-mpage="soc"] #tabbar button[data-mgroup="soc"] { flex:1 1 0; min-width:0; min-height:49px !important; padding:0 2px !important; font-size:11px !important; text-align:center; }
  body[data-mpage="soc"] #tab-rank,body[data-mpage="soc"] #tab-guild,body[data-mpage="soc"] #tab-party,body[data-mpage="soc"] #tab-pets,body[data-mpage="soc"] #tab-pvp,body[data-mpage="soc"] #tab-market { padding:14px 13px 20px; }
  body[data-mpage="soc"] #tab-rank::before,body[data-mpage="soc"] #tab-guild::before,body[data-mpage="soc"] #tab-party::before,body[data-mpage="soc"] #tab-pets::before,body[data-mpage="soc"] #tab-pvp::before,body[data-mpage="soc"] #tab-market::before { min-height:36px; margin-bottom:11px; padding-bottom:8px; font-size:16px; line-height:27px; }
  body[data-mpage="soc"] #col-right .scroll-fill > .flex.items-center,body[data-mpage="soc"] #col-right .scroll-fit > .flex.items-center { min-height:58px; padding:9px 11px; gap:9px; }
  body[data-mpage="soc"] .social-intro { margin-bottom:13px; padding:10px 11px; font-size:10px; }
  /* 📱 2026-10-05（玩家回報「排行榜高度只有一個名字」→ 定案「只列 10 個、整個分頁一起捲」）：
     手機上固定的東西把清單擠到只剩一列在捲。清單不自己捲、十列完整展開，整個分頁一起捲；
     與上方大標重複的那一行標題、說明文字在手機上收掉。 */
  body[data-mpage="soc"] #tab-rank { overflow-x:hidden; overflow-y:auto; }
  body[data-mpage="soc"] #tab-rank::before,body[data-mpage="soc"] #tab-rank > .social-intro { display:none; }
  body[data-mpage="soc"] #tab-rank > .scroll-fill { flex:none; min-height:auto; overflow:visible; }
  /* 📱 2026-10-08（玩家：「手機版的信箱改成整個畫面的滑動，不然手機版面太小滑不到，跟之前血盟排名一樣」）：
     同上面排行榜的做法 —— 清單不自己捲、完整展開，整個市場分頁一起捲。先做了信箱；同一天的盤點（360×640）量到
     市場／寵物／我的寄售三個子分頁的清單只剩 45／43／21px（「我的寄售」底下的背包清單等於看不到），四個一起改。
     「我的寄售」的掛單（.scroll-fit）與背包（#mk-sellable，也是 .scroll-fill）都是分頁的直接子元素。 */
  body[data-mpage="soc"] #tab-market { overflow-x:hidden; overflow-y:auto; }
  body[data-mpage="soc"] #tab-market > .scroll-fill,body[data-mpage="soc"] #tab-market > .scroll-fit { flex:none; min-height:auto; overflow:visible; }
  /* 📱 2026-10-08（玩家：「一起改掉重複標題」）：社群頁每個分頁頂端的 ::before 標題與上方大標（#social-hero h1）是同一個字串
     （`updateSocialChrome()` 兩邊寫同一個 title）—— 手機上兩個疊在一起只是佔掉一列。排行榜 10-05 已收，其餘五個比照；桌面照舊（大標與面板分開兩區）。
     信箱的說明與清單底下那段「📬 賣出所得會寄到這裡…」講同一件事，手機上也收掉。 */
  body[data-mpage="soc"] #tab-guild::before,body[data-mpage="soc"] #tab-party::before,body[data-mpage="soc"] #tab-pets::before,body[data-mpage="soc"] #tab-pvp::before,body[data-mpage="soc"] #tab-market::before { display:none; }
  body[data-mpage="soc"] #tab-market[data-mktab="mail"] > .social-intro { display:none; }
  body[data-mpage="soc"] .social-intro i { font-size:19px; }
  body[data-mpage="soc"] .social-section-head { padding:10px 11px; }
  body[data-mpage="soc"] .social-section-head strong { font-size:12px; }
  body[data-mpage="soc"] .social-section-head small { font-size:9px; }
  body[data-mpage="soc"] #tab-party .grid.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-mpage="soc"] #tab-pets .scroll-fill > .border-b { padding:11px; }
  body[data-mpage="soc"] #col-right .btn,body[data-mpage="soc"] #col-right .m-act:not(.tog) { min-height:40px; }
  body[data-mpage="soc"] #col-right .acc-in,body[data-mpage="soc"] #col-right #mk-filter,body[data-mpage="soc"] #col-right #guild-name-input,body[data-mpage="soc"] #col-right .pet-rename,body[data-mpage="soc"] #col-right .ssel { min-height:44px; }
}