/* 社交：公屏 / 右侧玩家列表 / 玩家菜单 / 顶部播报条 / 邀请名单 / 被邀请弹窗（docs/MEISHI_TD_SOCIAL.md §2；逻辑在 web/app/social/）。
   坐标一律是原作舞台像素：公屏按 --ui-chat、列表按 --ui-plist、菜单按 --ui 整体缩放；公屏贴 #td-hud 的屏幕角，右侧玩家列表 / 快速加入贴舞台右上角（同世界地图）；
   邀请名单画在备战屏舞台里，被邀请弹窗画在 #td-modal。 */

/* ---------- 通用 ---------- */
.sc-img { background-size: 100% 100%; background-repeat: no-repeat; }
.sc-btn {
  position: absolute; border: 0; padding: 0; margin: 0; background: transparent no-repeat 0 0 / 100% 100%;
  cursor: pointer; pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
}
.sc-btn.sc-off, .sc-btn.sc-dim { filter: grayscale(1) brightness(.85); cursor: default; }
.sc-btn.sc-disabled { cursor: default; }
.sc-btn:not(.sc-disabled):active { filter: brightness(1.1); }
.sc-mirror { transform: scaleX(-1); }
.sc-text { position: absolute; white-space: nowrap; overflow: hidden; pointer-events: none; }
#td-root.td-no-chat .sc-chat-lobby, #td-root.td-no-chat .sc-mq, #td-root.td-no-plist .sc-plist,
#td-root.td-no-social .sc-chat, #td-root.td-no-social .sc-mq, #td-root.td-no-social .sc-plist { display: none; }

