/* ============ 彩虹娱乐 · 深色高级主题 ============ */
:root {
  --rainbow: linear-gradient(100deg, #ff6b6b, #ff9f45, #ffe066, #63e6be, #4dabf7, #b197fc);
  --rainbow-soft: linear-gradient(135deg, #6b8bff, #a86bff, #ff6bcb);
  --text: #efeaf6;
  --muted: #a29bb5;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.10);
  --radius: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden; color: var(--text);
  background:
    radial-gradient(1100px 560px at 12% -12%, rgba(177,151,252,.22), transparent 60%),
    radial-gradient(950px 500px at 105% 8%, rgba(77,171,247,.16), transparent 55%),
    radial-gradient(900px 620px at 50% 120%, rgba(255,107,107,.14), transparent 60%),
    linear-gradient(160deg, #0f0d17, #16121f 55%, #120f1a);
}
.hidden { display: none !important; }
img { max-width: 100%; }

/* ---------- 居中页（登录/审核/马甲名/被拒） ---------- */
.login, .center-page {
  height: 100%; display: flex; align-items: center; justify-content: center; padding: 22px;
}



.login-card input, .center-page input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
  font-size: 16px; outline: none; color: var(--text); background: rgba(255,255,255,.06); transition: border-color .2s, box-shadow .2s;
}
.login-card input::placeholder, .center-page input::placeholder { color: #8b83a0; }
.login-card input:focus, .center-page input:focus { border-color: #a86bff; box-shadow: 0 0 0 3px rgba(168,107,255,.22); }
.center-page button, #enterBtn, #devLoginBtn, #nickBtn {
  width: 100%; margin-top: 14px; padding: 14px; border: none; border-radius: 14px; cursor: pointer;
  color: #fff; font-size: 16px; font-weight: 700; background: var(--rainbow-soft);
  box-shadow: 0 10px 30px rgba(168,107,255,.35);
}
.center-page button:active, #devLoginBtn:active { transform: translateY(1px); }

.dev-box { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--border); }
.dev-tip { font-size: 11px; color: #6f6885; margin-bottom: 8px; }
.dev-box input { margin-bottom: 6px; }
#tgWidget { margin-top: 8px; min-height: 20px; display: flex; justify-content: center; }

.spinner {
  width: 34px; height: 34px; margin: 20px auto 0; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: #b197fc; animation: spin .9s linear infinite;
}
.myid-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.myid-label { color: var(--muted); font-size: 14px; }
#myTgId { color: #ffd93d; font-size: 18px; font-weight: 800; letter-spacing: 1px; user-select: all; }
.copy-id-btn { border: none; border-radius: 9px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--rainbow-soft); color: #fff; }
.invite-err { margin-top: 12px; color: #ff7a7a; font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 聊天页 ---------- */
.chat { height: 100%; display: flex; flex-direction: column; position: relative; }

.topbar {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px; z-index: 5;
  background: rgba(18,15,26,.72); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rainbow); opacity: .9; }
.group-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; background: conic-gradient(from 210deg, #ff6b6b, #ffe066, #63e6be, #4dabf7, #b197fc, #ff6b6b);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.group-meta { flex: 1; min-width: 0; }
.group-name { font-size: 17px; font-weight: 700; }
.group-status { font-size: 12px; color: var(--muted); }
.icon-btn {
  background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.icon-btn:active { background: rgba(255,255,255,.08); }

/* 置顶栏 */
.pinned-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; z-index: 4; cursor: pointer;
  background: rgba(255,217,61,.1); border-bottom: 1px solid rgba(255,217,61,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pinned-bar:active { background: rgba(255,217,61,.18); }
.msg-row.msg-flash .bubble { animation: flashPulse 1.6s ease-out; }
@keyframes flashPulse { 0% { box-shadow: 0 0 0 0 rgba(255,217,61,.95); } 100% { box-shadow: 0 0 0 10px rgba(255,217,61,0); } }
.pin-icon { font-size: 16px; flex-shrink: 0; }
.pin-count { flex-shrink: 0; font-size: 11px; font-weight: 800; color: #ffd93d; background: rgba(255,217,61,.15); border: 1px solid rgba(255,217,61,.4); border-radius: 8px; padding: 1px 6px; }
.pin-count.hidden { display: none; }
.pin-content { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; overflow: hidden; }
.pin-name { font-weight: 700; color: #ffd93d; }
.pin-text { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinned-bar .icon-btn { font-size: 18px; width: 30px; height: 30px; }

.messages { flex: 1; overflow-y: auto; padding: 14px 10px 8px; }

.msg-row { display: flex; align-items: flex-end; gap: 8px; margin: 3px 0; }
.msg-row.me { flex-direction: row-reverse; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.avatar.spacer { visibility: hidden; }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.bubble {
  max-width: 76%; border-radius: var(--radius); padding: 8px 11px 6px; position: relative;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 15px; line-height: 1.4;
  word-break: break-word; box-shadow: 0 3px 14px rgba(0,0,0,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.msg-row.me .bubble {
  background: var(--rainbow-soft); border: none; color: #fff;
  box-shadow: 0 6px 20px rgba(168,107,255,.35);
}
.bubble .sender { font-size: 13px; font-weight: 700; margin-bottom: 2px; display: flex; align-items: center; }
.bubble .sender-mine { justify-content: flex-end; }
.admin-badge {
  position: relative; overflow: hidden;
  margin-left: 6px; font-size: 10px; font-weight: 800; color: #fff; padding: 2px 9px; border-radius: 9px; letter-spacing: .5px; white-space: nowrap;
  background: linear-gradient(100deg, #ff2d55, #ff9500, #ffe14d, #34c759, #5ac8fa, #af52de, #ff2d55);
  background-size: 300% auto; border: 1px solid rgba(255,255,255,.45);
  animation: rankShine 2.4s linear infinite, adminGlow 1.7s ease-in-out infinite;
}
.admin-badge::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg); animation: adminSweep 2.6s ease-in-out infinite;
}
@keyframes adminGlow { 0%,100% { box-shadow: 0 0 7px rgba(255,120,60,.6); } 50% { box-shadow: 0 0 20px rgba(255,210,90,1); } }
@keyframes adminSweep { 0% { left: -60%; } 45%,100% { left: 135%; } }
.bubble .text { white-space: pre-wrap; }
.bubble .text.emoji-only { font-size: 46px; line-height: 1.1; }
.bubble img.photo { display: block; max-width: 250px; width: 100%; border-radius: 12px; margin: 3px 0; }

.reply-quote {
  border-left: 3px solid #b197fc; background: rgba(255,255,255,.07);
  border-radius: 8px; padding: 4px 9px; margin-bottom: 4px; font-size: 13px; cursor: pointer;
}
.msg-row.me .reply-quote { border-left-color: #fff; background: rgba(255,255,255,.18); }
.reply-quote .rq-name { font-weight: 700; }
.reply-quote .rq-text { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row.me .reply-quote .rq-text { color: rgba(255,255,255,.8); }

.time { font-size: 11px; color: var(--muted); float: right; margin: 6px 0 0 10px; }
.msg-row.me .time { color: rgba(255,255,255,.8); }

/* 贴纸消息（无气泡） */
.bubble.sticker-msg { background: none !important; border: none; box-shadow: none; padding: 2px 0; backdrop-filter: none; }
.bubble.sticker-msg .time { color: var(--muted); }
.sticker-img { display: block; width: 138px; height: 138px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); }

/* 系统消息 / 日期 */
.system-msg { text-align: center; margin: 12px 0; }
.system-msg span {
  background: rgba(255,255,255,.09); color: var(--muted); font-size: 12px; padding: 5px 14px; border-radius: 14px;
  border: 1px solid var(--border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* 回复条 */
.reply-bar {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  background: rgba(18,15,26,.85); border-top: 1px solid var(--border);
}
.reply-bar-line { width: 3px; align-self: stretch; border-radius: 3px; background: var(--rainbow); }
.reply-bar-content { flex: 1; min-width: 0; }
.reply-bar-name { font-size: 13px; font-weight: 700; color: #c9b6ff; }
.reply-bar-text { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 输入栏 */
.composer {
  display: flex; align-items: flex-end; gap: 5px; padding: 9px 10px;
  background: rgba(18,15,26,.82); border-top: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
#msgInput {
  flex: 1; border: none; outline: none; font-size: 16px; padding: 10px 8px; background: none; color: var(--text);
  font-family: inherit; line-height: 1.35; resize: none; max-height: 120px; overflow-y: auto;
}
.composer .icon-btn, .composer .send-btn { margin-bottom: 1px; }
#msgInput::placeholder { color: #7d7592; }
.send-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; color: #fff; font-size: 18px; cursor: pointer;
  flex-shrink: 0; background: var(--rainbow); box-shadow: 0 6px 18px rgba(168,107,255,.45);
}
.send-btn:active { transform: scale(.94); }

/* ---------- 表情/贴纸面板 ---------- */
.picker-panel {
  position: absolute; bottom: 62px; left: 0; right: 0; height: 312px; z-index: 6;
  display: flex; flex-direction: column;
  background: rgba(20,16,30,.96); border-top: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.picker-content { flex: 1; overflow-y: auto; padding: 10px; display: grid; gap: 8px; align-content: start; }
.picker-content.emoji-grid { grid-template-columns: repeat(8, 1fr); }
.picker-content.emoji-grid span { font-size: 26px; text-align: center; cursor: pointer; padding: 3px; border-radius: 10px; }
.picker-content.emoji-grid span:active { background: rgba(255,255,255,.1); }
.picker-content.sticker-grid { grid-template-columns: repeat(4, 1fr); }
.sticker-thumb { width: 100%; aspect-ratio: 1; object-fit: contain; cursor: pointer; border-radius: 12px; padding: 5px; }
.sticker-thumb:active { background: rgba(255,255,255,.1); }

.picker-tabs {
  display: flex; gap: 5px; padding: 7px 9px; border-top: 1px solid var(--border);
  background: rgba(12,10,18,.6); overflow-x: auto; flex-shrink: 0;
}
.picker-tab {
  flex-shrink: 0; width: 44px; height: 44px; border: none; background: none; border-radius: 12px;
  font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px;
}
.picker-tab.active { background: rgba(168,107,255,.22); box-shadow: inset 0 0 0 1px rgba(177,151,252,.5); }
.picker-tab img { width: 100%; height: 100%; object-fit: contain; }

/* 管理员操作菜单（底部弹出） */
.action-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; }
.action-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.action-menu {
  position: relative; width: 100%; padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; animation: sheetup .18s ease;
}
@keyframes sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.action-item {
  width: 100%; padding: 15px; border: none; border-radius: 14px; font-size: 16px; font-weight: 600; cursor: pointer;
  background: rgba(30,26,42,.96); color: var(--text); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.action-item:active { background: rgba(45,40,60,.98); }
.action-item.danger { color: #ff7a7a; }
.action-item.cancel { background: rgba(20,16,30,.96); color: var(--muted); font-weight: 700; margin-top: 2px; }
.action-item.header { background: transparent; border: none; color: var(--muted); font-size: 13px; font-weight: 700; padding: 6px; pointer-events: none; }
.action-item.save { background: var(--rainbow-soft); color: #fff; border: none; }

/* 修改昵称弹窗 */
.nick-modal {
  position: relative; margin: auto; width: calc(100% - 32px); max-width: 380px; align-self: center;
  background: rgba(28,24,40,.98); border: 1px solid var(--border); border-radius: 20px; padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  max-height: 88vh; overflow-y: auto;
}
#tierRows { max-height: 210px; overflow-y: auto; margin-top: 2px; }
.tier-chip { font-size: 12px; padding: 4px 11px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid var(--border); color: #fff; cursor: pointer; }
.tier-chip .x { opacity: .6; margin-left: 5px; }
#nickModal, #drawModal, #inviteGenModal, #rankModal { align-items: center; }

/* 身份境界标签（越高越炫） */
.rank-tag { margin-left: 6px; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 8px; letter-spacing: .5px; color: #fff; white-space: nowrap; }
.rank-tag[data-tier="0"] { background: #6b7280; }
.rank-tag[data-tier="1"] { background: #3f9142; }
.rank-tag[data-tier="2"] { background: #0e9488; }
.rank-tag[data-tier="3"] { background: #2563eb; }
.rank-tag[data-tier="4"] { background: linear-gradient(135deg, #f5c542, #e0a020); color: #4a2e00; }
.rank-tag[data-tier="5"] { background: linear-gradient(135deg, #9b5cff, #6b3fd1); }
.rank-tag[data-tier="6"] { background: linear-gradient(135deg, #ff5cc8, #c026a3); }
.rank-tag[data-tier="7"] { background: linear-gradient(135deg, #ff7a45, #ff3d3d); box-shadow: 0 0 8px rgba(255,80,60,.6); }
.rank-tag[data-tier="8"] { background: var(--rainbow); box-shadow: 0 0 10px rgba(177,151,252,.7); }
.rank-tag[data-tier="9"] { background: var(--rainbow); background-size: 220% auto; animation: rankShine 2s linear infinite; box-shadow: 0 0 14px rgba(255,215,80,.9); color: #3a2600; }
/* 官方职位（宗门长老/圣女）—— 流光炫酷 */
.rank-tag[data-tier="10"] { background: linear-gradient(100deg, #7c3aed, #ffd93d, #7c3aed); background-size: 220% auto; color: #fff; box-shadow: 0 0 12px rgba(180,120,255,.85); animation: rankShine 2.2s linear infinite; }
.rank-tag[data-tier="11"] { background: linear-gradient(100deg, #ff8fc7, #ffffff, #ff8fc7); background-size: 220% auto; color: #b3145f; box-shadow: 0 0 13px rgba(255,143,199,.9); animation: rankShine 2.4s linear infinite; }
.rank-tag[data-tier="12"] {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, #17c9c0, #7cf5d8, #4dd6ff, #17c9c0);
  background-size: 260% auto; color: #05463f; border: 1px solid rgba(255,255,255,.55);
  text-shadow: 0 1px 2px rgba(255,255,255,.4);
  animation: rankShine 2.4s linear infinite, mintGlow 1.6s ease-in-out infinite;
}
.rank-tag[data-tier="12"]::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform: skewX(-20deg); animation: adminSweep 2.8s ease-in-out infinite;
}
@keyframes mintGlow { 0%,100% { box-shadow: 0 0 8px rgba(60,230,210,.7); } 50% { box-shadow: 0 0 22px rgba(90,245,220,1), 0 0 34px rgba(60,210,255,.6); } }
@keyframes rankShine { to { background-position: 220% center; } }

/* 授予身份选择 */
.rank-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.rank-choice { padding: 11px 4px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.06); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }
.rank-choice:active { background: rgba(255,255,255,.14); }
.rank-choice.clear { grid-column: span 3; color: var(--muted); background: transparent; }
.rank-choice[data-tier="10"] { grid-column: span 3; background: linear-gradient(100deg, #7c3aed, #ffd93d, #7c3aed); background-size: 220% auto; animation: rankShine 2.2s linear infinite; color: #fff; border: none; }
.rank-choice[data-tier="11"] { grid-column: span 3; background: linear-gradient(100deg, #ff8fc7, #fff, #ff8fc7); background-size: 220% auto; animation: rankShine 2.4s linear infinite; color: #b3145f; border: none; }
.rank-choice[data-tier="12"] { grid-column: span 3; background: linear-gradient(100deg, #17c9c0, #7cf5d8, #4dd6ff, #17c9c0); background-size: 220% auto; animation: rankShine 2.6s linear infinite; color: #05463f; border: none; }
/* 置顶消息详情弹窗 */
.pin-popup { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pin-popup.hidden { display: none; }
.pin-popup-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.pin-popup-card { position: relative; width: 100%; max-width: 340px; background: var(--panel, #1b1726); border: 1px solid rgba(255,217,61,.35);
  border-radius: 18px; padding: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 22px rgba(255,217,61,.2); }
.pin-popup-head { font-size: 15px; font-weight: 800; color: #ffd93d; margin-bottom: 12px; }
.pin-popup-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.pin-popup-text { font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow-y: auto; }
.pin-popup-close { margin-top: 18px; width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--rainbow-soft, #7b6cff); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }

/* 右下角悬浮按钮：@提及 / 回到最新 */
.fab-col { position: absolute; right: 12px; bottom: 78px; z-index: 40; display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
.fab { pointer-events: auto; position: relative; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--panel, #23202e); color: var(--text, #fff); box-shadow: 0 6px 18px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
  transition: transform .12s, opacity .2s; }
.fab:active { transform: scale(.92); }
.fab.hidden { display: none; }
.fab-icon { font-size: 22px; font-weight: 700; line-height: 1; }
.fab-chevron { font-size: 30px; margin-top: -6px; }
.fab-badge { position: absolute; top: -5px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #2ea6ff; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.fab-badge.hidden { display: none; }

/* @ 成员选择浮层 */
.mention-box { position: absolute; left: 10px; right: 10px; bottom: 66px; z-index: 45; max-height: 210px; overflow-y: auto;
  background: var(--panel, #1b1726); border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 14px; padding: 6px; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
.mention-box.hidden { display: none; }
.mention-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.mention-item:active { background: rgba(255,255,255,.1); }
.mention-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.mention-av img { width: 100%; height: 100%; object-fit: cover; }
.mention-nm { font-size: 15px; font-weight: 600; color: var(--text, #fff); }

/* 权限分配 */
.perm-list { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; max-height: 46vh; overflow-y: auto; }
.perm-item { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text, #fff); }
.perm-item:active { background: rgba(255,255,255,.08); }
.perm-item input[type="checkbox"] { width: 22px; height: 22px; min-width: 22px; padding: 0; margin: 0; border: none; border-radius: 6px; background: none; accent-color: #7b6cff; flex: 0 0 auto; }
.perm-item input[type="checkbox"]:disabled { opacity: .5; }
.perm-item span { flex: 1; }
.perm-hint { margin-top: 10px; font-size: 12px; color: #ffd07a; text-align: center; }
.perm-hint.hidden { display: none; }

/* 管理员成员管理面板 */
.member-modal { position: fixed; inset: 0; z-index: 82; display: flex; align-items: center; justify-content: center; padding: 20px; }
.member-modal.hidden { display: none; }
.member-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.member-card { position: relative; width: 100%; max-width: 380px; max-height: 80vh; display: flex; flex-direction: column;
  background: var(--panel, #1b1726); border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 18px; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.member-head { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.member-stats { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.member-stats b { color: var(--text, #fff); font-weight: 800; }
.member-stats .ms-on { color: #46d17a; }
.member-stats .ms-off { color: #9aa0ad; }
.member-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.member-row { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 10px; }
.member-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.member-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #46d17a; box-shadow: 0 0 7px rgba(70,209,122,.8); }
.member-row.offline .member-dot { background: #6b7280; box-shadow: none; }
.member-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--text, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-row.offline .member-name { color: #9aa0ad; }
.member-st { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.member-row.offline .member-st { color: #7c828e; }
.member-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.member-close { margin-top: 14px; padding: 12px; border: none; border-radius: 12px; background: var(--rainbow-soft, #7b6cff); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
/* 真实资料弹窗：内容较多，收紧行距 + 放宽高度，让其一屏放下不用滑 */
#userInfoModal .member-card { max-height: 92vh; }
#userInfoModal .member-head { margin-bottom: 6px; }
#userInfoModal .member-row { padding: 6px 10px; }
#userInfoModal .member-close { margin-top: 8px; padding: 10px; }

/* 拖拽图片到聊天窗口 */
.chat.drag-over::after { content: "松开发送图片"; position: absolute; inset: 10px; z-index: 60; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; background: rgba(123,108,255,.25); border: 2px dashed rgba(255,255,255,.7); border-radius: 18px; pointer-events: none; }
.bubble img.photo { cursor: zoom-in; }

/* 图片放大查看 */
.img-viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.img-viewer.hidden { display: none; }
.img-viewer-pic { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* 消息里的 @提及 高亮 */
.mention { color: #4db6ff; font-weight: 600; }
.mention-me { color: #ffd93d; background: rgba(255,217,61,.16); border-radius: 5px; padding: 0 3px; }
.msg-row.me .mention { color: #d9ecff; }
.msg-row.me .mention-me { color: #fff5c2; background: rgba(255,255,255,.22); }

.gen-result { margin-top: 14px; text-align: center; }
.gen-code { font-size: 30px; font-weight: 800; letter-spacing: 5px; color: #ffd93d; padding: 14px; background: rgba(255,217,61,.1); border: 1px solid rgba(255,217,61,.4); border-radius: 12px; user-select: all; }
.gen-bound { font-size: 12px; color: var(--muted); margin-top: 8px; }
.gen-copy { margin-top: 12px; width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--rainbow-soft); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.nick-title { font-size: 18px; font-weight: 800; text-align: center; }
.nick-sub { font-size: 12px; color: var(--muted); text-align: center; margin: 6px 0 16px; }
.nick-modal input {
  width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px;
  font-size: 16px; outline: none; color: var(--text); background: rgba(255,255,255,.06);
}
.nick-modal input:focus { border-color: #a86bff; box-shadow: 0 0 0 3px rgba(168,107,255,.22); }
.nick-btns { display: flex; gap: 10px; margin-top: 16px; }
.nick-btns .action-item { margin: 0; }

/* ---------- 抽奖卡片 ---------- */
.draw-card {
  margin: 12px auto; max-width: 90%; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(168,107,255,.16), rgba(77,171,247,.12));
  border: 1px solid rgba(177,151,252,.35); box-shadow: 0 6px 22px rgba(0,0,0,.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.draw-card .dc-head { font-size: 16px; font-weight: 800; }
.draw-card .dc-sub { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.draw-card .dc-count { color: #ffd93d; }
.dc-countdown { color: #ffd93d; font-weight: 700; }
.draw-mode-row { display: flex; gap: 6px; margin-top: 12px; }
.draw-mode-btn { flex: 1; padding: 9px 4px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.draw-mode-btn.active { background: var(--rainbow-soft); color: #fff; border-color: transparent; }
.dc-actions { display: flex; gap: 8px; }
.dc-join, .dc-start {
  flex: 1; padding: 10px; border: none; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; color: #fff;
}
.dc-join { background: var(--rainbow-soft); }
.dc-join.joined { background: rgba(255,255,255,.12); color: var(--muted); }
.dc-start { background: linear-gradient(135deg, #ffb300, #ff7a45); flex: 0 0 40%; }
.dc-winners { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 700; align-items: center; max-height: 160px; overflow-y: auto; }
.dc-replay-hint {
  display: block; margin: 10px auto 2px;
  width: min(78%, 260px); height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(160,110,255,.45));
  transition: transform .16s ease, filter .16s ease;
  cursor: pointer;
}
.draw-card:active .dc-replay-hint { transform: scale(.965); filter: drop-shadow(0 0 13px rgba(200,150,255,.75)); }
.dw-win { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,217,61,.15); border: 1px solid rgba(255,217,61,.4); padding: 3px 10px 3px 3px; border-radius: 14px; font-size: 13px; }
.dw-av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; }
.dw-av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 开奖动画舞台 ---------- */
.draw-stage {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; overflow-y: auto; padding: 24px 16px;
  background: radial-gradient(circle at 50% 40%, rgba(40,30,60,.96), rgba(10,8,16,.98));
}
.draw-stage-title { font-size: 22px; font-weight: 800; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; padding: 0 20px; }
.draw-spotlight { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.spot-avatar {
  width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 52px; font-weight: 800; color: #fff; overflow: hidden;
  box-shadow: 0 0 0 5px rgba(255,255,255,.12), 0 0 46px rgba(177,151,252,.75); transition: transform .1s;
}
.spot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spot-avatar.spot-hit { animation: hit .6s ease; box-shadow: 0 0 0 6px #ffd93d, 0 0 70px #ffd93d; }
@keyframes hit { 0%,100% { transform: scale(1); } 30% { transform: scale(1.28); } 60% { transform: scale(.95); } }
.spot-name { font-size: 22px; font-weight: 800; }
.draw-winners { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 92%; max-height: 46vh; overflow-y: auto; }
.dw-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,217,61,.16); border: 1px solid rgba(255,217,61,.5); padding: 5px 12px 5px 5px; border-radius: 18px; font-weight: 700; }
.dw-chip .dw-av { width: 30px; height: 30px; font-size: 14px; }
.draw-stage-close { padding: 12px 40px; border: none; border-radius: 14px; background: var(--rainbow-soft); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
.draw-stage-close.done { background: var(--rainbow); color: #2a1800; box-shadow: 0 0 24px rgba(255,215,120,.7); animation: doneP 1.3s ease-in-out infinite; }
@keyframes doneP { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.confetti-bit { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2s linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(20,16,30,.92); color: #fff; padding: 10px 18px; border-radius: 22px; font-size: 14px; z-index: 50;
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* ================= 仙侠换肤（覆盖层，v1）================= */
.chat { background: #0b0818 url("/assets/bg.jpg?2") center top / cover no-repeat; isolation: isolate; }
.chat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,20,.50) 0%, rgba(8,6,20,.30) 38%, rgba(8,6,20,.78) 100%); }
.messages { background: transparent; }

/* 顶栏 + 渐变仙侠标题 */
.topbar { background: rgba(12,9,26,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.group-name { font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(100deg,#ffe08a,#ff9f45,#ffe066,#b197fc,#6bd6ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 16px rgba(180,150,255,.35); }

/* 消息气泡：紫光毛玻璃（贴纸消息不受影响） */
.msg-row .bubble:not(.sticker-msg) {
  background: rgba(42,33,74,.55) !important; border: 1px solid rgba(155,125,255,.45) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 14px rgba(130,90,240,.32), inset 0 0 12px rgba(120,90,220,.12); }
.msg-row.me .bubble:not(.sticker-msg) {
  background: linear-gradient(135deg, rgba(140,90,255,.6), rgba(190,80,220,.52)) !important;
  border: 1px solid rgba(205,165,255,.6) !important;
  box-shadow: 0 0 18px rgba(180,110,255,.5); color: #fff; }

/* 头像金环（临时用发光环，等金框 PNG 到位再换） */
.avatar { border: none !important; box-shadow: 0 0 0 2px rgba(255,214,130,.9), 0 0 12px rgba(255,190,90,.55); }
.avatar.spacer { box-shadow: none; }

/* 境界标签 + 管理员徽章更"金/发光" */
.rank-tag { border: 1px solid rgba(255,255,255,.18); }
.admin-badge { box-shadow: 0 0 10px rgba(255,200,90,.5); }

/* 公告栏：金框玻璃 */
.pinned-bar { background: rgba(28,20,52,.58) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,210,130,.42) !important; box-shadow: 0 0 14px rgba(255,190,90,.2); }

/* 输入区玻璃质 */
.composer { background: rgba(12,9,26,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,210,130,.25); }

/* 系统消息/日期分隔 */
.system-msg span { background: rgba(28,20,52,.6); border: 1px solid rgba(255,210,130,.18); }

/* ================= 仙侠换肤 v2（更强烈）================= */
.msg-row .bubble:not(.sticker-msg) {
  border-radius: 16px !important; border-width: 1.5px !important;
  box-shadow: 0 0 22px rgba(140,100,255,.5), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.msg-row.me .bubble:not(.sticker-msg) {
  box-shadow: 0 0 26px rgba(190,110,255,.6), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* 境界标签：更大更亮的发光胶囊 */
.rank-tag { font-size: 11px !important; padding: 2px 10px !important; border-radius: 11px !important; font-weight: 900 !important; }
/* 管理员：金色胶囊 + 发光 */
.admin-badge { background: linear-gradient(135deg,#ffcf5a,#ff9a3c) !important; color: #3a2600 !important;
  font-weight: 900 !important; border-radius: 11px !important; padding: 1px 9px !important;
  box-shadow: 0 0 12px rgba(255,180,60,.65) !important; }
.admin-badge::before { display: none !important; }
/* 头像：更粗更亮金环 */
.avatar:not(.spacer) { box-shadow: 0 0 0 2.5px #ffce6b, 0 0 15px rgba(255,190,80,.75) !important; }
/* 昵称发光 */
.bubble .sender-name { text-shadow: 0 0 8px rgba(180,150,255,.45); }
/* 群名更大气 */
.group-name { font-size: 18px !important; }
/* 公告栏金框加亮 */
.pinned-bar { border: 1.5px solid rgba(255,210,130,.6) !important; box-shadow: 0 0 16px rgba(255,190,90,.28) !important; }
/* 输入框玻璃质加描边 */
#msgInput { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(180,150,255,.3) !important; }

/* ================= 仙侠换肤 v3：抽奖卡宝箱 ================= */
.draw-card { position: relative; overflow: hidden; padding-right: 96px !important; }
.draw-card::after {
  content: ""; position: absolute; right: -4px; bottom: -6px; width: 106px; height: 98px; z-index: 0;
  background: url("/assets/chest.png") center/contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 0 9px rgba(175,90,255,.55));
}
.draw-card > * { position: relative; z-index: 1; }

/* ================= 仙侠换肤 v4：13 境界专属气泡 ================= */
.msg-row .bubble[data-tier]:not(.sticker-msg) { border-width: 1.5px !important; }
.msg-row .bubble[data-tier="0"]:not(.sticker-msg)  { border-color: rgba(150,160,175,.5)!important;  box-shadow: 0 0 10px rgba(120,130,145,.3)!important; }
.msg-row .bubble[data-tier="1"]:not(.sticker-msg)  { border-color: rgba(90,205,110,.6)!important;   box-shadow: 0 0 13px rgba(60,190,85,.42)!important; }
.msg-row .bubble[data-tier="2"]:not(.sticker-msg)  { border-color: rgba(40,205,190,.6)!important;   box-shadow: 0 0 13px rgba(20,190,170,.42)!important; }
.msg-row .bubble[data-tier="3"]:not(.sticker-msg)  { border-color: rgba(80,140,255,.62)!important;  box-shadow: 0 0 14px rgba(50,110,240,.45)!important; }
.msg-row .bubble[data-tier="4"]:not(.sticker-msg)  { border-color: rgba(245,205,80,.75)!important;  box-shadow: 0 0 16px rgba(240,180,40,.5)!important; }
.msg-row .bubble[data-tier="5"]:not(.sticker-msg)  { border-color: rgba(170,110,255,.7)!important;  box-shadow: 0 0 16px rgba(150,90,255,.5)!important; }
.msg-row .bubble[data-tier="6"]:not(.sticker-msg)  { border-color: rgba(255,120,210,.72)!important; box-shadow: 0 0 17px rgba(255,90,200,.52)!important; }
.msg-row .bubble[data-tier="7"]:not(.sticker-msg)  { border-color: rgba(255,110,80,.75)!important;  box-shadow: 0 0 19px rgba(255,80,60,.58)!important; }
.msg-row .bubble[data-tier="8"]:not(.sticker-msg)  { border-color: rgba(150,180,255,.8)!important;  box-shadow: 0 0 20px rgba(150,120,255,.62)!important; }
.msg-row .bubble[data-tier="9"]:not(.sticker-msg)  { border-color: rgba(255,215,90,.85)!important;  box-shadow: 0 0 22px rgba(255,200,70,.7)!important;  animation: bubblePulse 2.2s ease-in-out infinite; }
.msg-row .bubble[data-tier="10"]:not(.sticker-msg) { border-color: rgba(200,140,255,.85)!important; box-shadow: 0 0 22px rgba(180,120,255,.72)!important; animation: bubblePulse 2.2s ease-in-out infinite; }
.msg-row .bubble[data-tier="11"]:not(.sticker-msg) { border-color: rgba(255,150,205,.9)!important;  box-shadow: 0 0 22px rgba(255,140,200,.75)!important; animation: bubblePulse 2.4s ease-in-out infinite; }
.msg-row .bubble[data-tier="12"]:not(.sticker-msg) { border-color: rgba(90,245,220,.9)!important;   box-shadow: 0 0 24px rgba(60,235,215,.8)!important;  animation: bubblePulse 2s ease-in-out infinite; }
@keyframes bubblePulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }

/* ================= 仙侠换肤 v5：顶栏 logo + 标题 ================= */
.group-avatar {
  background: url("/assets/logo.png") center/contain no-repeat !important;
  box-shadow: none !important; font-size: 0 !important;
  width: 50px !important; height: 50px !important;
  filter: drop-shadow(0 0 7px rgba(180,140,255,.55));
}
.group-name {
  font-size: 20px !important; letter-spacing: 2px; font-weight: 900 !important;
  background: linear-gradient(100deg,#ffe6a0,#ffb64d,#ffe066,#c9a3ff,#8fd6ff) !important;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(200,160,255,.4);
}
.group-status { color: #cbb8ff; font-weight: 600; }
.topbar { gap: 12px !important; padding: 12px 14px !important; }

/* 修复：标题渐变裁切到文字（background 简写会重置 clip，这里强制拉回） */
.group-name { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 16px rgba(200,160,255,.4); }

/* ================= 管理员徽章：紫金精致款 ================= */
.admin-badge {
  background: linear-gradient(135deg,#8a5cff,#c04ad6) !important; color: #fff !important;
  font-weight: 800 !important; border-radius: 11px !important; padding: 2px 10px !important;
  border: 1px solid rgba(255,220,150,.55) !important;
  box-shadow: 0 0 12px rgba(160,110,255,.6) !important; text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.admin-badge::before { display: none !important; }

/* ================= 管理员徽章：加回流光扫光 + 呼吸发光 ================= */
.admin-badge { position: relative !important; overflow: hidden !important; animation: adminGlow 2.4s ease-in-out infinite; }
.admin-badge::before {
  content: "" !important; display: block !important; position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg); animation: adminSweep 2.8s ease-in-out infinite; pointer-events: none;
}
@keyframes adminGlow { 0%,100% { box-shadow: 0 0 10px rgba(160,110,255,.55); } 50% { box-shadow: 0 0 20px rgba(200,110,240,.9); } }

/* ================= 发送键：彩虹龙纹剑 ================= */
.send-btn:active { transform: scale(.92); }

/* ================= 表情/图片 按钮：插画图标 ================= */
#emojiBtn, #imgBtn {
  font-size: 0 !important; color: transparent !important; border: none !important;
  width: 46px !important; height: 40px !important;
  background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(180,120,255,.5));
}
#emojiBtn:active, #imgBtn:active { transform: scale(.92); background-color: transparent !important; }

/* ============ sx13：底部导航栏 + 分区页 ============ */
.bottom-nav{
  display:flex; flex:0 0 auto;
  background:rgba(12,9,26,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,210,130,.22);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 20px rgba(0,0,0,.35);
  z-index:5;
}
.nav-btn{
  flex:1; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:3px 0; color:#9a90b5; font-size:11px; letter-spacing:.5px;
  transition:color .15s, transform .15s;
}
.nav-btn .nav-ic{ font-size:21px; line-height:1; filter:grayscale(.35) opacity(.8); transition:.15s; }
.nav-btn.active{ color:#ffd98a; text-shadow:0 0 8px rgba(255,200,110,.5); }
.nav-btn.active .nav-ic{ filter:none; transform:translateY(-1px) scale(1.12); }
.nav-btn:active{ transform:scale(.92); }

/* 分区页 */
.page{
  flex:1 1 auto; overflow-y:auto; padding:26px 20px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:var(--muted);
}
.page.hidden{ display:none; }
.page-title{
  font-size:24px; font-weight:900; margin:24px 0 14px;
  background:linear-gradient(100deg,#ffe08a,#c9a3ff,#8fd0ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 24px rgba(200,160,255,.25);
}
.page-body{ font-size:15px; line-height:2; opacity:.9; }

/* 非聊天 tab 时，隐藏聊天相关控件 */
.chat:not([data-tab="chat"]) #messages,
.chat:not([data-tab="chat"]) .composer,
.chat:not([data-tab="chat"]) #pickerPanel,
.chat:not([data-tab="chat"]) #replyBar,
.chat:not([data-tab="chat"]) #pinnedBar,
.chat:not([data-tab="chat"]) .fab-col,
.chat:not([data-tab="chat"]) #mentionBox{ display:none !important; }

/* sx14：底部导航改用图标图 */
.nav-btn .nav-ic{
  width:30px; height:30px; font-size:0;
  background-position:center; background-repeat:no-repeat; background-size:contain;
  filter:none; opacity:.62; transition:opacity .15s, transform .15s, filter .15s;
}
#bottomNav .nav-btn[data-tab="cultivate"] .nav-ic{ background-image:url(assets/nav-cultivate.png); }
#bottomNav .nav-btn[data-tab="rank"]      .nav-ic{ background-image:url(assets/nav-rank.png); }
#bottomNav .nav-btn[data-tab="chat"]      .nav-ic{ background-image:url(assets/nav-chat.png); }
#bottomNav .nav-btn[data-tab="activity"]  .nav-ic{ background-image:url(assets/nav-activity.png); }
#bottomNav .nav-btn[data-tab="guild"]     .nav-ic{ background-image:url(assets/nav-guild.png); }
.nav-btn.active .nav-ic{
  opacity:1; transform:translateY(-2px) scale(1.14);
  filter:drop-shadow(0 0 7px rgba(255,205,120,.75)) drop-shadow(0 0 3px rgba(200,150,255,.6));
}

/* sx15：去除点击紫框 + 柔和金色选中光 */
.nav-btn{ -webkit-tap-highlight-color:transparent; outline:none; position:relative; }
.nav-btn.active::before{
  content:""; position:absolute; top:1px; left:50%; transform:translateX(-50%);
  width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,110,.20), rgba(200,150,255,.10) 55%, transparent 72%);
  z-index:0; pointer-events:none;
}
.nav-btn .nav-ic, .nav-btn .nav-lb{ position:relative; z-index:1; }
/* 简约金色图标不需要之前的双色发光，选中用干净金光 */
.nav-btn.active .nav-ic{
  opacity:1; transform:translateY(-2px) scale(1.12);
  filter:drop-shadow(0 0 5px rgba(255,205,120,.7));
}

/* ============ sx16：修炼页（积分/任务/签到）============ */
#page-cultivate{ padding:16px 14px; justify-content:flex-start; }
.cul-wrap{ width:100%; max-width:480px; margin:0 auto; text-align:left; }

/* 积分卡 */
.cul-points{
  border-radius:16px; padding:16px 18px; margin-bottom:14px;
  background:linear-gradient(135deg, rgba(120,70,190,.35), rgba(60,40,110,.35));
  border:1px solid rgba(255,210,130,.28);
  box-shadow:0 6px 20px rgba(60,20,110,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.cul-pt-top{ display:flex; align-items:baseline; justify-content:space-between; }
.cul-pt-label{ font-size:14px; color:#d9cdf0; }
.cul-pt-val{
  font-size:34px; font-weight:900; line-height:1;
  background:linear-gradient(100deg,#ffe08a,#ffd0f0,#c9a3ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 20px rgba(255,210,150,.3);
}
.cul-shop-hint{ margin-top:8px; font-size:12px; color:#b9addb; opacity:.85; }

/* 签到条 */
.cul-sign{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-radius:14px; padding:12px 14px; margin-bottom:16px;
  background:rgba(30,22,52,.6); border:1px solid rgba(255,180,120,.22);
}
.cul-sign-info{ font-size:14px; color:#e8defb; }
.cul-sign-info b{ color:#ffd98a; font-size:17px; }
.cul-sign-btn{
  flex:0 0 auto; border:none; cursor:pointer; padding:9px 18px; border-radius:20px;
  font-size:14px; font-weight:800; color:#3a2410;
  background:linear-gradient(135deg,#ffe6a0,#ffc760); box-shadow:0 3px 12px rgba(255,180,60,.4);
}
.cul-sign-btn:active{ transform:scale(.95); }
.cul-sign-btn.done{ background:#3a3350; color:#8a83a5; box-shadow:none; cursor:default; }

.cul-sec-title{ font-size:15px; font-weight:800; color:#ffd98a; margin:4px 2px 8px; }
.cul-rules{
  font-size:12px; line-height:1.7; color:#b0a6cf; opacity:.9;
  background:rgba(20,14,38,.5); border-left:3px solid rgba(255,190,110,.5);
  padding:8px 10px; border-radius:8px; margin-bottom:12px;
}

/* 任务行 */
.cul-tasks{ display:flex; flex-direction:column; gap:10px; }
.task-row{
  display:flex; align-items:center; gap:11px;
  border-radius:14px; padding:11px 13px;
  background:rgba(28,20,50,.62); border:1px solid rgba(255,255,255,.06);
}
.task-ic{ font-size:22px; flex:0 0 auto; width:26px; text-align:center; }
.task-main{ flex:1; min-width:0; }
.task-title{ font-size:14px; color:#eee6ff; margin-bottom:6px; }
.task-bar{ height:6px; border-radius:4px; background:rgba(255,255,255,.09); overflow:hidden; }
.task-bar-fill{ height:100%; border-radius:4px; background:linear-gradient(90deg,#ffd98a,#c9a3ff); transition:width .3s; }
.task-reward{ flex:0 0 auto; font-size:13px; font-weight:800; color:#ffd98a; min-width:40px; text-align:right; }
.task-btn{
  flex:0 0 auto; border:none; cursor:pointer; padding:7px 13px; border-radius:16px;
  font-size:12px; font-weight:800; white-space:nowrap;
}
.task-btn.claim{ color:#2a1c40; background:linear-gradient(135deg,#d6c3ff,#b79bff); }
.task-btn.ready{ color:#3a2410; background:linear-gradient(135deg,#ffe6a0,#ffc760); animation:taskPulse 1.4s ease-in-out infinite; }
.task-btn.doing{ color:#b8aee0; background:rgba(255,255,255,.08); cursor:default; }
.task-btn.done{ color:#7fd6a0; background:rgba(120,220,150,.12); cursor:default; }
.task-btn.locked{ color:#9a8f7a; background:rgba(255,200,120,.08); cursor:default; }
.task-btn:active{ transform:scale(.94); }
@keyframes taskPulse{ 0%,100%{ box-shadow:0 0 0 rgba(255,200,100,.0); } 50%{ box-shadow:0 0 12px rgba(255,200,100,.6); } }

/* sx17：打坐任务副标题 */
.task-hint{ font-size:11px; color:#9a90bb; margin-top:3px; }

/* ============ sx19：排行页（今日活跃榜）============ */
#page-rank{ padding:16px 14px; justify-content:flex-start; }
.rk-wrap{ width:100%; max-width:480px; margin:0 auto; text-align:left; }
.rk-head{ text-align:center; margin:6px 0 16px; }
.rk-title{
  font-size:24px; font-weight:900;
  background:linear-gradient(100deg,#ffe08a,#ffd0f0,#c9a3ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 22px rgba(255,210,150,.28);
}
.rk-sub{ font-size:12px; color:#b0a6cf; margin-top:4px; }
.rk-list{ display:flex; flex-direction:column; gap:8px; }
.rk-row{
  display:flex; align-items:center; gap:11px;
  border-radius:13px; padding:10px 13px;
  background:rgba(28,20,50,.6); border:1px solid rgba(255,255,255,.06);
}
.rk-badge{ flex:0 0 auto; width:30px; text-align:center; font-size:20px; }
.rk-badge .rk-num{ font-size:15px; font-weight:800; color:#9a90bb; }
.rk-ava{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#2a1c40;
  background:linear-gradient(135deg,#d6c3ff,#b79bff);
}
.rk-name{ flex:1; min-width:0; font-size:14px; color:#eee6ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk-count{ flex:0 0 auto; font-size:16px; font-weight:900; color:#ffd98a; }
.rk-count span{ font-size:11px; font-weight:400; color:#b0a6cf; margin-left:2px; }
/* 前三名描金 */
.rk-row.top1{ background:linear-gradient(100deg,rgba(255,200,90,.22),rgba(120,70,190,.18)); border-color:rgba(255,210,120,.5); }
.rk-row.top2{ background:linear-gradient(100deg,rgba(200,200,220,.16),rgba(120,70,190,.14)); border-color:rgba(220,220,240,.4); }
.rk-row.top3{ background:linear-gradient(100deg,rgba(220,150,90,.16),rgba(120,70,190,.14)); border-color:rgba(230,170,110,.4); }
.rk-row.top1 .rk-ava{ background:linear-gradient(135deg,#ffe6a0,#ffc760); }
/* 自己那一行 */
.rk-row.mine{ box-shadow:0 0 0 1.5px rgba(255,215,140,.7) inset; }
.rk-empty{ text-align:center; color:#b0a6cf; padding:40px 0; font-size:14px; }
.rk-me{
  position:sticky; bottom:0; margin-top:14px; text-align:center;
  font-size:14px; color:#e8defb; padding:12px;
  background:rgba(30,22,52,.85); backdrop-filter:blur(8px);
  border-radius:12px; border:1px solid rgba(255,190,110,.3);
}
.rk-me b{ color:#ffd98a; font-size:17px; }

/* ============ sx20：仙盟阵营 PK ============ */
#page-guild{ padding:16px 14px; justify-content:flex-start; }
.fac-wrap{ width:100%; max-width:480px; margin:0 auto; text-align:left; }
.fac-title{
  text-align:center; font-size:24px; font-weight:900; margin-bottom:6px;
  background:linear-gradient(100deg,#ffe08a,#ffd0f0,#c9a3ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 22px rgba(255,210,150,.28);
}
.fac-sub{ text-align:center; font-size:12px; color:#b0a6cf; margin-bottom:16px; line-height:1.6; }
.fac-sub b{ color:#ffd98a; }
.fac-card{
  border-radius:16px; padding:14px 16px; margin-bottom:6px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--fc) 22%, transparent), rgba(30,22,52,.5));
  border:1px solid color-mix(in srgb, var(--fc) 45%, transparent);
}
.fac-card.mine{ box-shadow:0 0 0 2px color-mix(in srgb, var(--fc) 70%, transparent) inset, 0 6px 20px rgba(0,0,0,.3); }
.fac-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fac-ic{ font-size:24px; }
.fac-name{ font-size:18px; font-weight:900; color:#fff; }
.fac-boost{ font-size:11px; font-weight:700; color:#ffcf6a; background:rgba(255,180,60,.15); padding:2px 7px; border-radius:10px; margin-left:auto; }
.fac-meta{ font-size:13px; color:#d9cdf0; margin-bottom:8px; }
.fac-meta b{ color:#ffd98a; font-size:15px; }
.fac-bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.09); overflow:hidden; margin-bottom:10px; }
.fac-bar-fill{ height:100%; border-radius:5px; background:linear-gradient(90deg, var(--fc), color-mix(in srgb, var(--fc) 50%, #fff)); transition:width .4s; }
.fac-join{
  width:100%; border:none; cursor:pointer; padding:10px; border-radius:12px; font-size:15px; font-weight:800;
  color:#2a1c40; background:linear-gradient(135deg, color-mix(in srgb, var(--fc) 60%, #fff), var(--fc));
}
.fac-join:active{ transform:scale(.97); }
.fac-locked{ display:block; text-align:center; padding:10px; color:#9a8fb5; font-size:13px; background:rgba(255,255,255,.05); border-radius:12px; }
.fac-tag{ display:block; text-align:center; padding:8px; color:#ffd98a; font-size:13px; font-weight:700; }
.fac-vs{ text-align:center; font-size:16px; font-weight:900; color:#ff9c6a; margin:2px 0; text-shadow:0 0 10px rgba(255,120,60,.5); }
.fac-me{ text-align:center; font-size:14px; color:#e8defb; margin:12px 0 4px; }
.fac-me b{ color:#ffd98a; font-size:16px; }
.fac-timer{ text-align:center; font-size:13px; color:#b0a6cf; margin:10px 0; }
.fac-timer b{ color:#ffd98a; font-variant-numeric:tabular-nums; }
.fac-tip{ text-align:center; font-size:12px; color:#9a90bb; margin-top:8px; }
.fac-last{ margin-top:14px; font-size:12px; color:#b0a6cf; text-align:center; background:rgba(20,14,38,.5); padding:8px 10px; border-radius:8px; }
.fac-last b{ color:#ffd98a; }

/* ============ sx21：仙盟正邪对决卡（立绘门面）============ */
.fac-card{
  position:relative; display:flex; align-items:stretch; min-height:152px;
  border-radius:18px; overflow:hidden; margin-bottom:2px; border:1px solid;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.fac-card.mine::after{ content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; box-shadow:0 0 0 2px rgba(255,255,255,.5) inset; }
.fac-hero-wrap{ position:relative; flex:0 0 130px; overflow:hidden; }
.fac-hero-wrap::before{ content:""; position:absolute; inset:0; }
.fac-hero{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); height:176px; width:auto; max-width:none; z-index:1; }
.fac-info{ flex:1; min-width:0; padding:14px 16px 14px 4px; display:flex; flex-direction:column; justify-content:center; gap:9px; }
.fac-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.fac-name{ font-size:23px; font-weight:900; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:1px; }
.fac-crown{ font-size:11px; font-weight:800; color:#ffdf8a; background:rgba(255,200,80,.18); padding:2px 8px; border-radius:10px; }
.fac-boost{ font-size:11px; font-weight:800; color:#ffcf6a; background:rgba(255,150,60,.2); padding:2px 8px; border-radius:10px; }
.fac-meta{ font-size:13px; color:#d9cdf0; }
.fac-meta b{ font-size:16px; }
.fac-bar{ height:8px; border-radius:5px; background:rgba(255,255,255,.12); overflow:hidden; }
.fac-bar-fill{ height:100%; border-radius:5px; transition:width .4s; }
.fac-join{ align-self:flex-start; border:none; cursor:pointer; padding:9px 26px; border-radius:22px; font-size:15px; font-weight:900; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.fac-join:active{ transform:scale(.96); }
.fac-tag{ align-self:flex-start; padding:7px 16px; border-radius:20px; font-size:13px; font-weight:800; color:#fff; background:rgba(255,255,255,.14); }
.fac-locked{ align-self:flex-start; padding:7px 16px; border-radius:20px; font-size:13px; color:#c9bfe0; background:rgba(255,255,255,.08); }

/* —— 天衍殿：金蓝圣光 —— */
.fac-tianyan{ background:linear-gradient(115deg,#17274a 0%,#101c38 55%,#0b1122 100%); border-color:rgba(130,185,255,.45); }
.fac-tianyan .fac-hero-wrap::before{ background:radial-gradient(circle at 50% 42%, rgba(150,200,255,.45), rgba(255,225,150,.18) 45%, transparent 70%); }
.fac-tianyan .fac-hero{ filter:drop-shadow(0 0 15px rgba(130,190,255,.6)) drop-shadow(0 0 6px rgba(255,225,150,.45)); }
.fac-tianyan .fac-name{ background-image:linear-gradient(100deg,#eef6ff,#ffe6a0,#8fc3ff); text-shadow:0 0 18px rgba(150,200,255,.4); }
.fac-tianyan .fac-bar-fill{ background:linear-gradient(90deg,#7db8ff,#eaf4ff); box-shadow:0 0 8px rgba(130,190,255,.7); }
.fac-tianyan .fac-join{ color:#0e2140; background:linear-gradient(135deg,#d6ecff,#83b9ff); }

/* —— 逆鳞阁：黑红邪煞 —— */
.fac-nilin{ background:linear-gradient(115deg,#3c0f1c 0%,#1f0810 55%,#110509 100%); border-color:rgba(255,80,110,.45); }
.fac-nilin .fac-hero-wrap::before{ background:radial-gradient(circle at 50% 40%, rgba(255,70,100,.5), rgba(120,20,50,.25) 45%, transparent 70%); }
.fac-nilin .fac-hero{ filter:drop-shadow(0 0 15px rgba(255,60,90,.6)) drop-shadow(0 0 7px rgba(90,10,30,.6)); }
.fac-nilin .fac-name{ background-image:linear-gradient(100deg,#ffdbe0,#ff5a6e,#ffb060); text-shadow:0 0 18px rgba(255,60,90,.4); }
.fac-nilin .fac-bar-fill{ background:linear-gradient(90deg,#ff5a6e,#ffb060); box-shadow:0 0 8px rgba(255,70,100,.7); }
.fac-nilin .fac-join{ color:#3a0a14; background:linear-gradient(135deg,#ff9fac,#ff4d67); }

/* VS 火花 */
.fac-vs{
  text-align:center; font-size:22px; font-weight:900; margin:-6px 0; position:relative; z-index:2;
  background:linear-gradient(180deg,#fff,#ffb060); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 16px rgba(255,140,60,.6); letter-spacing:2px;
}

/* sx22：阵营名渐变字防被 background 简写重置（双保险） */
.fac-name{ -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } /* fac-name-clip-fix */

/* ============ sx23：动效润色（纯 CSS，让静态图"活"起来）============ */
@media (prefers-reduced-motion: no-preference){

  /* 阵营立绘：呼吸浮动 */
  .fac-hero{ animation:facFloat 4.6s ease-in-out infinite; will-change:transform; }
  .fac-nilin .fac-hero{ animation-delay:-2.3s; }
  @keyframes facFloat{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-7px); } }

  /* 立绘背后光晕：脉动 */
  .fac-hero-wrap::before{ animation:facGlow 3.6s ease-in-out infinite; }
  .fac-nilin .fac-hero-wrap::before{ animation-delay:-1.8s; }
  @keyframes facGlow{ 0%,100%{ opacity:.72; transform:scale(1); } 50%{ opacity:1; transform:scale(1.07); } }

  /* 立绘上流光扫过 */
  .fac-hero-wrap::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
    transform:translateX(-130%); animation:facSweep 5.5s ease-in-out infinite;
  }
  .fac-nilin .fac-hero-wrap::after{ animation-delay:-2.7s; }
  @keyframes facSweep{ 0%,66%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } }

  /* VS 火花跳动 */
  .fac-vs{ animation:vsPulse 1.9s ease-in-out infinite; }
  @keyframes vsPulse{ 0%,100%{ transform:scale(1); filter:drop-shadow(0 0 8px rgba(255,140,60,.5)); } 50%{ transform:scale(1.14); filter:drop-shadow(0 0 16px rgba(255,170,90,.9)); } }

  /* 阵营名 / 积分数字：渐变流光 */
  .fac-name{ background-size:220% auto; animation:shimmer 4s linear infinite; }
  .cul-pt-val{ background-size:220% auto; animation:shimmer 3.2s linear infinite; }
  @keyframes shimmer{ to{ background-position:220% center; } }

  /* Logo 光晕呼吸 */
  .group-avatar{ animation:logoGlow 3.4s ease-in-out infinite; }
  @keyframes logoGlow{ 0%,100%{ box-shadow:0 0 7px rgba(255,200,120,.35); } 50%{ box-shadow:0 0 17px rgba(200,160,255,.75); } }

  /* 发送剑：寒光一闪 */
  .send-btn{ animation:swordGlint 3.6s ease-in-out infinite; }
  @keyframes swordGlint{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(150,90,255,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.45)); } 50%{ filter:drop-shadow(0 0 13px rgba(178,120,255,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.45)) brightness(1.1); } }

  /* 导航选中图标：轻浮 */
  .nav-btn.active .nav-ic{ animation:navBob 2.2s ease-in-out infinite; }
  @keyframes navBob{ 0%,100%{ transform:translateY(-2px) scale(1.12); } 50%{ transform:translateY(-5px) scale(1.15); } }
}

/* sx24：立绘列右侧渐隐，消除矩形硬边，融进卡片 */
.fac-hero-wrap{
  -webkit-mask-image:linear-gradient(to right, #000 66%, transparent 100%);
  mask-image:linear-gradient(to right, #000 66%, transparent 100%);
  flex-basis:138px;
}
/* 光晕收敛一点、更柔，避免亮成一块 */
.fac-tianyan .fac-hero-wrap::before{ background:radial-gradient(circle at 46% 44%, rgba(150,200,255,.4), rgba(255,225,150,.14) 40%, transparent 62%); }
.fac-nilin .fac-hero-wrap::before{ background:radial-gradient(circle at 46% 42%, rgba(255,70,100,.42), rgba(120,20,50,.18) 40%, transparent 62%); }

/* sx25：禁止横向溢出，防止内容被顶出屏幕（只能看到一半） */
html, body, .chat, .page{ overflow-x:hidden; max-width:100%; }
.fac-wrap, .cul-wrap, .rk-wrap{ box-sizing:border-box; width:100%; }
.fac-card{ width:100%; box-sizing:border-box; }
.fac-info{ min-width:0; }
.fac-info .fac-meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* sx26：修复人物只显示一半——去遮罩/去裁切，人物完整放进卡片 */
.fac-card{ min-height:174px; }
.fac-hero-wrap{
  overflow:visible; flex:0 0 150px;
  -webkit-mask-image:none !important; mask-image:none !important;
}
.fac-hero-wrap::after{ content:none !important; }   /* 关掉会裁到人物的流光 */
.fac-hero{ height:166px; bottom:4px; }

/* sx27：彻底修复——删矩形光晕，人物限宽不遮挡文字 */
.fac-hero-wrap::before{ content:none !important; }   /* 删掉方块光晕（硬边/遮挡根源）*/
.fac-hero-wrap{ overflow:hidden; flex:0 0 146px; }   /* 人物列固定宽，超出裁掉不越界 */
.fac-hero{ height:172px; bottom:0; max-width:150px; } /* 限宽，绝不盖住阵营名 */
/* 用人物描边光晕替代方块光晕，保留圣光/邪煞氛围 */
.fac-tianyan .fac-hero{ filter:drop-shadow(0 0 16px rgba(140,195,255,.7)) drop-shadow(0 0 8px rgba(255,225,150,.5)); }
.fac-nilin .fac-hero{ filter:drop-shadow(0 0 16px rgba(255,70,100,.7)) drop-shadow(0 0 8px rgba(120,20,40,.6)); }

/* sx28：人物固定居中，取消浮动漂移 */
.fac-hero{
  animation:none !important;
  top:50%; bottom:auto;
  transform:translate(-50%,-50%);
}

/* ============ sx29：牛牛棋牌 ============ */
/* 群里的开房卡片 */
.niu-card{ align-self:center; width:min(320px,86%); margin:8px auto; padding:14px 16px; border-radius:16px;
  background:linear-gradient(135deg,rgba(60,40,110,.5),rgba(120,60,40,.35)); border:1px solid rgba(255,200,120,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.3); text-align:center; }
.niu-card.ended,.niu-card.closed{ opacity:.55; }
.niu-card-top{ font-size:15px; font-weight:900; color:#ffd98a; margin-bottom:6px; }
.niu-card-ic{ margin-right:4px; }
.niu-card-info{ font-size:13px; color:#e8defb; margin-bottom:10px; }
.niu-card-info b{ color:#ffd98a; }
.niu-card-btn{ border:none; cursor:pointer; padding:8px 26px; border-radius:20px; font-size:14px; font-weight:800;
  color:#3a2410; background:linear-gradient(135deg,#ffe6a0,#ffc760); box-shadow:0 3px 12px rgba(255,180,60,.4); }
.niu-card.ended .niu-card-btn,.niu-card.closed .niu-card-btn{ filter:grayscale(1); }

/* 牌桌覆盖层 */
.niu-overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(8,5,18,.82); backdrop-filter:blur(6px); }
.niu-overlay.hidden{ display:none; }
.niu-panel{ width:min(440px,94%); max-height:90vh; overflow-y:auto; border-radius:20px;
  background:linear-gradient(160deg,#1a1330,#241a12); border:1px solid rgba(255,200,120,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.6); display:flex; flex-direction:column; }
.niu-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; background:inherit; z-index:2; }
.niu-title{ font-size:18px; font-weight:900; color:#ffd98a; }
.niu-info{ flex:1; font-size:12px; color:#c9bfe0; }
.niu-info b{ color:#ffd98a; }
.niu-body{ padding:16px; }
.niu-loading,.niu-empty{ text-align:center; color:#b0a6cf; padding:20px; font-size:14px; }
.niu-role{ text-align:center; font-size:12px; color:#ffcf6a; letter-spacing:3px; margin-bottom:6px; }
.niu-banker{ text-align:center; padding:12px; border-radius:14px; background:rgba(255,190,90,.08); border:1px solid rgba(255,190,90,.25); }
.niu-divider{ text-align:center; color:#8a7fb0; font-size:12px; letter-spacing:2px; margin:16px 0 10px; }
.niu-seats{ display:flex; flex-direction:column; gap:10px; }
.niu-seat{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); }
.niu-seat.me{ box-shadow:0 0 0 1.5px rgba(255,215,140,.6) inset; }
.niu-player{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:56px; }
.niu-ava{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#2a1c40; background:linear-gradient(135deg,#d6c3ff,#b79bff); }
.niu-ava.banker{ background:linear-gradient(135deg,#ffe6a0,#ffc760); }
.niu-pname{ font-size:12px; color:#e8defb; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.niu-niu{ font-size:11px; font-weight:800; color:#ffd98a; background:rgba(255,200,80,.15); padding:1px 7px; border-radius:8px; }
.niu-seat-mid{ flex:1; display:flex; justify-content:center; }
.niu-bet{ font-size:13px; color:#c9bfe0; }
.niu-delta{ font-size:16px; font-weight:900; min-width:52px; text-align:right; }
.niu-delta.win{ color:#7fe0a0; } .niu-delta.lose{ color:#ff8fa0; }

/* 扑克牌 */
.pk-hand{ display:flex; gap:3px; justify-content:center; }
.pk{ width:34px; height:48px; border-radius:5px; flex:0 0 auto; }
.pk-back{ background:linear-gradient(135deg,#7a4bd0,#3a2170); border:1.5px solid #ffcf6a;
  background-image:repeating-linear-gradient(45deg,rgba(255,207,106,.25) 0 3px,transparent 3px 7px); }
.pk-face{ background:#fdfcf7; border:1px solid #d8cdb8; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform-origin:center; animation:pkFlip .4s ease-out both; box-shadow:0 1px 3px rgba(0,0,0,.3); }
@keyframes pkFlip{ from{ transform:rotateY(90deg); opacity:0; } to{ transform:rotateY(0); opacity:1; } }
.pk-r{ font-size:14px; font-weight:900; line-height:1; }
.pk-s{ font-size:15px; line-height:1; }
.pk-r.pk-r{} .pk-face.pk-r{ color:#d63b3b; } .pk-face.pk-b{ color:#222; }

/* 底部控制 */
.niu-foot{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; position:sticky; bottom:0; background:inherit; }
.niu-tip{ font-size:13px; color:#c9bfe0; }
.niu-btn{ border:none; cursor:pointer; padding:11px 30px; border-radius:24px; font-size:16px; font-weight:900; color:#3a2410; background:linear-gradient(135deg,#ffe6a0,#ffc760); box-shadow:0 4px 14px rgba(255,180,60,.4); }
.niu-btn:active{ transform:scale(.96); }
.niu-btn.ghost{ color:#c9bfe0; background:rgba(255,255,255,.08); box-shadow:none; }
.niu-btn.disabled{ filter:grayscale(1) opacity(.6); cursor:default; }
.niu-bet-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:#c9bfe0; }
.niu-bet-btn{ border:none; cursor:pointer; padding:9px 16px; border-radius:16px; font-size:14px; font-weight:800; color:#2a1c40; background:linear-gradient(135deg,#d6c3ff,#b79bff); }
.niu-bet-btn:active{ transform:scale(.94); }

/* 活动页 */
#page-activity{ padding:16px 14px; justify-content:flex-start; }
.act-wrap{ width:100%; max-width:480px; margin:0 auto; text-align:left; }
.act-title{ font-size:24px; font-weight:900; text-align:center; background:linear-gradient(100deg,#ffe08a,#ffd0f0,#c9a3ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.act-sub{ text-align:center; font-size:12px; color:#b0a6cf; margin:6px 0 16px; }
.act-create{ width:100%; border:none; cursor:pointer; padding:14px; border-radius:14px; font-size:16px; font-weight:900; color:#3a2410; background:linear-gradient(135deg,#ffe6a0,#ffc760); box-shadow:0 5px 16px rgba(255,180,60,.4); margin-bottom:18px; }
.act-sec{ font-size:14px; font-weight:800; color:#ffd98a; margin:4px 2px 8px; }
.niu-room-list{ display:flex; flex-direction:column; gap:8px; }
.niu-room-row{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:rgba(28,20,50,.6); border:1px solid rgba(255,255,255,.06); cursor:pointer; }
.niu-room-ic{ font-size:22px; }
.niu-room-info{ flex:1; font-size:14px; color:#eee6ff; }
.niu-room-sub{ font-size:12px; color:#b0a6cf; }
.niu-room-join{ border:none; cursor:pointer; padding:7px 16px; border-radius:16px; font-size:13px; font-weight:800; color:#2a1c40; background:linear-gradient(135deg,#d6c3ff,#b79bff); }
.niu-empty2{ text-align:center; color:#b0a6cf; padding:30px 0; font-size:14px; }
.niu-bet-presets{ display:flex; gap:8px; margin-top:12px; }
.niu-preset{ flex:1; border:1px solid rgba(255,200,120,.3); background:rgba(255,255,255,.05); color:#e8defb; cursor:pointer; padding:10px 0; border-radius:10px; font-size:14px; font-weight:700; }
.niu-preset.on{ background:linear-gradient(135deg,#ffe6a0,#ffc760); color:#3a2410; border-color:transparent; }

/* ============ sx30：牛牛赌桌化 ============ */
.niu-body{ padding:12px !important; }
.niu-felt{
  position:relative; border-radius:20px; padding:18px 12px 22px; overflow:hidden;
  background:radial-gradient(ellipse 82% 62% at 50% 46%, #8a2230, #5a1420 68%, #380c14);
  box-shadow:0 0 0 3px #8a6510, 0 0 0 6px #ffe6a0, 0 0 0 9px #b8860b,
             inset 0 0 45px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.5);
}
.niu-felt::before{ content:""; position:absolute; inset:0; background:repeating-radial-gradient(circle at 50% 46%, transparent 0 18px, rgba(255,220,180,.03) 18px 19px); pointer-events:none; }
.niu-goddess{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:150px; height:150px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 34%, rgba(255,180,220,.35), rgba(255,220,150,.12) 45%, transparent 68%);
  background-size:contain; background-repeat:no-repeat; background-position:top center;
}
.niu-top{ position:relative; z-index:1; display:flex; justify-content:center; padding-top:6px; }
.niu-center{ position:relative; z-index:1; text-align:center; margin:10px 0 6px; display:flex; flex-direction:column; gap:2px; color:#ffdca0; }
.niu-c-bet{ font-size:13px; font-weight:800; }
.niu-c-id{ font-size:10px; opacity:.55; }
.niu-seatgrid{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:16px 10px; margin-top:6px; }
.niu-empty{ color:#f0d8c0; opacity:.8; padding:18px; }

/* 玩家位 */
.niu-pod{ display:flex; flex-direction:column; align-items:center; gap:3px; width:118px; }
.niu-avatar-wrap{ position:relative; }
.niu-ava-ring{ padding:2.5px; border-radius:50%; background:linear-gradient(135deg,#ffe6a0,#b8860b); box-shadow:0 2px 8px rgba(0,0,0,.4); }
.niu-ava-ring.banker{ background:linear-gradient(135deg,#fff0b0,#ff9c40); box-shadow:0 0 12px rgba(255,180,80,.6); }
.niu-ava{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#3a2410; background:linear-gradient(135deg,#f0e6ff,#c9b3ff); }
.niu-crownlabel{ position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:900; color:#3a2410; background:linear-gradient(135deg,#ffe6a0,#ffc760); padding:0 7px; border-radius:8px; }
.niu-xbadge{ position:absolute; top:-4px; right:-8px; font-size:12px; font-weight:900; color:#fff; background:linear-gradient(135deg,#ff5a3c,#ff9c40); padding:1px 7px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.niu-pod.me .niu-ava-ring{ box-shadow:0 0 0 2px #fff, 0 0 12px rgba(255,230,150,.8); }
.niu-pname{ font-size:12px; color:#ffe8d0; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.niu-betchip{ font-size:13px; font-weight:700; color:#ffe08a; background:rgba(0,0,0,.25); padding:3px 12px; border-radius:12px; }
.niu-delta{ font-size:16px; font-weight:900; }
.niu-delta.win{ color:#7fe0a0; text-shadow:0 0 8px rgba(120,220,150,.6); }
.niu-delta.lose{ color:#ff8fa0; }

/* 扇形叠牌 + 牛X盖章 */
.pk-hand.fan{ position:relative; display:flex; padding:2px 0; }
.pk-hand.fan .pk{ margin-left:-15px; box-shadow:0 1px 4px rgba(0,0,0,.45); }
.pk-hand.fan .pk:first-child{ margin-left:0; }
.niu-stamp{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) rotate(-9deg);
  font-size:23px; font-weight:900; color:#fff; letter-spacing:1px; pointer-events:none;
  -webkit-text-stroke:2px #1a6bd6; text-shadow:0 2px 5px rgba(0,0,0,.6); z-index:5;
}
.niu-stamp.lv0{ -webkit-text-stroke-color:#7a7a7a; }
.niu-stamp.lv7,.niu-stamp.lv8,.niu-stamp.lv9{ -webkit-text-stroke-color:#e0692a; }
.niu-stamp.lv10{ -webkit-text-stroke-color:#d63b3b; color:#ffe08a; font-size:25px; }

/* ============ sx31：用真牌桌图 + 仙女立绘 ============ */
.niu-felt{
  background:url(assets/niu-table.jpg) center/100% 100% no-repeat !important;
  aspect-ratio:760/1361; border-radius:0 !important; box-shadow:none !important;
  padding:6% 13% 7% !important; display:flex; flex-direction:column; align-items:center; overflow:visible;
}
.niu-felt::before{ display:none !important; }
.niu-goddess{
  position:static; width:160px; height:184px; transform:none; margin-top:-4px;
  background:url(assets/niu-goddess.png) center/contain no-repeat; filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
.niu-top{ margin-top:-46px; position:relative; z-index:2; }
.niu-center{ margin:8px 0 4px; z-index:2; }
.niu-c-bet{ color:#ffe6b0; }
.niu-seatgrid{ gap:12px 8px; }
.niu-pname{ text-shadow:0 1px 3px rgba(0,0,0,.6); }
.niu-empty{ color:#ffe0c8; }

/* ============ sx32：牌桌自适应屏幕 + 退出按钮(JS绑定) ============ */
.niu-panel{ height:92vh !important; max-height:92vh !important; }
.niu-body{ flex:1 1 auto; overflow-y:auto; }
.niu-felt{
  aspect-ratio:auto !important; min-height:100%;
  background-size:cover !important; padding:8% 12% 7% !important;
  justify-content:flex-start;
}
.niu-goddess{ width:150px; height:170px; margin-top:0; }
.niu-top{ margin-top:-42px; }

/* ============ sx33：抢庄牛牛 UI ============ */
.niu-phase{ text-align:center; color:#ffdca0; font-size:15px; font-weight:800; margin:8px 0 4px; position:relative; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.niu-status{ font-size:12px; color:#f0e0d0; background:rgba(0,0,0,.22); padding:3px 10px; border-radius:10px; }
.niu-grabbadge{ position:absolute; top:-4px; left:-8px; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(135deg,#9b6bff,#6a3ad0); padding:1px 6px; border-radius:9px; box-shadow:0 2px 5px rgba(0,0,0,.4); }
.niu-grab-row,.niu-bet-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.niu-grab-row>span,.niu-bet-row>span{ font-size:13px; color:#c9bfe0; }
.niu-grab-btn{ border:1px solid rgba(255,200,120,.35); background:rgba(255,255,255,.06); color:#e8defb; cursor:pointer; padding:8px 12px; border-radius:14px; font-size:13px; font-weight:800; }
.niu-grab-btn.on{ background:linear-gradient(135deg,#ffe6a0,#ffc760); color:#3a2410; border-color:transparent; box-shadow:0 3px 10px rgba(255,180,60,.4); }
.niu-host-row{ display:flex; gap:10px; justify-content:center; width:100%; margin-top:8px; }
.niu-foot{ flex-direction:column; }

/* ============ sx34：德州扑克牌桌 ============ */
.dz-overlay{ position:fixed; inset:0; z-index:65; display:flex; flex-direction:column; background:#0b0713; }
.dz-overlay.hidden{ display:none; }
.dz-topbar{ display:flex; align-items:center; gap:10px; padding:10px 14px calc(6px + env(safe-area-inset-top,0)); background:rgba(20,12,30,.9); }
.dz-tinfo{ flex:1; font-size:13px; color:#e8defb; }
.dz-tinfo b{ color:#ffd98a; }
.dz-felt{ flex:1; position:relative; overflow:hidden;
  background:url(assets/niu-table.jpg) center/cover no-repeat; }
.dz-goddess{ position:absolute; top:2%; left:50%; transform:translateX(-50%); width:110px; height:120px; background:url(assets/niu-goddess.png) top/contain no-repeat; opacity:.5; pointer-events:none; }
.dz-center{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:1; }
.dz-community{ display:flex; gap:4px; }
.dz-pot{ font-size:14px; font-weight:800; color:#ffe08a; background:rgba(0,0,0,.4); padding:3px 14px; border-radius:14px; }
.dzpk{ width:30px; height:42px; }
.dzpk.pk-face{ animation:pkFlip .35s ease-out both; }
.dz-hole .dzpk{ width:26px; height:36px; }
.dz-hole{ display:flex; gap:2px; margin-bottom:2px; }

/* 座位 */
.dz-seat{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; width:78px; z-index:2; }
.dz-seat.empty{ opacity:.8; }
.dz-sit{ font-size:12px; color:#ffd98a; border:1.5px dashed rgba(255,210,130,.5); border-radius:20px; padding:8px 12px; background:rgba(0,0,0,.3); cursor:pointer; }
.dz-empty{ font-size:12px; color:#9a8fb5; border:1.5px dashed rgba(255,255,255,.2); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.dz-ava-ring{ position:relative; padding:2px; border-radius:50%; background:linear-gradient(135deg,#ffe6a0,#b8860b); }
.dz-seat.turn .dz-ava-ring{ box-shadow:0 0 0 2px #7fe0a0, 0 0 14px rgba(120,220,150,.9); animation:dzTurn 1s ease-in-out infinite; }
@keyframes dzTurn{ 50%{ box-shadow:0 0 0 3px #7fe0a0, 0 0 20px rgba(120,220,150,1);} }
.dz-ava{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#2a1c40; background:linear-gradient(135deg,#f0e6ff,#c9b3ff); }
.dz-seat.folded{ opacity:.4; }
.dz-seat.me .dz-ava-ring{ background:linear-gradient(135deg,#fff0b0,#ff9c40); }
.dz-dealer{ position:absolute; bottom:-2px; right:-6px; width:18px; height:18px; border-radius:50%; background:#fff; color:#c0392b; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.dz-pinfo{ margin-top:2px; background:rgba(0,0,0,.55); border-radius:8px; padding:2px 8px; text-align:center; }
.dz-pname{ font-size:11px; color:#eee6ff; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dz-stack{ font-size:11px; font-weight:800; color:#ffd98a; }
.dz-handname{ font-size:10px; color:#ffcf6a; background:rgba(0,0,0,.5); padding:0 6px; border-radius:6px; margin-top:2px; }
.dz-bet{ position:absolute; bottom:-20px; font-size:12px; font-weight:800; color:#ffe08a; background:rgba(0,0,0,.5); padding:1px 8px; border-radius:10px; }
.dz-won{ position:absolute; top:-14px; font-size:14px; font-weight:900; color:#7fe0a0; text-shadow:0 0 8px rgba(120,220,150,.7); }

.dz-banner{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); font-size:28px; font-weight:900; color:#ffd98a; text-shadow:0 2px 10px rgba(0,0,0,.7); z-index:5; }
.dz-banner.win{ color:#ffe08a; font-size:34px; animation:vsPulse 1s ease-in-out infinite; }

/* 行动栏 */
.dz-actionbar{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:12px 14px calc(12px + env(safe-area-inset-bottom,0)); background:rgba(20,12,30,.95); min-height:56px; }
.dz-wait{ font-size:14px; color:#b0a6cf; }
.dz-abtn{ border:none; cursor:pointer; padding:11px 18px; border-radius:22px; font-size:15px; font-weight:900; color:#2a1c40; background:linear-gradient(135deg,#d6c3ff,#b79bff); box-shadow:0 3px 10px rgba(0,0,0,.3); }
.dz-abtn:active{ transform:scale(.95); }
.dz-abtn.fold{ background:linear-gradient(135deg,#c9a0a0,#a06060); color:#fff; }
.dz-abtn.call{ background:linear-gradient(135deg,#a0d6b0,#5faf7f); color:#123; }
.dz-abtn.raise,.dz-abtn.allin{ background:linear-gradient(135deg,#ffe6a0,#ffc760); color:#3a2410; }
.dz-abtn.allin{ background:linear-gradient(135deg,#ff9f70,#ff5a3c); color:#fff; }
.dz-abtn.start{ background:linear-gradient(135deg,#ffe6a0,#ffc760); color:#3a2410; }
.dz-abtn.ghost{ background:rgba(255,255,255,.1); color:#c9bfe0; box-shadow:none; }
.dz-abtn.dis{ filter:grayscale(1) opacity(.5); cursor:default; }

/* sx35：买入弹窗层级抬到牌桌(65)之上，否则被牌桌盖住看不见 */
#dzBuyModal{ z-index:72 !important; }

/* sx36：花边压暗晕影 + 准备标 */
.dz-felt::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 62% 66% at 50% 46%, transparent 40%, rgba(10,4,14,.35) 72%, rgba(8,3,12,.72) 100%); }
.dz-center,.dz-seat,.dz-banner,.dz-goddess{ z-index:2; }
.dz-ready{ font-size:10px; font-weight:800; color:#0d2; background:rgba(120,230,150,.2); border:1px solid rgba(120,230,150,.6); color:#8fe0a0; padding:0 7px; border-radius:8px; margin-top:2px; }

/* sx38：换干净牌桌背景 + 座位贴合椭圆 */
.dz-felt{ background:#0b0713 url(assets/dz-table.jpg) center/cover no-repeat !important; }
.dz-felt::after{ display:none !important; }  /* 去掉旧花边晕影 */
.dz-goddess{ display:none !important; }       /* 新牌桌自带中心标志，隐藏仙女 */
.dz-center{ top:46%; }
.dz-seat{ width:72px; }

/* sx39：雅致牌背(酒红描金) + 未发公共牌淡空位 */
.pk-back{
  background:linear-gradient(135deg,#5c1327,#390b19) !important;
  background-image:none !important;
  border:1.5px solid #d9b25a !important;
  box-shadow:inset 0 0 0 1.5px rgba(217,178,90,.3), 0 1px 4px rgba(0,0,0,.5);
  position:relative; overflow:hidden;
}
.pk-back::after{ content:""; position:absolute; left:50%; top:50%; width:44%; height:44%;
  transform:translate(-50%,-50%) rotate(45deg); border:1.2px solid rgba(217,178,90,.65);
  box-shadow:inset 0 0 0 2px rgba(217,178,90,.15); }
.pk-slot{ background:rgba(0,0,0,.16); border:1px dashed rgba(255,210,130,.3); box-shadow:none; }

/* sx40：UI 去山寨——金币/按钮/底池精修 */
.coin{ display:inline-block; width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff0b0, #e8b53c 62%, #a9781c);
  box-shadow:0 0 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,240,180,.5); vertical-align:-2px; }
.dz-stack .coin{ width:11px; height:11px; margin-right:2px; }

.dz-pot{ font-size:14px; font-weight:800; color:#ffe6b0;
  background:rgba(18,7,13,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:5px 16px; border-radius:16px; border:1px solid rgba(217,178,90,.4); box-shadow:0 2px 10px rgba(0,0,0,.5); }

/* 面前下注筹码 */
.dz-bet{ background:rgba(18,7,13,.7); border:1px solid rgba(217,178,90,.45); color:#ffe6b0; box-shadow:0 1px 4px rgba(0,0,0,.5); }

/* 行动栏 + 按钮：沉稳质感，去糖果色 */
.dz-actionbar{ background:linear-gradient(180deg, rgba(22,13,28,.7), rgba(14,9,20,.98)); gap:9px; }
.dz-abtn{
  border:1px solid rgba(255,255,255,.1); cursor:pointer; padding:13px 20px; border-radius:12px;
  font-size:15px; font-weight:800; letter-spacing:1px; color:#f0eaf6; background:#332b40;
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07); transition:transform .08s, box-shadow .08s;
}
.dz-abtn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.dz-abtn.fold{ background:#4a2f39; color:#e6b9b9; border-color:rgba(200,120,120,.25); }
.dz-abtn.call{ background:linear-gradient(180deg,#3f8a63,#2f6a4a); color:#fff; border-color:rgba(120,220,160,.3); }
.dz-abtn.raise{ background:linear-gradient(180deg,#d8b45a,#b28a2c); color:#3a2708; border-color:rgba(255,220,140,.4); }
.dz-abtn.allin{ background:linear-gradient(180deg,#d15a42,#a83525); color:#fff; border-color:rgba(255,150,120,.35); }
.dz-abtn.start{ background:linear-gradient(180deg,#d8b45a,#b28a2c); color:#3a2708; }
.dz-abtn.ghost{ background:rgba(255,255,255,.07); color:#c9bfe0; box-shadow:0 2px 0 rgba(0,0,0,.25); }
.dz-abtn.dis{ filter:grayscale(.7) opacity(.5); }
/* 头像素净些 */
.dz-ava{ background:linear-gradient(160deg,#4a4160,#2f2942); color:#e8def8; }

/* sx41：赢家金币飞行特效 */
.fly-coin{ position:absolute; width:20px; height:20px; border-radius:50%; z-index:8; pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 34% 30%, #fff6c8, #f0c33c 58%, #b5811e);
  box-shadow:0 0 6px rgba(255,210,110,.8), inset 0 0 0 1.5px rgba(255,245,190,.6); }

/* sx42：赢家横幅居中(原来飘在空位) + 净输赢颜色 */
.dz-banner{ left:50% !important; top:39% !important; width:max-content; max-width:90%; text-align:center; }
.dz-won.win{ color:#7fe0a0; }
.dz-won.lose{ color:#ff8f8f; text-shadow:none; }

/* sx45：修炼页当前境界条 */
.cul-realm{ margin-top:8px; font-size:12px; color:#d9cdf0; }
.cul-realm b{ color:#ffd98a; font-size:14px; }

/* ============ sx49：内测功能暂不上线——隐藏 修炼/活动/仙盟 tab（想上线删除本段即可）============ */
#bottomNav .nav-btn[data-tab="cultivate"],
#bottomNav .nav-btn[data-tab="activity"],
#bottomNav .nav-btn[data-tab="guild"]{ display:none !important; }

/* ============ 领取灵石页 ============ */
/* 彩虹灵石：主打入口，放大 + 常驻呼吸微光 + 标签常亮金，做到最显眼 */
#bottomNav .nav-btn[data-tab="lingshi"] .nav-ic{ background-image:url(assets/nav-lingshi.png?v=sx53); width:36px; height:36px; opacity:1; animation:lsPulse 1.9s ease-in-out infinite; }
@keyframes lsPulse{
  0%,100%{ filter:drop-shadow(0 0 2px rgba(150,180,255,.45)); transform:scale(1); }
  50%{ filter:drop-shadow(0 0 8px rgba(180,150,255,.95)) drop-shadow(0 0 4px rgba(120,220,255,.75)); transform:scale(1.1); }
}
#bottomNav .nav-btn[data-tab="lingshi"] .nav-lb{ color:#ffd98a; opacity:.95; } /* 标签常驻亮金 */
#bottomNav .nav-btn[data-tab="lingshi"]::after{ /* 红色「免费」角标，打消"要钱"顾虑 */
  content:"免费"; position:absolute; top:2px; right:calc(50% - 26px);
  font-size:9px; font-weight:800; color:#fff; letter-spacing:.5px;
  background:linear-gradient(135deg,#ff6a6a,#e03636); padding:1px 5px; border-radius:9px;
  line-height:1.35; z-index:3; box-shadow:0 1px 4px rgba(224,54,54,.55); pointer-events:none;
}
#bottomNav .nav-btn[data-tab="lingshi"].active .nav-ic{ animation:none; opacity:1; transform:translateY(-2px) scale(1.16); filter:drop-shadow(0 0 9px rgba(180,150,255,.95)) drop-shadow(0 0 4px rgba(120,220,255,.8)); }
.ls-wrap{ padding:14px 16px 90px; max-width:520px; margin:0 auto; }
.ls-card{ background:linear-gradient(150deg,rgba(60,44,96,.55),rgba(40,30,70,.4)); border:1px solid rgba(255,200,110,.25); border-radius:16px; padding:18px 16px; box-shadow:0 4px 18px rgba(0,0,0,.28); }
.ls-amt{ font-size:34px; font-weight:900; color:#ffd98a; text-shadow:0 0 14px rgba(255,200,110,.4); letter-spacing:.5px; }
.ls-amt span{ display:block; font-size:13px; font-weight:600; color:#d9cdf0; margin-top:4px; letter-spacing:0; text-shadow:none; }
.ls-rule{ margin-top:12px; font-size:12.5px; line-height:1.7; color:#c9bde6; }
.ls-status{ margin-top:14px; border-radius:14px; padding:14px 15px; font-size:14px; font-weight:800; line-height:1.5; }
.ls-status span{ display:block; margin-top:6px; font-size:12px; font-weight:500; opacity:.9; }
.ls-status code, .ls-status b{ color:#ffd98a; }
.ls-status.ls-black{ background:rgba(224,74,74,.15); border:1px solid rgba(224,74,74,.5); color:#ff9a9a; }
.ls-status.ls-pending{ background:rgba(255,190,90,.12); border:1px solid rgba(255,190,90,.4); color:#ffcf85; }
.ls-status.ls-ok{ background:rgba(90,200,120,.14); border:1px solid rgba(90,200,120,.45); color:#93e6a8; }
.ls-input{ display:block; width:100%; margin-top:16px; padding:13px 14px; border-radius:12px; border:1px solid rgba(255,200,110,.3); background:rgba(20,14,36,.6); color:#f0e9ff; font-size:14px; box-sizing:border-box; outline:none; font-family:inherit; }
.ls-input:focus{ border-color:#ffd98a; }
.ls-btn{ display:block; width:100%; margin-top:12px; padding:14px; border:none; border-radius:12px; cursor:pointer; font-size:16px; font-weight:900; color:#3a2a10; background:linear-gradient(135deg,#ffe6a0,#ffca5c); box-shadow:0 4px 14px rgba(255,200,90,.35); transition:.15s; }
.ls-btn:active{ transform:scale(.97); }
.ls-btn:disabled{ opacity:.55; cursor:default; }
.ls-msg{ margin-top:12px; font-size:13px; line-height:1.6; min-height:1em; }
.ls-msg.ok{ color:#93e6a8; }
.ls-msg.err{ color:#ff9a9a; }

/* sx51：表情面板关闭按钮(不发也能退出) */
.picker-close{
  flex:0 0 auto; width:44px; height:44px; margin-right:6px; cursor:pointer;
  border:none; border-radius:12px; font-size:20px; font-weight:800;
  background:linear-gradient(135deg,#ff7a7a,#e04a4a); color:#fff;
  box-shadow:0 2px 8px rgba(224,74,74,.4);
}
.picker-close:active{ transform:scale(.92); }

/* ============ 外门 / 内门 分段切换（牌匾式） ============ */
.room-tabs {
  position: relative; display: flex; align-items: stretch; z-index: 4; gap: 2px;
  padding: 3px 4px 0;
  background: rgba(14,11,22,.78); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.room-tab {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  padding: 4px 4px 8px; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; min-width: 0; border-radius: 12px 12px 0 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .22s ease;
}
/* 选中态的底衬光晕，让"当前在哪个门"一眼可辨 */
.room-tab.active {
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(168,107,255,.30), rgba(168,107,255,0) 70%),
    rgba(255,255,255,.045);
}

.rt-plaque {
  display: block; width: 100%; max-height: 44px; object-fit: contain;
  transition: filter .25s ease, transform .25s ease, opacity .25s ease;
  pointer-events: none;
  /* 未选中：明显压暗 + 去色 + 缩小，和选中态拉开差距 */
  filter: brightness(.40) saturate(.35) blur(.2px);
  opacity: .8; transform: scale(.88);
}
.room-tab.active .rt-plaque {
  filter: brightness(1.06) saturate(1.12) drop-shadow(0 0 9px rgba(170,130,255,.55));
  opacity: 1; transform: scale(1.03);
}
.room-tab:active .rt-plaque { transform: scale(.86); }

/* 选中态底部彩虹条：更粗更亮 */
.room-tab.active::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--rainbow);
  box-shadow: 0 0 10px rgba(168,107,255,.85), 0 0 3px rgba(255,255,255,.6);
}

/* 无牌匾图时回落成文字 */
.rt-name { display: none; font-size: 15px; font-weight: 700; letter-spacing: 3px; color: #6f6880; transition: color .2s; }
.room-tab.no-plaque .rt-plaque { display: none; }
.room-tab.no-plaque .rt-name { display: inline-block; }
.room-tab.no-plaque.active .rt-name { color: #fff; text-shadow: 0 0 10px rgba(168,107,255,.9); }

/* 锁：右上角角标 */
.rt-lock {
  display: none; position: absolute; top: 2px; right: 11%;
  font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 7px;
  background: rgba(0,0,0,.6); box-shadow: 0 0 6px rgba(0,0,0,.55);
}
.room-tab.locked .rt-lock { display: block; }
/* 锁定态：更彻底地压暗去色 */
.room-tab.locked .rt-plaque { filter: grayscale(.75) brightness(.3) saturate(.25); opacity: .62; }

/* 未读红点 */
.rt-dot {
  position: absolute; top: 3px; right: 8%;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5a5a; box-shadow: 0 0 8px rgba(255,90,90,.95);
}
.rt-dot.hidden { display: none; }

@media (max-width: 360px) { .rt-plaque { max-height: 38px; } }

/* ============ 内门未准入弹窗 ============ */
.inner-lock { text-align: center; }
.il-seal {
  width: 62px; height: 62px; margin: 2px auto 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: radial-gradient(circle at 40% 35%, rgba(177,151,252,.35), rgba(0,0,0,.35));
  border: 1px solid rgba(177,151,252,.45);
  box-shadow: 0 0 22px rgba(140,110,240,.35), inset 0 0 18px rgba(0,0,0,.4);
}
.il-rank { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.il-rank b {
  color: #ffe066; font-weight: 700; padding: 1px 8px; border-radius: 8px;
  background: rgba(255,224,102,.12); border: 1px solid rgba(255,224,102,.28);
}
.il-text { font-size: 13.5px; line-height: 1.75; color: #c8c0d8; margin: 0 0 14px; }
.il-text b { color: #b197fc; }
.il-id {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 8px 10px; margin-bottom: 4px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); font-size: 13px;
}
.il-list-head {
  margin: 14px 0 6px; font-size: 12.5px; color: var(--muted);
  padding-top: 12px; border-top: 1px solid var(--border);
}


/* 兜底：任何 number 输入都不显示加减箭头 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* 抽奖礼盒图标（替代 🎁 emoji） */
.dc-gift {
  width: 1.35em; height: 1.35em; vertical-align: -0.32em;
  margin-right: 3px; object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(168,107,255,.55));
}
/* 开奖动画标题里放大一些 */
.ds-gift { width: 1.5em; height: 1.5em; vertical-align: -0.35em; }

/* ==================== 开奖动画：仙缘揭晓 ==================== */
.draw-stage {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 0; gap: 0; overflow: hidden;
  background: #0d0818;
}
/* 星云背景（未提供背景图时用渐变模拟，日后换 .ds-sky{background-image:url(...)} 即可） */
.ds-sky {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("/assets/draw-bg.webp");
  background-size: cover; background-position: center;
}
/* 在真实背景之上再叠一层渐变，强化中心聚焦（背景图缺失时也能单独兜底） */
.ds-sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(150,90,255,.42), rgba(90,50,170,0) 62%),
    radial-gradient(90% 60% at 18% 72%, rgba(190,110,255,.30), rgba(0,0,0,0) 60%),
    radial-gradient(80% 55% at 84% 66%, rgba(120,80,230,.28), rgba(0,0,0,0) 58%),
    radial-gradient(140% 100% at 50% 100%, rgba(60,30,110,.55), rgba(13,8,24,0) 70%),
    linear-gradient(180deg, #150d28 0%, #0d0818 55%, #0a0614 100%);
}
.ds-sky::after {            /* 星点 */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 16%, #ffe9c0, transparent),
    radial-gradient(1.8px 1.8px at 62% 78%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 28% 66%, #e9d5ff, transparent),
    radial-gradient(1.5px 1.5px at 88% 52%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 42% 34%, #ffe9c0, transparent);
  animation: dsTwinkle 3.6s ease-in-out infinite;
}
@keyframes dsTwinkle { 0%,100%{opacity:.35} 50%{opacity:.7} }

.ds-stack {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-height: 100dvh; padding: 12px 14px 18px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* 素材（牌匾+符文环+莲花）与中心头像 */
.ds-frame-wrap {
  position: relative; width: min(70vw, 320px); aspect-ratio: 720 / 822;
  flex: 0 0 auto; margin-bottom: 4px;
}
.ds-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 3; pointer-events: none; }
/* 头像：对准素材圆环中心（圆心约在图高 62%、直径约占宽 58%） */
.draw-stage .spot-avatar {
  /* 位置按素材实测：镂空圆心 y=63.7%，直径占宽 51.2%，头像收到 47% 留出内圈金线 */
  position: absolute; left: 50.6%; top: 63.7%; transform: translate(-50%,-50%);
  width: 47%; aspect-ratio: 1; height: auto; border-radius: 50%;
  z-index: 2; overflow: hidden; border: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; color: #fff;
}
.draw-stage .spot-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.draw-stage .spot-avatar.spot-hit { animation: dsHit .6s ease; }
@keyframes dsHit { 0%{transform:translate(-50%,-50%) scale(1)} 40%{transform:translate(-50%,-50%) scale(1.12)} 100%{transform:translate(-50%,-50%) scale(1)} }
/* 自转光环 */
.ds-halo {
  position: absolute; left: 50.6%; top: 63.7%; transform: translate(-50%,-50%);
  width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255,220,140,0) 0deg, rgba(255,220,140,.55) 40deg, rgba(190,130,255,0) 110deg, rgba(255,220,140,0) 200deg, rgba(210,150,255,.45) 260deg, rgba(255,220,140,0) 330deg);
  filter: blur(6px); animation: dsSpin 9s linear infinite;
}
@keyframes dsSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* 转灯时的名字 */
.draw-stage .spot-name {
  font-size: 20px; font-weight: 800; letter-spacing: 1px; margin: 2px 0 10px;
  text-shadow: 0 0 14px rgba(180,130,255,.8); min-height: 26px;
}
/* 「恭喜 N 位中奖！」金色立体描边字 */
.ds-congrats {
  font-size: clamp(26px, 7.6vw, 38px); font-weight: 900; letter-spacing: 2px;
  margin: 2px 0 14px; line-height: 1.2;
  background: linear-gradient(180deg, #fff6d8 0%, #ffd982 42%, #f0ab3c 68%, #ffe9b0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(120,60,0,.55)) drop-shadow(0 0 16px rgba(255,190,90,.7));
}

/* 中奖者胶囊：深紫底 + 金边 + 两侧菱形 */
.draw-stage .draw-winners { gap: 10px 12px; max-height: none; overflow: visible; margin-bottom: 16px; }
.draw-stage .dw-chip {
  position: relative; gap: 8px; padding: 6px 20px 6px 6px;
  background: linear-gradient(180deg, rgba(52,30,92,.92), rgba(30,16,56,.92));
  border: 1.5px solid rgba(226,180,92,.85); border-radius: 999px;
  box-shadow: 0 0 14px rgba(180,120,255,.35), inset 0 1px 0 rgba(255,255,255,.12);
  font-weight: 700; color: #ffe9c0;
}
.draw-stage .dw-chip::before,
.draw-stage .dw-chip::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  background: linear-gradient(135deg, #ffe9b0, #e0a84a); transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 6px rgba(255,200,110,.8);
}
.draw-stage .dw-chip::before { left: -4px; }
.draw-stage .dw-chip::after  { right: -4px; }
.draw-stage .dw-chip .dw-av { width: 32px; height: 32px; border: 1px solid rgba(226,180,92,.6); }

/* 「完成」按钮：金边椭圆 */
.draw-stage .draw-stage-close {
  position: relative; padding: 12px 56px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(58,34,100,.95), rgba(32,18,60,.95));
  border: 1.5px solid rgba(226,180,92,.9); color: #ffe4a8;
  font-size: 18px; font-weight: 800; letter-spacing: 4px;
  box-shadow: 0 0 18px rgba(180,120,255,.4), inset 0 1px 0 rgba(255,255,255,.14);
  animation: none;
}
.draw-stage .draw-stage-close.done { background: linear-gradient(180deg, rgba(74,44,124,.96), rgba(40,22,74,.96)); color: #fff0c4; }
.draw-stage .draw-stage-close::before,
.draw-stage .draw-stage-close::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  background: linear-gradient(135deg, #ffe9b0, #e0a84a); transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 7px rgba(255,200,110,.85);
}
.draw-stage .draw-stage-close::before { left: 14px; }
.draw-stage .draw-stage-close::after  { right: 14px; }

/* 「重播开奖动画」 */
.ds-replay {
  display: block; margin-top: 14px;
  width: min(62vw, 240px); height: auto; object-fit: contain;
  cursor: pointer; user-select: none;
  filter: drop-shadow(0 0 9px rgba(160,110,255,.45));
  transition: transform .16s ease, filter .16s ease;
}
.ds-replay:active { transform: scale(.96); filter: drop-shadow(0 0 14px rgba(210,160,255,.8)); }
.ds-replay.hidden { display: none; }

/* 飘落光点 */
.ds-petals { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.ds-petal {
  position: absolute; top: -20px; width: 8px; height: 12px; border-radius: 50% 0 50% 0;
  background: linear-gradient(135deg, #ffe9b0, #e0a84a);
  opacity: .75; filter: drop-shadow(0 0 5px rgba(255,200,110,.75));
  animation: dsFall linear forwards;
}
@keyframes dsFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .8; }
  100% { transform: translateY(105vh) rotate(420deg); opacity: 0; }
}

/* 「完成」按钮改用素材图（图内已含文字） */
.draw-stage .draw-stage-close.done {
  width: min(72vw, 320px); height: auto; aspect-ratio: 640 / 160;
  padding: 0; border: none; background: none; box-shadow: none;
  background-image: url("/assets/btn-done.webp");
  background-size: 100% 100%; background-repeat: no-repeat;
  font-size: 0; text-indent: -9999px; overflow: hidden;
  filter: drop-shadow(0 0 14px rgba(180,120,255,.45));
  transition: transform .15s ease, filter .15s ease;
}
.draw-stage .draw-stage-close.done::before,
.draw-stage .draw-stage-close.done::after { content: none; }  /* 去掉 CSS 菱形，素材自带 */
.draw-stage .draw-stage-close.done:active { transform: scale(.96); filter: drop-shadow(0 0 20px rgba(255,200,120,.7)); }

/* ========== 开奖动画：金色符文光点爆发 & 细节动效 ========== */
/* 旧的西式彩色纸片停用 */
.confetti-bit { display: none !important; }

/* 从符文环中心迸发的金色光点 */
.ds-spark {
  position: absolute; left: 50.6%; top: 63.7%;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff9e0 0%, #ffd77a 45%, rgba(255,180,60,0) 72%);
  box-shadow: 0 0 10px rgba(255,214,130,.95);
  pointer-events: none; z-index: 4;
  transform: translate(-50%,-50%) scale(0);
  animation: dsSpark 1.1s cubic-bezier(.16,.8,.3,1) forwards;
}
/* 部分光点做成菱形符文碎片 */
.ds-spark-diamond {
  border-radius: 1px;
  width: 8px; height: 8px;
  background: linear-gradient(135deg, #fff4cf, #e8b25a);
  box-shadow: 0 0 9px rgba(255,206,110,.9);
}
@keyframes dsSpark {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translate(-50%,-50%) translate(calc(var(--dx) * .72), calc(var(--dy) * .72)) scale(var(--sc,1)) rotate(180deg); opacity: .95; }
  100% { transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(.15) rotate(360deg); opacity: 0; }
}

/* 定格瞬间符文环整体闪光 */
.ds-frame.ds-flash { animation: dsFlash .62s ease-out; }
@keyframes dsFlash {
  0%   { filter: none; }
  22%  { filter: brightness(1.75) saturate(1.25) drop-shadow(0 0 26px rgba(255,214,130,.95)); }
  100% { filter: none; }
}

/* 转灯期间头像轻微模糊 → 定格变清晰（聚焦感） */
.draw-stage .spot-avatar.spot-spinning { filter: blur(1.6px) brightness(.9); }
.draw-stage .spot-avatar { transition: filter .28s ease; }
.draw-stage .spot-avatar.spot-hit {
  animation: dsHit .7s cubic-bezier(.2,1.5,.4,1);
  box-shadow: 0 0 0 3px rgba(255,224,150,.85), 0 0 46px rgba(255,205,110,.85);
}

/* 中奖胶囊逐个弹入 */
.dw-pop { animation: dwPop .46s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes dwPop {
  0%   { opacity: 0; transform: translateY(14px) scale(.72); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 「恭喜 N 位中奖！」登场 */
.ds-congrats { animation: dsCong .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes dsCong {
  0%   { opacity: 0; transform: translateY(16px) scale(.86); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==================== 置顶栏：换成牌匾素材 ==================== */
.pinned-bar {
  position: relative;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 6px 8px 2px;
  aspect-ratio: 900 / 122;
  align-items: center;
  gap: 0;
  overflow: visible;
}
/* 底图：图钉 +「置顶」+ 右侧关闭圈都在素材里 */
.pinned-bar::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("/assets/pin-bar.webp");
  background-size: 100% 100%; background-repeat: no-repeat;
  pointer-events: none;
}
.pinned-bar:active::before { filter: brightness(1.12); }

/* 素材自带图钉，隐藏原来的 emoji */
.pinned-bar .pin-icon { display: none; }

/* 计数徽章：放在素材「置顶」二字右边 */
/* 按参考稿实测：计数胶囊 18.6%~29.0%，礼盒 31.4%~36.6%，正文 38.7% 起 */
.pinned-bar .pin-count {
  position: absolute; z-index: 1;
  left: 18.6%; width: 10.4%;
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  height: 46%;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #f0d59a;
  background: none;
  border: 1.2px solid rgba(226,186,110,.72);   /* 细金边，比第一版淡 */
  border-radius: 999px; padding: 0; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.pinned-bar .pin-count.hidden { display: none; }

.pinned-bar .pin-content {
  position: absolute; z-index: 1;
  left: 38.7%; right: 11%;                /* 右侧让开素材的关闭圈 */
  top: 50%; transform: translateY(-50%);
  min-width: 0; font-size: 13.5px; line-height: 1.3; overflow: hidden;
  display: flex; align-items: center; gap: 5px;
}
/* 没有礼盒（普通置顶）时，正文左移贴着计数 */
.pinned-bar:not(:has(.pin-gift:not(.hidden))) .pin-content { left: 31.4%; }
.pinned-bar .pin-name { display: none; }   /* 参考稿里不显示发送者名，正文更完整 */
.pinned-bar .pin-text {
  color: #f2ecff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
/* 关闭按钮：透明覆盖在素材的 ✕ 圈上（素材已画好圈和叉） */
.pinned-bar .icon-btn {
  position: absolute; right: 2.4%; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 11%; height: 74%; padding: 0;
  background: none; border: none; color: transparent; font-size: 0;
}
.pinned-bar .icon-btn:active { background: rgba(255,255,255,.10); border-radius: 50%; }

@media (max-width: 380px) {
  .pinned-bar .pin-content { font-size: 12.5px; }
  .pinned-bar .pin-count { font-size: 10px; padding: 1px 7px; }
}

/* 置顶栏里的礼盒图标（仅抽奖置顶显示） */
.pin-gift {
  position: absolute; z-index: 1;
  left: 31.4%; top: 50%; transform: translateY(-50%);
  height: 58%; width: auto; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255,200,110,.55));
}
.pin-gift.hidden { display: none; }

/* ============ 登录页（仿卡片式徽章设计） ============ */
.login-wrap { position: relative; width: 100%; max-width: 372px; padding-top: 54px; }

/* 徽章：压在卡片顶边上，一半在外 */
.login-emblem {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 108px; height: 108px; z-index: 2; object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(168,107,255,.55)) drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

.login-card {
  position: relative; text-align: center;
  background: linear-gradient(180deg, #1e1d3a 0%, #17162c 100%);
  border: 1px solid rgba(168,107,255,.18);
  border-radius: 26px;
  padding: 68px 26px 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}

.login-title {
  font-size: 46px; font-weight: 800; letter-spacing: 2px; line-height: 1.2;
  margin: 0 0 16px;
  background: linear-gradient(96deg, #ffe6a0 0%, #f7d489 30%, #efc97e 46%, #a9dcf0 62%, #6cc3ec 82%, #4fb2e4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(120,190,235,.28));
}

.login-sub { font-size: 13.5px; color: #b7b1c8; line-height: 1.9; margin: 0 0 24px; }
.login-sub b { color: #f0c979; font-weight: 700; }

/* 主按钮：紫色渐变 + 金边 */
.tg-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; margin: 0 0 16px; border-radius: 27px;
  background: linear-gradient(180deg, #6d3fd4 0%, #56239f 100%);
  border: 1.5px solid #d8ab55; color: #fff;
  font-size: 17px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 22px rgba(109,63,212,.42), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .12s ease, filter .12s ease;
}
.tg-btn:active { transform: scale(.975); filter: brightness(1.08); }
.tg-btn svg { color: #ffd98a; flex: 0 0 auto; }

.login-assure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; color: #d9b871; padding-bottom: 20px;
}
.login-assure svg { color: #d9b871; }

/* 底部帮助：纯 HTML details，未登录时也能用（此时前端包还没下发） */
.login-help { border-top: 1px solid rgba(255,255,255,.07); }
.login-help summary {
  list-style: none; cursor: pointer; padding: 15px 0;
  font-size: 13px; color: #a58ddb; user-select: none;
}
.login-help summary::-webkit-details-marker { display: none; }
.login-help summary::after { content: " ›"; opacity: .8; }
.login-help[open] summary::after { content: " ⌄"; }
.login-help-body { text-align: left; padding: 0 4px 18px; font-size: 12.5px; color: #b7b1c8; line-height: 1.95; }
.login-help-body b { color: #f0c979; }
.login-help-body .dim { color: #7d7791; margin-top: 8px; }

.dev-box { margin: 0 0 18px; padding-top: 18px; border-top: 1px dashed var(--border); }

@media (max-height: 700px) {
  .login-title { font-size: 34px; }
  .login-emblem { width: 92px; height: 92px; }
  .login-wrap { padding-top: 46px; }
  .login-card { padding-top: 58px; }
}

/* ============ 输入栏三按钮：圆形金边徽章 ============ */
#emojiBtn, #imgBtn, .send-btn {
  width: 44px !important; height: 44px !important; flex: 0 0 auto;
  border: none !important; border-radius: 50% !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  font-size: 0 !important; color: transparent !important;
  box-shadow: none !important;
  transition: transform .12s ease, filter .12s ease;
}
#emojiBtn { background-image: url("/assets/btn-emoji.webp") !important; }
#imgBtn   { background-image: url("/assets/btn-image.webp") !important; }
.send-btn { background-image: url("/assets/btn-send.webp") !important; }

/* 金色徽章：淡淡的暖光；发送键：紫色辉光（原素材的光晕在抠图时去掉了，这里用阴影还原） */
#emojiBtn, #imgBtn { filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.send-btn { filter: drop-shadow(0 0 8px rgba(150,90,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.45)); }

#emojiBtn:active, #imgBtn:active, .send-btn:active { transform: scale(.9); filter: brightness(1.15); }