/* ---------- 公屏（原作 im/a_3663：整块 (0,449)~(392,595)） ---------- */
.sc-chat {
  position: absolute; left: 0; bottom: 0; transform-origin: 0 100%; transform: scale(var(--ui-chat, var(--ui, 1)));
  pointer-events: none; font-family: var(--td-song); z-index: 2;
}
/* 手机上点输入框：整块临时贴到 HUD 顶部，输入条放最上面、消息框挪到它下面（键盘从下面弹起来挡不住输入条） */
.sc-chat.sc-typing { top: 0; bottom: auto; transform-origin: 0 0; z-index: 20; }
/* 房间列表批（docs/MEISHI_TD_ROOMLIST_EMOTE.md §1.3.1）：公屏打开下拉 / 快捷语 / 选人层 / 长按菜单时整块临时提到 z 20，盖在美味岛房间列表框（z 10）上面 */
.sc-chat-lobby.sc-pop { z-index: 20; }
.sc-chat.sc-typing .sc-inbar { top: 0 !important; }
.sc-chat.sc-typing .sc-mask { top: 27px !important; }
.sc-chat.sc-typing .sc-openbtn { top: 27px !important; }
.sc-chat.sc-typing .sc-drop { top: 27px !important; }
.sc-mask { position: absolute; overflow: hidden; pointer-events: none; }
.sc-out { position: absolute; transition: transform .18s ease-out; }
.sc-chat.sc-closed .sc-out { transform: translateY(var(--sc-out-h, 101px)); }
.sc-chat.sc-closed .sc-out * { pointer-events: none !important; }
.sc-lines {
  position: absolute; overflow-x: hidden; overflow-y: auto; pointer-events: auto; touch-action: pan-y; overscroll-behavior: contain;
  scrollbar-width: none; font-size: var(--chat-font, 12px); line-height: calc(var(--chat-font, 12px) + 3px); text-align: left;
  -webkit-overflow-scrolling: touch;
}
.sc-lines::-webkit-scrollbar { display: none; }
.sc-line { white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.sc-line.sc-deleted { color: #8b95a3; }
.sc-line.sc-click { cursor: pointer; text-decoration: underline; }
/* 名字前的「*VIPn*」（原作 IMConfig.getUserFlagDisplay，VIP ≥ 4；颜色 JS 按等级写在行内） */
.sc-line .sc-vip { unicode-bidi: isolate; }
.sc-nm { cursor: pointer; }
/* 名字和正文各自做双向文字隔离：老名字里的 RTL 字符 / 方向控制符不会把「[名字]说:」的顺序搅乱 */
.sc-nm, .sc-tx, .sc-fu-name, .sc-pl-name, .sc-inv-nick, .sc-menu-name, .sc-card-name { unicode-bidi: isolate; }
.sc-nm:hover { text-decoration: underline; }
.sc-inbar { pointer-events: auto; }
.sc-input {
  position: absolute; box-sizing: border-box; margin: 0; border: 0; outline: none; background: transparent; color: #fff;
  padding: 0 3px; font-family: var(--td-font); font-size: var(--chat-font, 12px); line-height: 18px;
  pointer-events: auto; -webkit-user-select: text; user-select: text; touch-action: manipulation; caret-color: #fff;
}
.sc-input:disabled { opacity: .45; }
.sc-chat.sc-offline .sc-inbar { filter: grayscale(.6); }
.sc-chat:not(.sc-closed) .sc-openbtn { display: none; }
.sc-unread {
  position: absolute; right: -9px; top: -9px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px;
  background: #e8321e; border: 1px solid #fff; color: #fff; font: bold 10px/13px var(--td-font); text-align: center; display: none; pointer-events: none;
}
.sc-unread.on { display: block; }
.sc-drop, .sc-ctx {
  position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 5;
  background: rgba(0, 22, 49, .94); border: 1px solid #3c86c6; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.sc-drop-row {
  position: absolute; box-sizing: border-box; border: 0; margin: 0; padding: 0 6px; background: transparent; color: #d3e9f8;
  font: 12px/18px var(--td-song); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; outline: none;
}
.sc-drop-row:hover, .sc-drop-row:focus { background: rgba(168, 201, 231, .32); color: #fff; }
.sc-ctx .sc-drop-row { line-height: 20px; }
.sc-grouplist { pointer-events: auto; z-index: 5; }
/* 大厅公屏和右下底栏对齐（ui7c，老板 09-30 13:5x「手机上玩的话，在美味镇和美味岛的聊天框位置有点怪，我认为可以稍微 resize 一下然后和底下菜单栏对齐」）：
   以前（chatfix_0929）手机上公屏右边伸进底栏（底栏 z 3 盖住它）就整块抬到底栏顶上，左下空一截、和底栏错开一层台阶。
   现在公屏底边 = 底栏底图底边（--chat-bottom），右边停在底栏左端前 4 px：放不下先收窄（--chat-cut：输入框 / 消息区变短，按钮一个不少），
   再不够才略缩（--ui-chat），都由 social_model.chatDock 算、social_hud 写到 #td-hud 上；比 568×320 还窄的屏才退回「抬到底栏上面」。
   电脑上同样对齐（1280×720 抬 6.6 px；窗口比舞台高、上下留边时公屏跟着舞台底走，不再贴窗口底）。点输入框时（.sc-typing 贴顶）不收窄、照旧。 */
.sc-chat-lobby { --cut: 0px; }
#td-root:not(.td-no-menubar):not(.td-menu-stage) .sc-chat.sc-chat-lobby:not(.sc-typing) {
  bottom: var(--chat-bottom, 0px);
  --cut: var(--chat-cut, 0px);
}
.sc-chat-lobby.sc-cutw, .sc-chat-lobby .sc-cutw { width: calc(var(--w0) - var(--cut)) !important; }
.sc-chat-lobby .sc-cutx { margin-left: calc(-1 * var(--cut)); }
/* 底图剪一段：本体背景往左挪 --cut、只画 --seam 往右（padding + background-clip，半透明的消息框底图不会叠两层），
   ::before 画左边 --seam 宽的原图；剪口在纯色段里，看不出接缝 */
.sc-chat-lobby .sc-cutbg {
  box-sizing: border-box; padding-left: var(--seam); background-origin: border-box; background-clip: content-box;
  background-size: var(--bw) var(--bh) !important; background-position: calc(-1 * var(--cut)) 0 !important; background-repeat: no-repeat;
}
.sc-chat-lobby .sc-cutbg::before {
  content: ''; position: absolute; left: 0; top: 0; width: var(--seam); height: 100%; pointer-events: none;
  background-image: inherit; background-repeat: no-repeat; background-size: var(--bw) var(--bh); background-position: 0 0;
}
@media (pointer: coarse) {
  /* 快捷语（预设消息）钮 28×22 放大后只有 22×18 CSS px：透明热区扩到 44×44 舞台像素（--ui-chat ≥ 0.743、即 568×320 起 ≥ 32 CSS px），
     左边到「发送」钮右沿为止（不抢发送），右边压大喇叭钮左边 10 px，上边伸进消息区底 16 px */
  .sc-chat-lobby .sc-inbar [data-ui="social/btn_qmsg"]::after {
    content: ''; position: absolute; left: -6px; right: -10px; top: -16px; bottom: -6px; z-index: 1;
  }
}

/* ---------- 顶部滚动播报条（SystemMsgInLobbyBG 1024×25，舞台顶端居中） ---------- */
/* 宽度由 marquee.js 按右上角胶囊（.mb-tr）的位置裁：只画到胶囊左边，不压「今日次数 / 金币 / 点券」 */
.sc-mq {
  position: absolute; left: var(--stage-l, 0); top: var(--stage-t, 0); width: 950px; height: 25px; transform-origin: 0 0;
  transform: scale(var(--stage-scale, 1)); pointer-events: none; display: none; z-index: 1; overflow: hidden;
}
.sc-mq.on { display: block; }
.sc-mq-lane { position: absolute; left: 0; top: 0; width: 950px; height: 25px; overflow: hidden; }
.sc-mq-text {
  position: absolute; left: 0; top: 3px; white-space: nowrap; font: bold 14px/19px var(--td-song); color: #00ccff;
  text-shadow: 0 1px 1px #000; animation-name: sc-mq; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes sc-mq { from { transform: translateX(var(--mq-from, 950px)); } to { transform: translateX(var(--mq-to, -950px)); } }

/* ---------- 右侧玩家列表（TDRoomUserUI；原点 = 舞台 (771,90)） ---------- */
/* 锚点和右上「世界地图」（screens.css .mb-tr）同一个：舞台右上角（--stage-r / --stage-t），顶 = 90 × --ui，以右上角为原点缩放。
   列表 179 宽、右边 = 舞台右边（771 + 179 = 950），顶 = 舞台 y 90；地球 797.5..926（右边离舞台右边 24）正好在它正上方。
   缩放 --ui-plist（social_hud.js 按屏幕算）：平时 = --ui（和地球一样大）；手机横屏放不下「列表 + 快速加入」时缩到刚好停在底栏上面。
   以前贴屏幕右边（right: 0）、顶按 --stage-scale 算：iPhone 横屏比舞台宽、两侧留边，列表比地球多出去一截（老板 09-29 12:28）。 */
.sc-plist {
  position: absolute; right: var(--stage-r, 0px); top: calc(var(--stage-t, 0px) + 90px * var(--ui, 1));
  transform-origin: 100% 0; transform: scale(var(--ui-plist, var(--ui, 1))); pointer-events: none; z-index: 1;
}
/* 美味镇不画玩家列表（老板 09-29 12:30；原作美味镇没有 TDRoomUserUI）。#td-root[data-screen] = 底层屏（main.js onChange 写）；
   面板盖着时本来就由 .td-no-plist 藏起来。快速加入只在美味岛（quick_join.js），公屏照旧。 */
#td-root[data-screen="town"] .sc-plist { display: none; }
.sc-pl-mask { position: absolute; overflow: hidden; pointer-events: none; }
.sc-pl-body { position: absolute; transition: transform .3s ease-out; }
.sc-plist.sc-pl-closed .sc-pl-body { transform: translateY(var(--close-dy, -253px)); }
.sc-pl-title { pointer-events: none; }
.sc-pl-rows { position: absolute; }
.sc-pl-row {
  position: absolute; box-sizing: border-box; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer;
  pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
}
.sc-pl-row:hover, .sc-pl-row:focus-visible { background: rgba(255, 255, 255, .35); }
.sc-pl-row.sc-away { filter: grayscale(1); }
.sc-pl-lv { position: absolute; background-repeat: no-repeat; pointer-events: none; }
.sc-pl-name {
  position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; pointer-events: none;
  font: bold max(12px, calc(11px / var(--ui-plist, var(--ui, 1))))/16px var(--td-song); color: #9b3603;
}
.sc-pl-row.sc-me .sc-pl-name { color: #c0340a; }
/* VIP 斜角标（viplist 10-01，web/app/social/vip_tag.js）：原作 LobbyUserItem.newVipTipMc 摆在行内 (0,0)，盖在等级框左上；
   光 = 裁切窗 .sc-vip-fx 里一条 20 帧的光带，原作 39 帧 @12fps（时长由 JS 按版面写），前 20 帧（20/39 = 51.282%）一帧一格往左移，
   之后移到带子外面（全透明）等下一圈。行变灰（离开）时角标跟着灰（原作整行套去色滤镜）。 */
.sc-vip-badge { position: absolute; background-repeat: no-repeat; pointer-events: auto; }
.sc-vip-fx { position: absolute; overflow: hidden; pointer-events: none; }
.sc-vip-fx > i {
  position: absolute; left: 0; top: 0; display: block; background-repeat: no-repeat; will-change: transform;
  animation: sc-vip-fx 3.25s steps(20, end) infinite;
}
@keyframes sc-vip-fx { 0% { transform: translateX(0); } 51.282% { transform: translateX(-100%); } 100% { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .sc-vip-fx > i { animation: none; transform: translateX(-100%); } }
.sc-pl-page { font: bold 13px/18px var(--td-font); color: #fff; text-align: center; text-shadow: 0 1px 1px #0b2e57; }

/* ---------- 快速加入通关战（美味岛外层 TDLobbyRoomUI.vcBtn：舞台 (820,417) 124×30，就在玩家列表下面） ---------- */
/* 和 .sc-plist 同一个锚点、同一个缩放（原点 = 舞台 (771,90)、贴舞台右边、按 --ui-plist 以右上角缩放），宽屏 / 手机横屏上都跟着列表走；只在美味岛显示（.on） */
.sc-quick {
  position: absolute; right: var(--stage-r, 0px); top: calc(var(--stage-t, 0px) + 90px * var(--ui, 1));
  transform-origin: 100% 0; transform: scale(var(--ui-plist, var(--ui, 1))); pointer-events: none; z-index: 1; display: none;
}
.sc-quick.on { display: block; }
#td-root.td-no-social .sc-quick { display: none; }
.sc-quick-pad {
  position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer;
  pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
}
.sc-quick.sc-busy .sc-btn { cursor: progress; }

/* ---------- 玩家菜单（UserAvatarTip） ---------- */
.sc-menu { position: absolute; transform-origin: 0 0; transform: scale(var(--ui, 1)); pointer-events: auto; z-index: 30; }
/* 从好友窗（#td-modal，舞台层）点开的菜单：挂同一层、按舞台坐标放，不再按 --ui 缩放（整层已经跟舞台缩放） */
.sc-menu.sc-menu-stage { transform: none; }
.sc-menu-name {
  position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  font: bold 13px/16px var(--td-font); color: #35b8ee;
}
.sc-menu-sub { position: absolute; white-space: nowrap; overflow: hidden; text-align: center; pointer-events: none; font: 12px/16px var(--td-song); color: #a9bbd6; }
.sc-menu-row { position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none; }
.sc-menu-row:not(.sc-off):hover, .sc-menu-row:not(.sc-off):focus-visible { background: rgba(168, 201, 231, .32); }
.sc-menu-row.sc-off { background: rgba(0, 0, 0, .34); cursor: default; }
.sc-menu-admin { position: absolute; box-sizing: border-box; background: rgba(0, 22, 49, .92); border: 1px solid #1c4f86; border-radius: 0 0 6px 6px; }
.sc-menu-adm {
  position: absolute; box-sizing: border-box; border: 1px solid #5a130c; border-radius: 4px; padding: 0; cursor: pointer;
  background: linear-gradient(#e0533f, #9c2818); color: #fff; font: bold 12px/20px var(--td-font); outline: none;
}
.sc-menu-adm:active { filter: brightness(1.15); }

/* ---------- 资料卡（原作蓝框弹窗里） ---------- */
.sc-card { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.sc-card-face { position: absolute; background: no-repeat 50% 0 / contain; border: 2px solid #5aa3dc; border-radius: 8px; background-color: rgba(255, 255, 255, .45); }
.sc-card-lv { position: absolute; background-repeat: no-repeat; transform: scale(.8); transform-origin: 0 0; }
.sc-card-name { position: absolute; font: 900 18px/24px var(--td-font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 #0b3d73; }
.sc-card-rows { position: absolute; background: #e2f3ff; border: 2px solid #5aa3dc; border-radius: 8px; overflow: hidden; }
.sc-card-row { display: flex; min-height: 26px; align-items: center; padding: 0 10px; font: bold 14px/26px var(--td-font); color: #0b2e57; border-bottom: 1px solid #b9dcf5; }
.sc-card-row:last-child { border-bottom: 0; }
.sc-card-k { width: 72px; flex: none; color: #3d6f9c; }
.sc-card-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 邀请名单（FreeUserPanel 216×439，备战屏舞台 (420,76)） ---------- */
.sc-freeuser { position: absolute; z-index: 200; pointer-events: auto; font-family: var(--td-song); }
.sc-fu-rows { position: absolute; }
.sc-fu-row { position: absolute; cursor: pointer; }
.sc-fu-row:hover { background: rgba(255, 255, 255, .3); }
.sc-fu-name {
  position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; pointer-events: none;
  font: bold 13px/16px var(--td-song); color: #6b3500;
}
.sc-fu-empty { font: bold 13px/20px var(--td-song); color: #8a5a20; text-align: center; white-space: normal; }
.sc-fu-page { font: bold 13px/18px var(--td-font); color: #fff; text-align: center; text-shadow: 0 1px 1px #0b2e57; }

/* ---------- 被邀请弹窗（InvitedPanel，#td-modal 里 (351,198)） ---------- */
.sc-invited { position: absolute; pointer-events: auto; z-index: 9; font-family: var(--td-song); } /* 压在好友窗 / 送花框 / 资料窗（z 6）上面：开着好友窗时被好友邀请也看得见、点得到（审查修复） */
.sc-inv-title {
  position: absolute; white-space: nowrap; overflow: hidden; text-align: center; pointer-events: none;
  font: bold 14px/20px var(--td-song); color: #fff; text-shadow: 0 1px 1px #0b3d73;
}
.sc-inv-nick { color: #ff7feb; }
.sc-inv-field {
  position: absolute; white-space: nowrap; overflow: hidden; text-align: center; pointer-events: none;
  font: bold 15px/25px var(--td-font); color: #fff;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000;
}
.sc-inv-mode { color: #b8ff5a; }
.sc-inv-timer {
  position: absolute; white-space: nowrap; overflow: hidden; text-align: center; pointer-events: none;
  font: bold 13px/18px var(--td-song); color: #ff3fbf; text-shadow: 0 0 2px #a6fcff, 0 0 2px #a6fcff;
}

/* ================= 社交第二批（docs/MEISHI_TD_SOCIAL2.md §2；逻辑在 web/app/social/） ================= */
/* 图集里的一块（background-size / position 由 social_ui.kit 按 layout.sprites 写在行内） */
.sc-spr { background-repeat: no-repeat; }

/* ---------- 聊天框：备战 a_3664 / 战斗 a_3665（挂在舞台里，舞台坐标，不再缩放） ---------- */
.sc-chat.sc-chat-ready, .sc-chat.sc-chat-battle { bottom: auto; transform: none; z-index: 30; }
.sc-chat-ready.sc-typing, .sc-chat-battle.sc-typing { top: 0 !important; }
.sc-inwrap { position: absolute; display: flex; align-items: center; pointer-events: auto; }
.sc-inwrap .sc-input { position: static; flex: 1 1 auto; min-width: 0; width: auto; height: 100%; }
.sc-tell {
  flex: none; display: none; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px;
  font: var(--chat-font, 12px)/18px var(--td-song); color: #ff7feb; unicode-bidi: isolate;
}
.sc-tell.on { display: block; }
.sc-seg { white-space: pre-wrap; }
.sc-line.sc-pm, .sc-line.sc-horn { text-shadow: 0 1px 1px rgba(0, 0, 0, .8); }
.sc-ctip { position: absolute; overflow: hidden; pointer-events: none; }
.sc-ctip-text {
  position: absolute; left: 0; top: 0; white-space: nowrap; font: bold 12px/17px var(--td-song); color: #ffe45c; text-shadow: 0 1px 1px #000;
  animation-name: sc-mq; animation-timing-function: linear; animation-fill-mode: forwards;
}
.sc-grouplist3 { z-index: 6; }

/* ---------- 私聊选人层 FriendsList（131×255） ---------- */
.sc-picker { position: absolute; z-index: 7; pointer-events: auto; }
.sc-pk-tab { position: absolute; border: 0; padding: 0; background: rgba(0, 0, 0, .35); cursor: default; }
.sc-pk-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
.sc-pk-list::-webkit-scrollbar { display: none; }
.sc-pk-row { position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none; }
.sc-pk-row:hover .sc-img, .sc-pk-row:focus-visible .sc-img { filter: brightness(1.5); }
.sc-pk-name {
  position: absolute; left: 6px; right: 4px; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  font: 12px/20px var(--td-song); color: #ffffee; unicode-bidi: isolate; pointer-events: none;
}
.sc-pk-empty { position: absolute; left: 0; right: 18px; top: 60px; text-align: center; font: 12px/18px var(--td-song); color: #d9c4e6; }

/* ---------- 左上「好友」「邮件」（贴在个人框下沿，和 .mb-tl 同一个锚点：屏幕左边 + 4、舞台顶 + 4；只在大厅类屏幕显示） ----------
   09-30：顶跟 .mb-tl 一起改成舞台顶（宽屏舞台顶 = 屏幕顶，不变；窗口偏高、舞台上下留边时不再和玩家框叠在一起） */
.sc-tl {
  position: absolute; left: 4px; top: calc(var(--stage-t, 0px) + 4px); width: 118px; height: 120px; transform-origin: 0 0; transform: scale(var(--ui, 1));
  pointer-events: none; display: none; z-index: 1;
}
.sc-tl.on { display: block; }
#td-root.td-no-hud .sc-tl, #td-root.td-no-social .sc-tl { display: none; }
.sc-badge {
  position: absolute; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; display: none;
  background: #e8321e; border: 1px solid #fff; color: #fff; font: bold 10px/12px var(--td-font); text-align: center; pointer-events: none;
}
.sc-badge.on { display: block; }

/* ---------- 好友窗 TDFriendUI（#td-modal 里 (190,80)） ---------- */
.sc-friendwin, .sc-flower, .sc-role, .sc-hornbox { position: absolute; pointer-events: auto; z-index: 6; font-family: var(--td-song); }
/* 这几个窗口上面弹的确认框（删好友 132434、送花到顶 139876、大喇叭 133136 / 133135）也挂 #td-modal：要压在窗口上面，否则点不到「确定」 */
#td-modal > .td-dlg { z-index: 10; }
/* 搜索框 / 审核工具条是铺满窗口的透明层：层本身不接点击（不挡页签），里面的输入框和按钮接 */
.sc-fr-search, .sc-fr-revtools, .sc-role-page { pointer-events: none; }
.sc-fr-search > *, .sc-fr-revtools > *, .sc-role-page > * { pointer-events: auto; }
.sc-fr-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
.sc-fr-list::-webkit-scrollbar { display: none; }
.sc-fr-row { position: absolute; cursor: pointer; }
.sc-fr-row:not([data-uid]) { cursor: default; }
.sc-fr-row[data-uid]:hover { filter: brightness(1.06); }
.sc-fr-name {
  position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; pointer-events: none;
  font: 12px/17px var(--td-song); color: #a45815; unicode-bidi: isolate;
}
.sc-fr-status { position: absolute; white-space: nowrap; overflow: hidden; text-align: center; pointer-events: none; font: 12px/17px var(--td-song); color: #a45815; }
.sc-fr-off .sc-fr-name, .sc-fr-off .sc-fr-status { color: #999999; }
.sc-fr-lv { position: absolute; background-repeat: no-repeat; pointer-events: none; }
.sc-fr-lv.sc-gray { filter: grayscale(1); opacity: .8; }
.sc-fr-input {
  position: absolute; box-sizing: border-box; border: 0; outline: none; background: transparent; padding: 0 2px; margin: 0;
  font: 12px/17px var(--td-font); color: #0b2e57; -webkit-user-select: text; user-select: text;
}
.sc-fr-badge {
  position: absolute; right: 8px; top: 3px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; display: none;
  background: #e8321e; border: 1px solid #fff; color: #fff; font: bold 10px/12px var(--td-font); text-align: center; pointer-events: none;
}
.sc-fr-badge.on { display: block; }

/* ---------- 送花框 SendFlowerDialog（#td-modal 里 (270,130)） ---------- */
.sc-fl-text { position: absolute; white-space: nowrap; overflow: hidden; pointer-events: none; }
.sc-fl-name { font: bold 14px/18px var(--td-font); color: #ffcc00; text-shadow: 1px 0 #6b3500, -1px 0 #6b3500, 0 1px #6b3500, 0 -1px #6b3500; unicode-bidi: isolate; }
.sc-fl-num, .sc-fl-chg { font: bold 14px/18px var(--td-font); text-shadow: 1px 0 #0b2e57, -1px 0 #0b2e57, 0 1px #0b2e57, 0 -1px #0b2e57; }
.sc-fl-num { color: #fff; }
.sc-fl-chg { color: #00ff00; }
.sc-fl-cost { text-align: center; font: bold 16px/20px var(--td-font); color: #fff; text-shadow: 1px 0 #4a1a4a, -1px 0 #4a1a4a, 0 1px #4a1a4a, 0 -1px #4a1a4a; }
.sc-fl-card { position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none; }
.sc-fl-card.sc-off { filter: grayscale(1) brightness(.85); cursor: default; }
.sc-fl-sel { pointer-events: none; }
.sc-fl-tip {
  position: absolute; display: none; box-sizing: border-box; padding: 4px 6px; border-radius: 4px; pointer-events: none; z-index: 3; white-space: pre-line;
  background: rgba(0, 22, 49, .94); border: 1px solid #3c86c6; color: #fff; font: 12px/16px var(--td-song);
}
.sc-fl-tip.on { display: block; }

/* ---------- 大喇叭 BSpeakerInputBox（舞台正中）/ 购买框 BuySpeakerDialog ---------- */
.sc-horn-input {
  position: absolute; box-sizing: border-box; margin: 0; padding: 2px 4px; border: 0; outline: none; resize: none; background: transparent;
  font: 14px/17px var(--td-font); color: #fff; -webkit-user-select: text; user-select: text; overflow: hidden;
}
.sc-horn-left { position: absolute; text-align: center; font: 14px/16px var(--td-song); color: #fff; pointer-events: none; }
.sc-horn-btn { position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 6px; outline: none; }
.sc-horn-btn:hover { background: rgba(255, 255, 255, .12); }
.sc-horn-btn.sc-off { background: rgba(0, 0, 0, .45); cursor: default; }
.sc-horn-btn.sc-busy { cursor: progress; }
.sc-buy { position: absolute; }
.sc-buy-row { position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none; }
.sc-buy-num, .sc-buy-price { position: absolute; white-space: nowrap; font: bold 15px/20px var(--td-song); color: #6b3500; pointer-events: none; }
.sc-buy-price { text-align: right; }

/* ---------- UserRoleDetail 只读（#td-modal 里 (225,45)） ---------- */
.sc-role-img { background-size: 100% 100%; background-repeat: no-repeat; }
.sc-role-page { position: absolute; }
.sc-role-tab, .sc-role-subtab, .sc-role-close {
  position: absolute; border: 0; margin: 0; padding: 0; background: transparent no-repeat 0 0 / 100% 100%; cursor: pointer; outline: none;
}
.sc-role-tab.sc-off { filter: grayscale(1) brightness(.85); cursor: default; }
.sc-role-text { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font: 13px/18px var(--td-font); color: #fff; }
.sc-role-name { font-weight: bold; text-align: center; unicode-bidi: isolate; }
.sc-role-guild { text-align: center; color: #9ed3fe; }
.sc-role-title { text-align: center; color: #ffe45c; }
.sc-role-avatar { position: absolute; background: no-repeat 50% 0 / contain; pointer-events: none; }
.sc-role-bar { position: absolute; background: rgba(0, 0, 0, .45); border-radius: 5px; overflow: hidden; pointer-events: none; }
.sc-role-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffe27a, #f5a623); }
.sc-role-bartext { text-align: center; font-weight: bold; text-shadow: 1px 1px 0 #000; }
.sc-role-relabel { background: #0b2b4f; color: #cfe3f7; text-align: center; letter-spacing: 2px; font-weight: bold; }
.sc-role-val { font-weight: bold; }
.sc-role-rows { position: absolute; }
.sc-role-row { position: absolute; }
.sc-role-cell { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 12px/18px var(--td-song); color: #fff; }
.sc-role-none .sc-role-cell { color: #b8c8da; }
.sc-role-page-text { text-align: center; font-weight: bold; }
/* 技能页 / 提示框：字体同背包（ui/style.js .w3-wrap），画法和自己背包那一页一样（社交 8 批） */
.sc-role-w3font { font-family: "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }

/* ---------- 游戏设置 →「功能设置」（GameFunSetUp；内容区 (341,190) 278×244 里上下滚） ---------- */
.td-settings .td-settings-tab { pointer-events: auto; cursor: pointer; }
.td-settings-page { position: absolute; left: 0; top: 0; }
.sc-fun { position: absolute; overflow-x: hidden; overflow-y: auto; pointer-events: auto; touch-action: pan-y; scrollbar-width: thin; }
.sc-fun.sc-busy { cursor: progress; }
.sc-fun-inner { position: absolute; }
.sc-fun-row { position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none; }
.sc-fun-row.sc-off { cursor: default; }
.sc-fun-row.sc-off::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(20, 30, 45, .55); }
.sc-fun-chk { pointer-events: none; }
.sc-fun-box { position: absolute; box-sizing: border-box; background: #4d5f73; border: 2px solid #2b3e52; border-radius: 2px; }
.sc-fun-title { position: absolute; text-align: center; font: bold 16px/24px var(--td-font); color: #fff; text-shadow: 1px 1px 0 #0b2e57; letter-spacing: 2px; pointer-events: none; }
.sc-fun-label {
  position: absolute; white-space: nowrap; font: bold 15px/22px var(--td-font); color: #ffb33d; pointer-events: none;
  text-shadow: 1px 0 #3a1500, -1px 0 #3a1500, 0 1px #3a1500, 0 -1px #3a1500;
}
.sc-fun-link {
  position: absolute; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; text-align: left;
  font: bold 14px/22px var(--td-font); color: #8ff0ff; text-decoration: underline; outline: none;
}
.sc-blocklist {
  position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 5;
  background: rgba(0, 22, 49, .96); border: 2px solid #3c86c6; border-radius: 6px;
}
.sc-bl-head { position: absolute; text-align: center; font: bold 14px/26px var(--td-font); color: #fff; }
.sc-bl-x { position: absolute; border: 0; background: transparent; color: #fff; font: bold 18px/22px var(--td-font); cursor: pointer; }
.sc-bl-list { position: absolute; overflow-x: hidden; overflow-y: auto; }
.sc-bl-row { position: absolute; display: flex; align-items: center; gap: 6px; }
.sc-bl-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 13px/26px var(--td-font); color: #d3e9f8; unicode-bidi: isolate; }
.sc-bl-un {
  flex: none; border: 1px solid #0c3a66; border-radius: 4px; background: linear-gradient(#bfe8ff, #5fb4ec); color: #062a4f;
  font: bold 12px/20px var(--td-font); cursor: pointer; padding: 0 6px;
}
.sc-bl-empty { font: 13px/26px var(--td-font); color: #8b95a3; text-align: center; }

/* ---------- 头顶气泡（备战屏 DOM；战斗屏在 canvas 上画） ---------- */
.sc-bubbles { position: absolute; pointer-events: none; z-index: 40; }
.sc-bubble { position: absolute; pointer-events: none; }
.sc-bubble.sc-flip .sc-bb-bg { transform: scaleY(-1); }
.sc-bb-bg { position: absolute; }
.sc-bb-part { position: absolute; background-repeat: no-repeat; }
.sc-bb-text { position: absolute; }
.sc-bb-line {
  white-space: nowrap; font: bold 12px/16px var(--td-font); color: #00313b;
  text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 1px 1px #fff, -1px -1px #fff;
}

/* ---------- 管理员：举报记录 / 举报快照（原作没有聊天举报，【议】；原作蓝框弹窗 ctx.ui.dialog 里，admin_reports.js） ---------- */
.sc-adm-reports, .sc-adm-snap { position: absolute; left: 8px; right: 8px; top: 6px; bottom: 58px; display: flex; flex-direction: column; gap: 4px; }
.sc-adm-head { font: bold 13px/18px var(--td-font); color: #0b2e57; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-adm-list { flex: 1; min-height: 0; overflow-y: auto; background: #e2f3ff; border: 2px solid #5aa3dc; border-radius: 6px; padding: 2px 6px; touch-action: pan-y; }
.sc-adm-row { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #b9dcf5; font: 12px/22px var(--td-font); color: #0b2e57; }
.sc-adm-row:last-child { border-bottom: 0; }
.sc-adm-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; }
.sc-adm-viewed { color: #6b7f93; }
.sc-adm-view, .sc-adm-all {
  flex: none; pointer-events: auto; cursor: pointer; border: 1px solid #0e4580; border-radius: 4px; padding: 0 8px; outline: none;
  background: linear-gradient(#7fd3fb, #2379c2); color: #fff; font: bold 12px/18px var(--td-font);
}
.sc-adm-all { align-self: flex-end; }
.sc-adm-line { font: 12px/18px var(--td-song); color: #0b2e57; white-space: pre-wrap; word-break: break-all; unicode-bidi: isolate; }
.sc-adm-hit { background: #ffe3a3; }
.sc-adm-empty { font: 12px/22px var(--td-font); color: #3d6f9c; text-align: center; }

/* ================= 表情（docs/MEISHI_TD_ROOMLIST_EMOTE.md 第 2 节；图集和每个表情的动画在 web/styles/faces.css，逻辑在 web/app/social/faces.js / face_panel.js） ================= */
/* 聊天行：表情原大 34×34、和文字垂直居中，带表情的那一行跟着撑高（照原作 TextTool 用全角空格占位撑行高） */
.sc-line .sc-face { margin: 0 1px; }
/* 表情面板（原作 a_3646 / a_4698）：6 列 × 5 行，格子 35×35，白底，1 像素 #CCCCCC 格线；从输入条向上弹，右下角对齐 layout 的 face_list */
.sc-facepanel {
  position: absolute; z-index: 8; pointer-events: auto; background: #fff; box-sizing: border-box;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.sc-fp-grid {
  position: absolute; pointer-events: none;
  background-image: linear-gradient(to bottom, #cccccc 1px, transparent 1px), linear-gradient(to right, #cccccc 1px, transparent 1px);
  background-position: 0 0; background-repeat: repeat;
}
.sc-fp-cell {
  position: absolute; box-sizing: border-box; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.sc-fp-cell .sc-face { position: absolute; left: 1px; top: 1px; }
.sc-fp-cell:focus-visible { outline: 1px dotted #0000ff; outline-offset: -2px; }
/* 悬停：格子外圈 1 像素蓝框；70×70 白底蓝框预览（GIF 原大居中、会动）；鼠标处米黄底黑框提示（原作 a_4700 / a_4697） */
.sc-fp-border { position: absolute; box-sizing: border-box; border: 1px solid #0000ff; pointer-events: none; z-index: 2; }
.sc-fp-preview { position: absolute; box-sizing: border-box; background: #fff; border: 1px solid #0000ff; pointer-events: none; z-index: 3; }
.sc-fp-preview .sc-face { position: absolute; left: 17px; top: 17px; }
.sc-fp-tip {
  position: absolute; z-index: 4; pointer-events: none; white-space: nowrap; padding: 1px 2px; box-sizing: border-box;
  background: #fcfce0; border: 1px solid #000; color: #000; font: 12px/16px var(--td-song);
}
/* 大喇叭框里的面板压在框上面（框 z 6） */
.sc-hornbox .sc-facepanel { z-index: 12; }
/* 头顶气泡里带表情的行（行高 34，文字垂直居中） */
.sc-bb-line .sc-face { vertical-align: middle; }
/* 顶部滚动条（25 高）：表情 34 原大、和文字垂直居中，上下被裁（原作滚动条也用遮罩裁）；负的上下外边距让它不撑高这一行 */
.sc-mq-text .sc-face { vertical-align: middle; margin: -8px 1px; }
/* ---------- 邮件 TDMailUI（docs/MEISHI_TD_MAIL_TRADE.md §1.7；#td-modal 里 (88,63)，逻辑在 web/app/mail/） ---------- */
.ml-win { position: absolute; pointer-events: auto; z-index: 7; font-family: var(--td-song); -webkit-user-select: none; user-select: none; }
.ml-panel, .ml-edit, .ml-list, .ml-detail, .ml-rows { position: absolute; }
.ml-input {
  box-sizing: border-box; border: 0; outline: none; margin: 0; padding: 0 4px; background: transparent; pointer-events: auto;
  font: 12px/20px var(--td-song); color: #4a2a00; -webkit-user-select: text; user-select: text;
}
.ml-input.ml-to { padding-right: 70px; }
.ml-input:focus, .ml-body:focus { background: rgba(255, 255, 255, .35); }
.ml-no { position: absolute; text-align: right; padding-right: 4px; box-sizing: border-box; font: bold 12px/20px var(--td-font); color: #a45815; pointer-events: none; }
.ml-body {
  box-sizing: border-box; border: 0; outline: none; margin: 0; padding: 2px 6px; resize: none; background: transparent; pointer-events: auto;
  font: 13px/24px var(--td-song); color: #4a2a00; overflow-y: auto; scrollbar-width: thin; -webkit-user-select: text; user-select: text;
}
.ml-count { position: absolute; text-align: right; font: 11px/14px var(--td-font); color: #b08a5a; pointer-events: none; }
.ml-count.ml-over { color: #d0321e; font-weight: bold; }
.ml-attach-off {
  position: absolute; box-sizing: border-box; border-radius: 9px; background: rgba(90, 90, 90, .55); color: #fff; cursor: default;
  display: flex; align-items: center; justify-content: center; font: bold 13px/18px var(--td-font); text-shadow: 0 1px 1px #000; pointer-events: auto;
}
.ml-gray { filter: grayscale(1) brightness(.85); }
/* 附件格（第二步附件信开着）：点了开小背包；放了东西显示图标 + 名字 ×n，再点退回 */
.ml-attach-on {
  position: absolute; box-sizing: border-box; border-radius: 9px; border: 2px dashed rgba(164, 88, 21, .45); color: #a45815; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font: bold 13px/18px var(--td-font); pointer-events: auto;
}
.ml-attach-on.ml-attach-full { justify-content: flex-start; padding-left: 58px; border-style: solid; }
.ml-attach-name { font: bold 12px/16px var(--td-font); color: #7a3d00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-pay-hit { position: absolute; pointer-events: auto; cursor: default; }
.ml-postage { position: absolute; text-align: right; font: bold 13px/18px var(--td-font); color: #ffe45c; text-shadow: 0 1px 1px #000; pointer-events: none; }
.ml-tab { position: absolute; border: 0; padding: 0; margin: 0; background: transparent no-repeat; cursor: pointer; pointer-events: auto; outline: none; }
.ml-tab:not(.on):hover { filter: brightness(1.08); }
.ml-row { position: absolute; cursor: pointer; pointer-events: auto; outline: none; }
.ml-row:hover, .ml-row.ml-sel { filter: brightness(1.05); }
.ml-row.ml-sel::after { content: ''; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 2px #ffd200; pointer-events: none; }
.ml-rtext { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; font: 12px/16px var(--td-song); color: #b86725; }
.ml-rtitle { font-weight: bold; color: #7a3d00; }
.ml-stamp { pointer-events: none; }
.ml-flip { transform: scaleX(-1); }
.ml-page { position: absolute; text-align: center; pointer-events: none; font: 18px/22px var(--td-song); color: #fff; }
.ml-report { position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; pointer-events: auto; outline: none; }
.ml-report:active { filter: brightness(1.1); }
.ml-report-t {
  position: absolute; left: 0; top: 0; width: 79px; line-height: 31px; text-align: center; pointer-events: none;
  font: 900 15px/31px var(--td-font); color: #fff; letter-spacing: 2px;
  text-shadow: 1px 0 #7a3000, -1px 0 #7a3000, 0 1px #7a3000, 0 -1px #7a3000;
}
.ml-dtext { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 12px/20px var(--td-song); color: #4a2a00; padding-left: 4px; box-sizing: border-box; }
.ml-who { font-weight: bold; }
.ml-dbody {
  position: absolute; box-sizing: border-box; padding: 2px 6px; overflow-y: auto; scrollbar-width: thin; touch-action: pan-y; pointer-events: auto;
  font: 13px/24px var(--td-song); color: #4a2a00; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text;
}
.ml-goods { position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: default; pointer-events: auto; outline: none; }
.ml-goods.ml-claimable { cursor: pointer; }
.ml-goods.ml-claimable:hover { filter: brightness(1.06); }
.ml-goods.ml-claimed { filter: grayscale(1); }
.ml-goods-icon { position: absolute; background: no-repeat center / contain; pointer-events: none; }
.ml-goods-text { position: absolute; overflow: hidden; pointer-events: none; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.ml-goods-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: bold 12px/16px var(--td-song); color: #6b3500; }
.ml-paytext { position: absolute; white-space: normal; pointer-events: none; font: 14px/17px var(--td-song); color: #b86725; }
.ml-paytext.ml-pay-on { white-space: pre-line; font: bold 13px/18px var(--td-song); color: #d23c1e; } /* 付费取信的价钱（原作这一格写取信费） */
.ml-pay-in.ml-off { opacity: 0.55; }
.ml-chk.ml-gray { filter: grayscale(1); opacity: 0.6; }
/* 左上「邮件」角标和「新邮件」气泡（原作 RoomAvatarInfo.emailTipMc，15 帧上下晃；点了打开邮箱） */
.ml-tip { pointer-events: auto; cursor: pointer; animation: ml-tip-bob 1.2s ease-in-out infinite; }
@keyframes ml-tip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* 手机（粗指针）：小按钮的点击范围往外扩，缩到 0.65 倍时也不小于 32 CSS 像素 */
@media (pointer: coarse) {
  .ml-win .sc-btn::after, .ml-win .ml-tab::after, .ml-win .ml-report::after, .ml-tip::after {
    content: ''; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px;
  }
  .ml-win .ml-tab::after { top: -11px; bottom: -11px; }
  .ml-win .ml-close::after { left: -8px; right: -12px; top: -12px; bottom: -12px; }
  .ml-win .ml-small::after { content: ''; position: absolute; left: -15px; right: -15px; top: -15px; bottom: -15px; }
  /* 行右上 ×（32×19）：往左、往下扩（上面挨着上一行），手机上删信前另外确认一次（mail_list.js） */
  .ml-win .ml-row .ml-small::after { left: -10px; right: -8px; top: -6px; bottom: -26px; }
}