* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brand: #0099ff;
  --brand-d: #007ee0;
  --qq1: #12b7f5;
  --qq2: #0d86e0;
  --bg: #f0f2f5;
  --panel: #ffffff;
  --line: #e6e9ef;
  --text: #1f2430;
  --muted: #8a91a0;
  --me-bubble: #a6e3ff;
  --me-bubble-text: #06344f;
  --other-bubble: #ffffff;
}
html, body { height: 100%; }
body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
img { -webkit-user-drag: none; }

/* ---------- 登录 ---------- */
.auth-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #12b7f5, #0d86e0); }
.auth-card { width: 360px; background: #fff; border-radius: 16px; padding: 32px 28px; box-shadow: 0 20px 60px rgba(20,60,110,.28); }
.auth-logo { font-size: 28px; font-weight: 700; text-align: center; color: var(--brand); }
.auth-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 6px 0 22px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab { flex: 1; padding: 9px 0; border: none; border-radius: 9px; background: #eef4fb; color: var(--muted); font-size: 15px; cursor: pointer; }
.auth-tab.active { background: var(--brand); color: #fff; }
.auth-input { width: 100%; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; outline: none; }
.auth-input:focus { border-color: var(--brand); }
.auth-btn { width: 100%; padding: 12px; border: none; border-radius: 10px; background: var(--brand); color: #fff; font-size: 16px; cursor: pointer; margin-top: 4px; }
.auth-btn:hover { background: var(--brand-d); }
.auth-err { color: #e5484d; font-size: 13px; min-height: 18px; margin-top: 10px; text-align: center; }
.auth-hint { color: var(--muted); font-size: 12px; margin-top: 8px; text-align: center; line-height: 1.6; }
.reg-hint { margin-top: 10px; padding: 10px; background: #eaf6ff; border: 1px solid #bce3ff; border-radius: 9px; font-size: 13px; color: #007ee0; text-align: center; line-height: 1.6; }

/* ---------- 主布局 ---------- */
.app { display: flex; height: 100vh; }

/* ① 导航栏 */
.navrail { width: 66px; background: linear-gradient(180deg, var(--qq1), var(--qq2)); display: flex; flex-direction: column; align-items: center; padding: 16px 0 12px; flex-shrink: 0; }
.nav-avatar { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.25); cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; border: 2px solid rgba(255,255,255,.6); }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-status { margin: 8px 0 14px; background: rgba(255,255,255,.18); color: #fff; border: none; border-radius: 6px; font-size: 11px; padding: 2px 2px; cursor: pointer; text-align: center; }
.nav-status option { color: #333; }
.nav-items { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }
.nav-item { position: relative; width: 46px; height: 46px; border: none; background: transparent; border-radius: 12px; font-size: 22px; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; opacity: .82; }
.nav-item:hover { background: rgba(255,255,255,.16); opacity: 1; }
.nav-item.active { background: rgba(255,255,255,.28); opacity: 1; }
.nav-item.small { font-size: 18px; width: 40px; height: 40px; }
.nav-bottom { margin-top: auto; }
.nav-badge { position: absolute; top: 4px; right: 6px; background: #ff4d4f; color: #fff; font-size: 10px; min-width: 15px; height: 15px; line-height: 15px; border-radius: 8px; padding: 0 3px; }

/* ② 列表栏 */
.listcol { width: 288px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; }
.list-head { display: flex; gap: 8px; padding: 12px 12px; border-bottom: 1px solid var(--line); }
.list-search { flex: 1; padding: 8px 12px; border: none; background: #f0f2f5; border-radius: 8px; font-size: 13px; outline: none; }
.head-add { width: 34px; border: none; background: #f0f2f5; border-radius: 8px; font-size: 18px; color: var(--muted); cursor: pointer; }
.head-add:hover { background: #e3f2ff; color: var(--brand); }
.listview { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.list { flex: 1; overflow-y: auto; }

.contact-actions { display: flex; gap: 6px; padding: 10px 12px 6px; }
.contact-actions button { flex: 1; padding: 7px 4px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 12px; cursor: pointer; color: var(--text); position: relative; }
.contact-actions button:hover { border-color: var(--brand); color: var(--brand); }
.badge { position: absolute; top: -6px; right: -4px; background: #ff4d4f; color: #fff; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; padding: 0 4px; }
.contact-tabs { display: flex; border-bottom: 1px solid var(--line); }
.contact-tab { flex: 1; padding: 9px 0; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; border-bottom: 2px solid transparent; }
.contact-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

/* 好友分组标题 */
.grp-title { padding: 8px 14px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; }
.grp-title:hover { background: #f7f9fc; }
.grp-title .cnt { margin-left: auto; }

.list-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.list-item:hover { background: #f2f7fd; }
.list-item.active { background: #e3f2ff; }
.li-avatar { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; position: relative; overflow: visible; }
.li-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.li-body { flex: 1; min-width: 0; }
.li-top { display: flex; justify-content: space-between; align-items: baseline; }
.li-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-time { color: var(--muted); font-size: 11px; flex-shrink: 0; margin-left: 6px; }
.li-last { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-qid { color: #a4abb8; font-size: 11px; }
.dot-online, .dot-offline { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; position: absolute; bottom: -1px; right: -1px; }
.dot-online { background: #33c469; } .dot-offline { background: #c2c8d2; }
.li-unread { background: #ff4d4f; color: #fff; font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; padding: 0 5px; margin-left: 6px; }
.pin-tag { color: #f5793b; font-size: 10px; border: 1px solid #f5c9a8; border-radius: 4px; padding: 0 3px; margin-left: 4px; }
.mute-tag { color: #a4abb8; font-size: 11px; margin-left: 4px; }

/* ③ 主区 */
.maincol { flex: 1; display: flex; min-width: 0; }
.main-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 12px; }
.chat-empty-icon { font-size: 56px; }
.chat-room { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.chat-head { padding: 13px 20px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.chat-title { font-weight: 600; font-size: 16px; }
.chat-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.chat-set { border: none; background: transparent; font-size: 20px; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.chat-set:hover { background: #eef1f7; }
.messages { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; background: #f5f7fa; }
.msg-row { display: flex; gap: 8px; align-items: flex-end; max-width: 72%; position: relative; }
.msg-row.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13px; overflow: hidden; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-row.me .msg-col { align-items: flex-end; }
.msg-sender { font-size: 11px; color: var(--muted); padding: 0 4px; }
.bubble { padding: 9px 13px; border-radius: 10px; font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; background: var(--other-bubble); box-shadow: 0 1px 2px rgba(30,40,90,.06); }
.msg-row.me .bubble { background: var(--me-bubble); color: var(--me-bubble-text); }
.bubble img { max-width: 220px; border-radius: 8px; display: block; cursor: pointer; }
.bubble a.file { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.msg-time { font-size: 10px; color: var(--muted); padding: 0 4px; }
.msg-recalled { align-self: center; color: var(--muted); font-size: 12px; background: #eceff4; padding: 4px 12px; border-radius: 10px; }
.msg-system { align-self: center; color: #97a0b0; font-size: 12px; background: #eaeef3; padding: 3px 12px; border-radius: 10px; }
.recall-btn { position: absolute; top: -6px; font-size: 11px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; cursor: pointer; display: none; }
.msg-row.me:hover .recall-btn { display: block; left: -52px; }
.recall-btn:hover { color: var(--brand); border-color: var(--brand); }
.typing-tip { padding: 0 20px 4px; height: 18px; color: var(--muted); font-size: 12px; background: #f5f7fa; }

.emoji-panel { background: #fff; border-top: 1px solid var(--line); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 2px; max-height: 180px; overflow-y: auto; }
.emoji-panel span { font-size: 22px; cursor: pointer; padding: 4px; border-radius: 6px; line-height: 1; }
.emoji-panel span:hover { background: #eef1f7; }
/* 输入区：工具栏在上一排，输入框+发送在下一排，输入框永不被挤窄 */
.composer { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.composer-tools { display: flex; align-items: center; gap: 4px; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.icon-btn { border: none; background: transparent; cursor: pointer; font-size: 20px; color: var(--muted); padding: 4px 6px; border-radius: 6px; flex-shrink: 0; }
.icon-btn:hover { background: #eef1f7; }
html[data-theme="dark"] .icon-btn:hover { background: #2a2f3a; }
.composer-input { flex: 1 1 auto; min-width: 0; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; line-height: 1.4; outline: none; max-height: 120px; background: #fff; color: var(--text); }
html[data-theme="dark"] .composer-input { background: #2a2f3a; }
.composer-input:focus { border-color: var(--brand); }
.send-btn { flex-shrink: 0; padding: 10px 22px; border: none; border-radius: 10px; background: var(--brand); color: #fff; font-size: 14px; cursor: pointer; align-self: stretch; }
.send-btn:hover { background: var(--brand-d); }

/* 空间 */
.space-panel { padding: 16px; }
.space-me { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.space-me .li-avatar { width: 46px; height: 46px; }
.space-compose { width: 100%; padding: 10px; border: 1px dashed var(--brand); background: #f2faff; color: var(--brand); border-radius: 10px; cursor: pointer; font-size: 14px; }
.feed-wrap { flex: 1; overflow-y: auto; background: #f5f7fa; }
.feed-head { display: flex; align-items: center; gap: 6px; padding: 16px 24px; font-size: 16px; font-weight: 600; background: linear-gradient(120deg,#12b7f5,#0d86e0); color: #fff; }
.feed-list { max-width: 620px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.moment { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(30,50,90,.06); }
.moment-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.moment-head .li-avatar { width: 42px; height: 42px; }
.moment-name { font-weight: 600; font-size: 14px; }
.moment-time { color: var(--muted); font-size: 12px; }
.moment-text { font-size: 14px; line-height: 1.6; margin: 4px 0 10px; white-space: pre-wrap; word-break: break-word; }
.moment-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.moment-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; }
.moment-imgs.single { grid-template-columns: 1fr; max-width: 260px; }
.moment-imgs.single img { aspect-ratio: auto; max-height: 300px; }
.moment-video { margin-bottom: 10px; }
.moment-video video { max-width: 100%; max-height: 340px; border-radius: 10px; background: #000; display: block; }
.moment-bar { display: flex; gap: 16px; border-top: 1px solid #f0f2f5; padding-top: 10px; }
.moment-bar button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; }
.moment-bar button.on { color: var(--brand); }
.moment-likes { font-size: 13px; color: var(--brand); background: #f2faff; padding: 6px 10px; border-radius: 8px; margin-top: 8px; }
.moment-comments { margin-top: 8px; }
.moment-cmt { font-size: 13px; padding: 3px 0; }
.moment-cmt b { color: #0077cc; }
.cmt-box { display: flex; gap: 6px; margin-top: 8px; }
.cmt-box input { flex: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; outline: none; }
.cmt-box button { padding: 0 14px; border: none; background: var(--brand); color: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; }

/* 弹窗 & 通用 */
.modal-wrap { position: fixed; inset: 0; background: rgba(20,25,40,.45); display: flex; align-items: center; justify-content: center; z-index: 120; }
.modal { width: 400px; max-width: 92vw; background: #fff; border-radius: 14px; padding: 22px; }
.modal-title { font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.modal-body { margin-bottom: 18px; max-height: 60vh; overflow-y: auto; }
.modal-body input, .modal-body textarea, .modal-body select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; outline: none; margin-bottom: 8px; font-family: inherit; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; }
.modal-btn { padding: 9px 18px; border: none; border-radius: 9px; background: var(--brand); color: #fff; cursor: pointer; font-size: 14px; }
.modal-btn.ghost { background: #eef1f7; color: var(--text); }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.pick-row:hover { background: #f4f6fa; }
.pick-row .li-avatar { width: 34px; height: 34px; font-size: 14px; }
.result-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid #f0f2f6; }
.mini-btn { padding: 5px 12px; border: 1px solid var(--brand); background: #fff; color: var(--brand); border-radius: 7px; cursor: pointer; font-size: 12px; }
.mini-btn:hover { background: var(--brand); color: #fff; }
.mini-btn.danger { border-color: #e5484d; color: #e5484d; }
.mini-btn.danger:hover { background: #e5484d; color: #fff; }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(20,25,40,.88); color: #fff; padding: 10px 20px; border-radius: 10px; font-size: 14px; z-index: 130; max-width: 86vw; text-align: center; }

/* 资料卡 */
.profile-card { text-align: center; }
.profile-avatar { width: 84px; height: 84px; border-radius: 16px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 34px; overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-upload { display: inline-block; margin: 4px 0 14px; font-size: 13px; color: var(--brand); cursor: pointer; }
.profile-field { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-align: left; }
.profile-field label { width: 52px; color: var(--muted); font-size: 13px; flex-shrink: 0; }
.profile-field input, .profile-field select { margin-bottom: 0; }
.profile-qid { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.profile-qid b { color: #f5793b; font-size: 16px; }

/* 群管理 & 成员 */
.gm-sec { margin-bottom: 14px; }
.gm-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.gm-members { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.gm-mem { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.gm-mem:hover { background: #f4f6fa; }
.gm-mem .li-avatar { width: 32px; height: 32px; font-size: 13px; }
.role-tag { font-size: 10px; padding: 0 5px; border-radius: 4px; margin-left: 4px; }
.role-owner { background: #fff2e0; color: #e08a1e; }
.role-admin { background: #e8f4ff; color: #2f88e0; }
.gm-actions { margin-left: auto; display: flex; gap: 4px; }

/* 会话右键菜单 */
.ctx-menu { position: fixed; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 24px rgba(20,30,60,.16); padding: 4px; z-index: 70; min-width: 132px; }
.ctx-menu div { padding: 8px 12px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.ctx-menu div:hover { background: #f0f3f9; }
.ctx-menu div.danger { color: #e5484d; }

/* 聊天头部布局 + 通话按钮 */
.chat-head-title { flex: 1; min-width: 0; }
.chat-head-btns { display: flex; gap: 2px; }
.btn-back { display: none; flex-shrink: 0; border: none; background: transparent; font-size: 26px; color: var(--muted); cursor: pointer; padding: 0 10px 0 0; line-height: 1; }
.btn-back.light { color: #fff; }

/* 语音消息气泡 */
.voice-bubble { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 90px; }
.voice-ico { font-size: 18px; }
.voice-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.voice-wave i { width: 3px; background: currentColor; border-radius: 2px; opacity: .55; }
.msg-row.me .voice-bubble { flex-direction: row-reverse; }
.voice-dur { font-size: 12px; opacity: .8; }
.voice-bubble.playing .voice-wave i { animation: vw .8s infinite ease-in-out; }
@keyframes vw { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* 录音条 */
.record-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fff5f5; border-top: 1px solid #ffd9d9; color: #e5484d; font-size: 14px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.rec-time { font-variant-numeric: tabular-nums; }
.rec-op { margin-left: auto; padding: 6px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; }
.rec-op.cancel { background: #eef1f7; color: #555; margin-left: auto; }
.rec-op.send { background: var(--brand); color: #fff; margin-left: 8px; }

/* 通话覆盖层 */
.call-overlay { position: fixed; inset: 0; background: #0e1420; z-index: 90; overflow: hidden; }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0e1420; }
.call-local { position: absolute; right: 16px; top: 64px; width: 130px; height: 180px; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.4); background: #223; z-index: 2; }
.call-audioface { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; }
.call-bigavatar { width: 96px; height: 96px; border-radius: 24px; background: linear-gradient(135deg,#12b7f5,#0d86e0); display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700; color: #fff; }
.call-peer-big { font-size: 22px; font-weight: 600; color: #fff; }
.call-topbar { position: absolute; top: 0; left: 0; right: 0; padding: 18px 20px; display: flex; justify-content: space-between; color: #fff; font-size: 16px; z-index: 3; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.call-timer { font-variant-numeric: tabular-nums; }
.call-peer { font-size: 12px; color: #fff; }
.call-tip { color: #cdd6e4; font-size: 14px; }
.call-incoming { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 4; }
.call-actions { display: flex; gap: 60px; margin-top: 30px; }
.call-controls { position: absolute; bottom: 40px; left: 0; right: 0; display: flex; justify-content: center; gap: 30px; z-index: 4; }
.call-btn { width: 66px; height: 66px; border-radius: 50%; border: none; font-size: 26px; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.call-btn span { font-size: 11px; margin-top: 2px; }
.call-btn.accept { background: #33c469; } .call-btn.reject { background: #e5484d; }
.call-ctrl { width: 58px; height: 58px; border-radius: 50%; border: none; background: rgba(255,255,255,.22); color: #fff; font-size: 24px; cursor: pointer; }
.call-ctrl.off { background: rgba(255,255,255,.55); color: #333; }
.call-ctrl.hang { background: #e5484d; transform: rotate(133deg); }

/* PWA 安装提示条 */
.install-tip { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(20,40,80,.15); border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; z-index: 80; font-size: 13px; }
.install-tip button { border: none; background: var(--brand); color: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.feed-compose { margin-left: auto; border: none; background: rgba(255,255,255,.25); color: #fff; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 13px; }

/* ---------- 响应式：手机 ---------- */
@media (max-width: 720px) {
  .navrail { width: 54px; padding-top: 10px; }
  .nav-avatar { width: 38px; height: 38px; }
  .nav-item { width: 40px; height: 40px; font-size: 20px; }
  .listcol { width: auto; flex: 1; }
  .maincol { position: fixed; inset: 0; z-index: 60; background: var(--bg); transform: translateX(100%); transition: transform .25s ease; }
  #app.main-open .maincol { transform: translateX(0); }
  .btn-back { display: block; }
  .call-local { width: 100px; height: 140px; }
  .msg-row { max-width: 84%; }
  .feed-list { padding: 14px 10px 40px; }
  /* 弹窗改成底部抽屉（更像手机游戏） */
  .modal-wrap { align-items: flex-end; }
  .modal { width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); max-height: 82vh; display: flex; flex-direction: column; }
  .modal-body { overflow-y: auto; flex: 1; min-height: 0; }
  /* 养成馆手机版：场景全屏、元素紧凑 */
  .tank { inset: 0; border-radius: 0; box-shadow: inset 0 8px 30px rgba(0,30,70,.35); }
  .critter .clv { font-size: 9.5px; padding: 2px 5px; top: -17px; }
  .scene-tier { font-size: 12px; padding: 5px 11px; }
  .scene-coins { font-size: 12.5px; padding: 6px 11px; }
  .dock-btn { min-width: 46px; padding: 6px 5px 4px; }
  .dock-txt { font-size: 10px; }
  .scene-dock { gap: 5px; }
  .dock-btn .dock-ico { font-size: 19px; }
  .roster-panel { z-index: 880; width: 72vw; max-height: 56%; }
}
@media (max-width: 720px) and (display-mode: standalone) {
  .navrail { padding-bottom: 24px; }
}

/* ---------- 深色模式 ---------- */
html[data-theme="dark"] {
  --bg: #14161b; --panel: #1e2128; --line: #2c313b; --text: #e7e9ee; --muted: #8b93a2;
  --other-bubble: #2a2f3a; --me-bubble: #295fb0; --me-bubble-text: #eaf3ff;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .messages,
html[data-theme="dark"] .typing-tip,
html[data-theme="dark"] .feed-wrap,
html[data-theme="dark"] .maincol { background: #14161b; }
html[data-theme="dark"] .list-search,
html[data-theme="dark"] .head-add { background: #2a2f3a; color: var(--text); }
html[data-theme="dark"] .list-item:hover { background: #262b34; }
html[data-theme="dark"] .list-item.active { background: #2b3442; }
html[data-theme="dark"] .grp-title:hover { background: #22262e; }
html[data-theme="dark"] .contact-actions button { background: #2a2f3a; color: var(--text); }
html[data-theme="dark"] .contact-actions button:hover { border-color: var(--brand); color: #7fc6ff; }
html[data-theme="dark"] .emoji-panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .moment,
html[data-theme="dark"] .ctx-menu,
html[data-theme="dark"] .install-tip,
html[data-theme="dark"] .mention-pop { background: #22262e; color: var(--text); }
html[data-theme="dark"] .ctx-menu div:hover,
html[data-theme="dark"] .mention-item:hover { background: #2c323d; }
html[data-theme="dark"] .modal-body input,
html[data-theme="dark"] .modal-body textarea,
html[data-theme="dark"] .modal-body select,
html[data-theme="dark"] .composer-input,
html[data-theme="dark"] .cmt-box input { background: #2a2f3a; color: var(--text); border-color: #333a45; }
html[data-theme="dark"] .msg-recalled,
html[data-theme="dark"] .msg-system { background: #262b34; color: #97a0b0; }
html[data-theme="dark"] .modal-btn.ghost { background: #333a45; color: var(--text); }
html[data-theme="dark"] .moment-likes { background: #1c2836; }
html[data-theme="dark"] .moment-bar { border-color: #2c313b; }
html[data-theme="dark"] .bubble { box-shadow: none; }

/* ---------- 练歌房 ---------- */
.kroom-body { flex: 1; overflow-y: auto; padding: 18px 16px 40px; max-width: 640px; margin: 0 auto; width: 100%; }
.sing-studio { background: linear-gradient(135deg, #6a5cf5, #12b7f5); border-radius: 16px; padding: 22px; color: #fff; text-align: center; margin-bottom: 18px; }
.sing-wave { height: 60px; display: flex; align-items: center; justify-content: center; gap: 3px; margin: 12px 0; }
.sing-wave i { width: 4px; background: rgba(255,255,255,.85); border-radius: 2px; height: 8px; transition: height .08s; }
.sing-timer { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.sing-hint { font-size: 13px; opacity: .85; margin-top: 4px; }
.sing-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.sing-btn { padding: 10px 20px; border: none; border-radius: 22px; font-size: 15px; cursor: pointer; background: rgba(255,255,255,.22); color: #fff; }
.sing-btn.primary { background: #fff; color: #0d86e0; font-weight: 600; }
.sing-btn.rec { background: #ff4d4f; }
.sing-btn:disabled { opacity: .5; cursor: not-allowed; }
.song-card { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(30,50,90,.06); }
html[data-theme="dark"] .song-card { background: #22262e; }
.song-play { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#6a5cf5,#12b7f5); color: #fff; border: none; font-size: 18px; cursor: pointer; flex-shrink: 0; }
.song-meta { flex: 1; min-width: 0; }
.song-title { font-weight: 600; font-size: 15px; }
.song-sub { color: var(--muted); font-size: 12px; }
.song-ops { display: flex; gap: 6px; }
/* 聊天里的歌卡片 */
.song-bubble { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 170px; }
.song-bubble .sb-ico { font-size: 26px; }
.song-bubble .sb-t { font-weight: 600; font-size: 14px; }
.song-bubble .sb-d { font-size: 12px; opacity: .75; }

/* ---------- 养成馆 ---------- */
.game-coins { text-align: center; font-size: 20px; font-weight: 700; color: #e0a020; background: #fff8e6; border: 1px solid #ffe6a8; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
html[data-theme="dark"] .game-coins { background: #2a2618; border-color: #4a3f1e; }
/* 顶部整块：渐变画在 feed-wrap 上，标题条和页签都透明叠在上面，中间不会有接缝
   带高 168px，多出来的部分被下面不透明的 .game-body 盖住 */
#main-game .feed-wrap {
  background-image:
    radial-gradient(circle at 86% -34%, rgba(255,255,255,.34), rgba(255,255,255,0) 56%),
    linear-gradient(135deg, #22cafb 0%, #12a2ef 44%, #0a6fd6 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: 100% 150px, 100% 150px;
}
#main-game .feed-head {
  background: none; padding: 14px 16px 11px; font-size: 17px; letter-spacing: .4px;
  text-shadow: 0 1px 3px rgba(0,40,90,.3);
}
#main-game .btn-back.light {
  width: 30px; height: 30px; padding: 0; margin-right: 3px; border-radius: 50%;
  font-size: 21px; line-height: 27px; text-align: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  transition: background .15s ease;
}
#main-game .btn-back.light:active { background: rgba(255,255,255,.34); }
#game-title-extra { font-size: 12.5px; font-weight: 600; opacity: .92; }
/* 三馆切换：磨砂分段控件 */
.game-tabs {
  display: flex; gap: 3px; margin: 0 14px 12px; padding: 4px; border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.15); border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0,25,70,.16); backdrop-filter: blur(6px);
}
.game-tab {
  flex: 1; padding: 8px 0; border: none; background: transparent; cursor: pointer;
  color: rgba(255,255,255,.86); font-size: 13.5px; font-weight: 700; border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.game-tab:active { transform: scale(.95); }
.game-tab.active { color: #0a6fd6; background: #fff; box-shadow: 0 2px 7px rgba(0,30,80,.26); }
html[data-theme="dark"] .game-tab { background: transparent; }
html[data-theme="dark"] .game-tab.active { background: #fff; }
@media (max-width: 720px) {
  #main-game .feed-head { padding: 11px 13px 9px; font-size: 16px; }
  .game-tabs { margin: 0 12px 10px; }
  .game-tab { font-size: 13px; padding: 7px 0; }
}
.game-body { flex: 1; overflow-y: auto; padding: 16px; background: #f5f7fa; }
html[data-theme="dark"] .game-body { background: #14161b; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-width: 760px; margin: 0 auto; }
.pet-card { background: #fff; border-radius: 14px; padding: 14px 12px; text-align: center; box-shadow: 0 2px 6px rgba(30,50,90,.07); border: 2px solid transparent; }
html[data-theme="dark"] .pet-card { background: #22262e; }
.pet-emoji { font-size: 52px; line-height: 1; margin: 4px 0 6px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); display: inline-block; will-change: transform; }
/* 让宠物"动"起来：动物蹦跶 / 植物摇摆 / 鱼游动 */
.pet-emoji.a-animal { animation: petHop 1.5s ease-in-out infinite; transform-origin: center bottom; }
.pet-emoji.a-plant { animation: petSway 3.2s ease-in-out infinite; transform-origin: center bottom; }
.pet-emoji.a-fish { animation: petSwim 4s ease-in-out infinite; }
@keyframes petHop { 0%,100% { transform: translateY(0) scaleY(1); } 20% { transform: translateY(0) scaleY(.86); } 45% { transform: translateY(-14px) scaleY(1.08); } 70% { transform: translateY(0) scaleY(.94); } }
@keyframes petSway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes petSwim { 0% { transform: translateX(-12px) rotate(-4deg); } 48% { transform: translateX(14px) rotate(4deg); } 50% { transform: translateX(14px) rotate(4deg) scaleX(-1); } 98% { transform: translateX(-12px) rotate(-4deg) scaleX(-1); } 100% { transform: translateX(-12px) rotate(-4deg); } }
.pet-emoji.happy { animation: petHappy .6s ease; }
@keyframes petHappy { 0% { transform: scale(1); } 30% { transform: scale(1.45) rotate(-14deg); } 60% { transform: scale(1.2) rotate(14deg); } 100% { transform: scale(1); } }
/* 喂食飘字 */
.pet-float { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); color: #e0a020; font-weight: 700; font-size: 15px; pointer-events: none; animation: petFloatUp 1.1s ease forwards; }
@keyframes petFloatUp { 0% { opacity: 0; transform: translate(-50%, 8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -42px); } }
/* 三个馆的主题背景 */
.game-body { position: relative; }
html:not([data-theme="dark"]) .game-body.theme-animal { background: linear-gradient(180deg, #eef8ea, #d8efd4); }
html:not([data-theme="dark"]) .game-body.theme-plant { background: linear-gradient(180deg, #f2f9e6, #dff0c8); }
html:not([data-theme="dark"]) .game-body.theme-fish { background: linear-gradient(180deg, #e2f2ff, #bfe6ff); }
/* 海洋馆气泡 */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubbles span { position: absolute; bottom: -20px; width: 12px; height: 12px; background: rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 0 4px rgba(255,255,255,.5); animation: bubbleRise linear infinite; }
@keyframes bubbleRise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-90vh) scale(1.1); opacity: 0; } }
.pet-grid { position: relative; z-index: 1; }

/* ---------- 场景式养成馆（鱼缸/园子/花圃） ---------- */
.game-body.scene-mode { padding: 0; overflow: hidden; }
.scene { position: relative; width: 100%; height: 100%; min-height: 460px; overflow: hidden; }
/* 鱼缸 */
.tank { position: absolute; inset: 18px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #2f6ea6 0%, #123a63 70%, #0c2c4b 100%); box-shadow: inset 0 8px 40px rgba(0,0,0,.45), inset 0 0 0 2px rgba(190,225,255,.25), 0 0 0 5px rgba(160,205,245,.28), 0 14px 34px rgba(0,20,40,.35); }
.tank .sand { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(180deg, #d8c48f, #b39a6a); }
.tank .decor { position: absolute; bottom: 26px; font-size: 34px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.tank .glass-glow { position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent); pointer-events: none; }
/* 陆地馆 */
.zoo { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #bfe6ff 0%, #e9f7ff 52%, #9bdf8f 52%, #6cc862 100%); }
.zoo .cloud { position: absolute; font-size: 34px; opacity: .95; animation: cloudDrift 26s linear infinite; }
@keyframes cloudDrift { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
.zoo .sun { position: absolute; right: 8%; top: 8%; font-size: 40px; }
/* 植物园 */
.garden { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #cdeefe 0%, #eaf8ff 62%, #c9a06a 62%, #7a4f2c 100%); }
.garden .soil-line { position: absolute; left: 0; right: 0; top: 62%; height: 3px; background: rgba(90,55,25,.4); }
/* 生物精灵 */
.critter { position: absolute; font-size: 42px; cursor: pointer; will-change: transform; user-select: none; z-index: 2; }
.critter .clv { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); font-size: 10px; line-height: 1; background: rgba(13,31,56,.9); color: #fff; padding: 2px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); white-space: nowrap; font-weight: 700; box-shadow: 0 2px 6px rgba(0,10,30,.4); pointer-events: none; z-index: 5; }
.critter .clv::after { content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); border: 4px solid transparent; border-top-color: rgba(13,31,56,.9); border-bottom: none; }
.critter.sway { animation: critterSway 3.4s ease-in-out infinite; transform-origin: center bottom; }
@keyframes critterSway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.scene-add { position: absolute; right: 16px; bottom: 16px; z-index: 6; padding: 9px 16px; border: none; border-radius: 22px; background: var(--brand); color: #fff; cursor: pointer; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.scene-add:hover { background: var(--brand-d); }
.scene-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: .85; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.4); pointer-events: none; }

/* ---------- 养成馆：撑满全屏的游戏视图 ---------- */
#main-game .feed-wrap { display: flex; flex-direction: column; overflow: hidden; }
#main-game .game-body { flex: 1; min-height: 0; }
.game-body.scene-mode .scene { height: 100%; min-height: 0; }
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -60px 70px -50px rgba(0,10,30,.35), inset 0 30px 50px -40px rgba(0,10,30,.22); z-index: 600; }
/* 顶栏：馆名牌 + 金币 */
.scene-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; z-index: 910; pointer-events: none; }
.scene-tier { display: flex; flex-direction: column; line-height: 1.25; background: linear-gradient(160deg, rgba(20,45,90,.85), rgba(10,26,55,.85)); color: #ffe9b8; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 12px; border: 1px solid rgba(255,220,140,.4); box-shadow: 0 3px 10px rgba(0,10,30,.4); backdrop-filter: blur(4px); }
.scene-tier i { font-style: normal; font-size: 10.5px; font-weight: 600; color: #bcd6f5; }
.scene-coins { background: linear-gradient(160deg, rgba(20,45,90,.85), rgba(10,26,55,.85)); color: #ffd94a; font-size: 13.5px; font-weight: 800; padding: 7px 13px; border-radius: 20px; border: 1px solid rgba(255,220,140,.4); box-shadow: 0 3px 10px rgba(0,10,30,.4); backdrop-filter: blur(4px); }
/* 底部按钮坞：游戏式圆钮 */
.scene-dock { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; align-items: flex-end; gap: 10px; z-index: 900; padding: 0 10px; pointer-events: none; }
.dock-btn { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 7px 10px 5px; border-radius: 16px; border: 1px solid rgba(255,255,255,.35); background: linear-gradient(160deg, rgba(30,60,110,.88), rgba(14,32,66,.88)); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0,10,30,.45), inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(5px); transition: transform .12s ease; }
.dock-btn:active { transform: scale(.93); }
.dock-btn .dock-ico { font-size: 21px; line-height: 1.15; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.dock-btn .dock-txt { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.dock-btn.gold { background: linear-gradient(160deg, #ffc233, #e8880c); border-color: rgba(255,240,190,.7); color: #5a3600; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.dock-btn.steal { background: linear-gradient(160deg, #b06cf5, #7d3fd6); border-color: rgba(235,210,255,.65); animation: stealPulse 1.6s ease-in-out infinite; }
.dock-btn.wide { flex-direction: row; gap: 7px; padding: 10px 20px; border-radius: 24px; }
.dock-btn.wide .dock-txt { font-size: 13.5px; }
.dock-note { background: rgba(13,31,56,.72); color: #dbe7f7; font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }
@keyframes stealPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(165,94,234,.55); } 50% { box-shadow: 0 0 0 8px rgba(165,94,234,0); } }
.steal-mark { font-size: 11px; color: #c8871a; background: #fff4dd; border: 1px solid #f0d9a8; border-radius: 8px; padding: 0 6px; font-weight: 700; }
.scene-top-right { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.scene-rank-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,220,140,.5); background: linear-gradient(160deg, #ffd45c, #f0a11c); font-size: 17px; cursor: pointer; box-shadow: 0 3px 10px rgba(0,10,30,.4); }
.scene-rank-btn:active { transform: scale(.92); }

/* ---------- 好友榜：领奖台 + 列表 + 我的名次悬浮 ---------- */
.rank-body { padding: 0 0 70px; overflow-y: auto; background: linear-gradient(180deg, #1c3a6e 0%, #244b8a 300px, #f2f5fa 300px, #f2f5fa 100%); position: relative; }
html[data-theme="dark"] .rank-body { background: linear-gradient(180deg, #1c3a6e 0%, #244b8a 300px, #14161b 300px, #14161b 100%); }
.podium-slot .podium-name, .podium-slot .podium-score { position: relative; z-index: 1; }
.rank-tabs { display: flex; gap: 8px; padding: 12px 14px 4px; }
.rank-tab { flex: 1; padding: 8px 0; border-radius: 18px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #dbe7fb; font-size: 13px; font-weight: 700; cursor: pointer; }
.rank-tab.active { background: linear-gradient(135deg, #ffd45c, #f0a11c); color: #4a3000; border-color: rgba(255,240,190,.8); }
.rank-tip { text-align: center; color: #b7cbea; font-size: 11.5px; padding: 4px 12px 0; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding: 10px 12px 0; }
.podium-slot { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.podium-crown { font-size: 22px; line-height: 1; margin-bottom: 2px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.podium-slot.p1 .podium-crown { font-size: 30px; animation: crownBob 1.8s ease-in-out infinite; }
@keyframes crownBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.rank-ava { position: relative; }
.rank-ava.big .li-avatar { border: 3px solid #ffd45c; box-shadow: 0 0 0 3px rgba(255,212,92,.35), 0 4px 12px rgba(0,0,0,.4); }
.podium-slot.p2 .rank-ava.big .li-avatar { border-color: #cfd8e3; box-shadow: 0 0 0 3px rgba(207,216,227,.35), 0 4px 12px rgba(0,0,0,.4); }
.podium-slot.p3 .rank-ava.big .li-avatar { border-color: #d9955a; box-shadow: 0 0 0 3px rgba(217,149,90,.35), 0 4px 12px rgba(0,0,0,.4); }
.online-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #2ecc71; border: 2px solid #fff; }
.podium-name { color: #fff; font-size: 12.5px; font-weight: 700; margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-score { color: #ffe08a; font-size: 12px; font-weight: 700; }
.podium-empty { color: #8fa9d3; font-size: 12px; margin: 14px 0 6px; }
.podium-base { width: 100%; margin-top: 6px; border-radius: 10px 10px 0 0; text-align: center; color: #fff; font-weight: 900; font-size: 18px; background: linear-gradient(180deg, #ffd45c, #e59a1a); height: 54px; line-height: 54px; box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.podium-slot.p2 .podium-base { height: 40px; line-height: 40px; background: linear-gradient(180deg, #e2e8f0, #a9b6c7); color: #3a4757; }
.podium-slot.p3 .podium-base { height: 30px; line-height: 30px; background: linear-gradient(180deg, #e8b184, #b46f37); }
.podium-slot.empty .podium-base { opacity: .5; }
.rank-list { padding: 10px 12px 0; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 8px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(20,40,80,.06); cursor: pointer; }
html[data-theme="dark"] .rank-row { background: #1e2128; }
.rank-row.me { border: 1.5px solid #ffd45c; background: #fffaf0; cursor: default; }
html[data-theme="dark"] .rank-row.me { background: #2a2820; }
.rank-no { width: 26px; text-align: center; font-weight: 800; color: #8a94a6; font-size: 14px; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-sub { font-size: 11.5px; color: #8a94a6; margin-top: 2px; }
.rank-score { text-align: right; line-height: 1.1; }
.rank-score b { font-size: 16px; color: #0d86e0; }
.rank-score span { display: block; font-size: 10.5px; color: #8a94a6; }
.me-tag { font-size: 10px; background: #ffd45c; color: #4a3000; padding: 0 6px; border-radius: 8px; vertical-align: middle; }
.rank-invite { margin: 14px 12px 6px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #eaf4ff, #dff0ff); text-align: center; }
html[data-theme="dark"] .rank-invite { background: #1c2a3d; }
.rank-invite-txt { font-size: 12.5px; color: #4a6a94; margin-bottom: 8px; }
.rank-me-bar { position: sticky; bottom: 0; margin: 10px 12px 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, #1e3d75, #2b57a4); color: #fff; box-shadow: 0 -4px 18px rgba(0,20,60,.35); border: 1px solid rgba(255,212,92,.5); }
.rank-me-no { font-weight: 900; font-size: 17px; color: #ffd45c; }
.rank-me-name { font-weight: 700; font-size: 13.5px; }
.rank-me-gap { margin-left: auto; font-size: 11.5px; color: #cfe0ff; }
@media (max-width: 720px) { .rank-me-bar { position: fixed; left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0; z-index: 12; } }
.roster-panel { position: absolute; top: 46px; right: 12px; width: 230px; max-height: 70%; overflow: auto; background: rgba(255,255,255,.95); border-radius: 12px; box-shadow: 0 8px 26px rgba(0,20,50,.35); z-index: 880; padding: 8px; }
.roster-title { font-size: 12px; font-weight: 700; color: #445; padding: 4px 6px 8px; }
.roster-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px; border-radius: 8px; cursor: pointer; color: #223; }
.roster-row:hover { background: #eef4fb; }
.roster-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-lv { color: #0a86e8; font-weight: 700; }
.roster-rate { color: #c8871a; }
.critter.located { z-index: 950 !important; }
.critter.located::after { content: ''; position: absolute; inset: -14px; border: 3px solid #ffd94a; border-radius: 50%; animation: locPulse 0.65s ease-in-out 2; box-shadow: 0 0 18px rgba(255,217,74,.8); }
@keyframes locPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .5; } }
.shop-coins { font-size: 14px; margin-bottom: 8px; color: #333; }
.shop-sec { font-size: 12.5px; font-weight: 700; color: #667; margin: 12px 0 6px; }
.shop-row { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 10px; }
.shop-row:hover { background: #f2f6fb; }
.shop-row.poor { opacity: .72; }
.shop-emoji { font-size: 26px; width: 34px; text-align: center; }
.shop-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-info b { font-size: 13.5px; }
.shop-sub { font-size: 11.5px; color: #889; }
.shop-price { font-size: 13px; font-weight: 700; color: #c8871a; white-space: nowrap; }
.pet-bar.sat i { background: linear-gradient(90deg, #ffb14a, #f5842e); }
/* 双商店 / 图鉴 */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.shop-tabs { display: flex; gap: 6px; }
.shop-tab { padding: 7px 14px; border-radius: 18px; border: 1px solid var(--line); background: #f2f5fa; font-size: 13px; font-weight: 700; color: #667; cursor: pointer; }
.shop-tab.active { background: linear-gradient(135deg, #12b7f5, #0d86e0); color: #fff; border-color: transparent; }
.shop-kinds { display: flex; gap: 6px; margin: 4px 0 8px; }
.shop-kind { flex: 1; padding: 6px 0; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; cursor: pointer; color: #556; }
.shop-kind.active { border-color: #0d86e0; color: #0d86e0; background: #eaf5ff; font-weight: 700; }
.dex-bar { position: relative; height: 22px; border-radius: 11px; background: #eef2f8; overflow: hidden; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; color: #4a5a70; }
.dex-bar span { position: absolute; left: 10px; top: 0; line-height: 22px; z-index: 1; }
.dex-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd45c, #f0a11c); }
.dex-layer { margin-bottom: 12px; }
.dex-layer-title { font-size: 12.5px; font-weight: 700; color: #556; margin: 6px 0; }
.dex-lock { font-weight: 500; font-size: 11px; color: #a08040; background: #fff4dd; border-radius: 8px; padding: 1px 8px; margin-left: 6px; }
.dex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dex-grid.two { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dex-grid.two .dex-card { min-height: 150px; }
.dex-grid.two .dex-img { height: 64px; max-width: 120px; }
.dex-grid.two .dex-emoji { font-size: 44px; line-height: 64px; }
.dex-grid.two .dex-name { font-size: 13px; }
.dex-card { position: relative; border-radius: 12px; border: 2px solid #dfe5ee; background: #fff; padding: 8px 4px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 130px; }
.dex-card.owned { cursor: pointer; }
.dex-card.owned.t0 { border-color: #b8c2d0; }
.dex-card.owned.t1 { border-color: #5aa9ff; box-shadow: 0 0 0 2px rgba(90,169,255,.25); }
.dex-card.owned.t2 { border-color: #c084fc; box-shadow: 0 0 0 2px rgba(192,132,252,.3); background: linear-gradient(180deg,#fff,#faf5ff); }
.dex-card.owned.t3 { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,.45), 0 0 14px rgba(255,209,102,.5); background: linear-gradient(180deg,#fffdf5,#fff6dc); animation: legendGlow 2.4s ease-in-out infinite; }
@keyframes legendGlow { 0%,100% { box-shadow: 0 0 0 2px rgba(255,209,102,.45), 0 0 10px rgba(255,209,102,.4); } 50% { box-shadow: 0 0 0 2px rgba(255,209,102,.7), 0 0 20px rgba(255,209,102,.8); } }
.dex-card.locked { background: #f4f6f9; border-style: dashed; }
.dex-img { height: 44px; max-width: 64px; object-fit: contain; }
.dex-emoji { font-size: 34px; line-height: 44px; }
.dex-img.sil, .dex-emoji.sil { filter: brightness(0) opacity(.28); }
.dex-name { font-size: 11.5px; font-weight: 700; color: #334; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-tiers { font-size: 10px; letter-spacing: 1px; color: #d5dbe4; }
.dex-tiers b.lit { color: #f5a623; }
.dex-rate { font-size: 10.5px; color: #c8871a; min-height: 13px; }
.dex-btn { margin-top: auto; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; border: none; }
.dex-btn.buy { background: linear-gradient(135deg, #12b7f5, #0d86e0); color: #fff; cursor: pointer; }
.dex-btn.buy.poor { background: #dfe5ee; color: #889; }
.dex-btn.own { background: #eef7ea; color: #3a8a3a; }
.dex-btn.lock { color: #aab; }
.dex-detail-title { font-size: 15px; font-weight: 800; margin: 6px 0 10px; }
.tier-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; background: #f6f8fb; font-size: 12.5px; opacity: .6; }
.tier-row.lit { opacity: 1; background: #fff8e6; border: 1px solid #f5d98a; }
.tier-stars { color: #f5a623; letter-spacing: 1px; width: 44px; }
.tier-row b { flex: 1; }
.tier-rate { color: #c8871a; font-weight: 700; }
.tier-price { color: #667; font-size: 11.5px; }
.stars i { color: #d5dbe4; font-style: normal; }
/* 任务中心 */
.streak-head { display: flex; align-items: center; gap: 12px; padding: 6px 4px 12px; }
.streak-flame { font-size: 40px; filter: grayscale(1) opacity(.5); }
.streak-flame.on { filter: none; animation: flameFlicker 1.2s ease-in-out infinite; }
@keyframes flameFlicker { 0%,100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(2deg); } }
.streak-num { font-size: 15px; font-weight: 700; }
.streak-num b { font-size: 24px; color: #f0640c; }
.streak-sub { font-size: 12px; color: #778; margin-top: 2px; }
.streak-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.streak-cell { position: relative; border-radius: 10px; border: 1.5px solid #e2e7ef; background: #f7f9fc; padding: 6px 2px 5px; text-align: center; min-height: 66px; }
.streak-cell.done { background: #fff4e0; border-color: #f5b96b; }
.streak-cell.next { border-color: #0d86e0; box-shadow: 0 0 0 2px rgba(13,134,224,.2); background: #eef7ff; cursor: pointer; }
.streak-cell.big { background: linear-gradient(180deg, #fff8e6, #ffe9b8); border-color: #f5c26b; }
.sc-day { font-size: 9.5px; color: #889; }
.sc-ico { font-size: 20px; line-height: 1.2; }
.sc-rw { font-size: 9.5px; font-weight: 700; color: #c8871a; }
.sc-check { position: absolute; top: 2px; right: 4px; font-size: 11px; color: #33c469; font-weight: 900; }
.sc-tap { font-size: 9px; color: #0d86e0; font-weight: 700; }
.chest-row { display: flex; align-items: center; gap: 10px; padding: 12px; margin-top: 8px; border-radius: 12px; background: #f6f8fb; border: 1.5px dashed #d5dce6; }
.chest-row.ready { background: linear-gradient(135deg, #fff8e6, #ffe9b8); border-color: #f5c26b; }
.chest-ico { font-size: 30px; }
.invite-card { padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #eaf4ff, #e0f0ff); margin-bottom: 8px; }
.invite-title { font-size: 15px; font-weight: 800; }
.invite-sub { font-size: 12px; color: #4a6a94; margin: 6px 0 10px; line-height: 1.5; }
.invite-link { display: flex; gap: 6px; }
.invite-link input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid #c9dcf3; font-size: 12px; background: #fff; }
.space-compose.pulse { animation: btnPulse 1.8s ease-in-out infinite; }
@keyframes btnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,100,12,.35); } 50% { box-shadow: 0 0 0 6px rgba(240,100,12,0); } }
html[data-theme="dark"] .streak-cell { background: #262b36; border-color: #3a4254; }
html[data-theme="dark"] .invite-card { background: #1c2a3d; }
html[data-theme="dark"] .invite-link input { background: #14161b; color: #e7e9ee; border-color: #3a4254; }
/* 养成馆聊天卡片 */
.game-card { width: 250px; max-width: 70vw; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #dfe6f0; cursor: pointer; box-shadow: 0 2px 8px rgba(20,40,80,.08); }
.msg-row.me .game-card { background: #fff; }
.gc-top { display: flex; align-items: center; gap: 10px; padding: 12px; }
.gc-img { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.gc-emoji { font-size: 40px; width: 54px; text-align: center; flex-shrink: 0; }
.gc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-txt b { font-size: 13.5px; color: #223; }
.gc-txt span { font-size: 12px; color: #667; line-height: 1.45; }
.gc-btn { padding: 8px 12px; font-size: 12px; font-weight: 700; color: #0d86e0; background: #eef6ff; text-align: center; min-height: 12px; }
.game-card.ask { border-color: #f5c26b; } .game-card.ask .gc-btn { background: #fff4dd; color: #c8871a; }
.game-card.brag { border-color: #c084fc; } .game-card.brag .gc-btn { background: #f5edff; color: #7c3aed; }
.game-card.invite .gc-btn { background: linear-gradient(135deg, #12b7f5, #0d86e0); color: #fff; }
.game-card.postcard { width: 260px; }
.pc-scene { position: relative; height: 120px; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 10px; }
.pc-scene.fish { background: linear-gradient(180deg, #4aa3df, #1c568e); }
.pc-scene.animal { background: linear-gradient(180deg, #bfe6ff 0 55%, #7ccb69 55%); }
.pc-scene.plant { background: linear-gradient(180deg, #cdeefe 0 55%, #a8763f 55%); }
.pc-scene .gc-img { width: 64px; height: 64px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.pc-scene .gc-emoji { font-size: 44px; width: auto; }
.pc-host, .pc-host-emoji { width: 50px; height: 50px; object-fit: contain; opacity: .9; }
.pc-host-emoji { font-size: 34px; width: auto; }
.pc-stamp { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.9); border-radius: 8px; padding: 2px 8px; color: #7c3aed; transform: rotate(6deg); border: 1.5px dashed #c084fc; }
.game-card.postcard.r-legend .pc-stamp { color: #c8871a; border-color: #f5c26b; }
.game-card.postcard.r-legend { box-shadow: 0 0 0 2px rgba(255,209,102,.6), 0 4px 16px rgba(255,209,102,.5); }
.pc-text { padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 3px; }
.pc-text b { font-size: 13px; } .pc-text span { font-size: 12px; color: #556; line-height: 1.45; }
.pp-social { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.away-note { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); background: rgba(13,31,56,.7); color: #dbe7f7; font-size: 11.5px; padding: 4px 12px; border-radius: 12px; z-index: 870; white-space: nowrap; }
/* 好友角标 */
.fb-wrap { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.fb { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 8px; line-height: 16px; }
.fb-steal { background: #fff4dd; color: #c8871a; border: 1px solid #f0d9a8; }
.fb-help { background: #ffe9e9; color: #d04545; border: 1px solid #f5bcbc; }
.fb-cap { background: #e8f0ff; color: #2b5cc7; border: 1px solid #bcd0f5; }
html[data-theme="dark"] .game-card { background: #262b36; border-color: #3a4254; }
html[data-theme="dark"] .gc-txt b, html[data-theme="dark"] .pc-text b { color: #e7e9ee; }
.img-missing { display: inline-block; font-size: 42px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.dex-card .img-missing { font-size: 34px; line-height: 44px; }
.ani .img-missing { font-size: 40px; }
/* 🎒 背包 */
.bag-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.bag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bag-cell { position: relative; border-radius: 12px; border: 1.5px solid #dfe5ee; background: #f8fafc; padding: 10px 4px 8px; text-align: center; cursor: pointer; min-height: 92px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .12s ease; }
.bag-cell:active { transform: scale(.94); }
.bag-cell.gift { border-color: #f5c26b; background: linear-gradient(180deg, #fff8e6, #ffe9b8); animation: giftWiggle 1.6s ease-in-out infinite; }
@keyframes giftWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.bag-cell.gift.opening { animation: giftOpen .35s ease-out forwards; }
@keyframes giftOpen { 0% { transform: scale(1); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(0); opacity: 0; } }
.bag-cell.ticket { border-color: #c084fc; background: #f7f0ff; }
.bag-cell.on { border-color: #33c469; background: #eefaf0; cursor: default; }
.bag-ico { font-size: 30px; line-height: 1.1; }
.bag-name { font-size: 12px; font-weight: 700; color: #334; }
.bag-cnt { position: absolute; top: 4px; right: 6px; font-size: 11px; font-weight: 800; color: #fff; background: #0d86e0; border-radius: 9px; padding: 0 6px; }
.bag-sub { font-size: 9.5px; color: #889; }
.bag-foot { display: flex; justify-content: center; margin-top: 12px; }
.dock-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: #ff4d4f; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; padding: 0 4px; }
.dock-btn { position: relative; }
.title-tag { font-size: 10px; color: #7c3aed; background: #f3ecff; border: 1px solid #d9c6ff; border-radius: 8px; padding: 0 6px; vertical-align: middle; }
html[data-theme="dark"] .bag-cell { background: #262b36; border-color: #3a4254; }
html[data-theme="dark"] .bag-name { color: #e7e9ee; }
/* P1：成就 / 合养 / 入侵 / 闪光 */
.game-mini-btns { display: flex; gap: 6px; margin-top: 8px; }
.game-mini-btns .mini-btn { flex: 1; }
.invade-bar { margin-top: 10px; }
.invade-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(135deg, #ffe9e9, #ffd9d9); border: 1px solid #f5bcbc; font-size: 12px; margin-bottom: 6px; animation: invadeBlink 1.4s ease-in-out infinite; }
@keyframes invadeBlink { 0%,100% { box-shadow: 0 0 0 0 rgba(220,60,60,.35); } 50% { box-shadow: 0 0 0 5px rgba(220,60,60,0); } }
.title-list { display: flex; flex-wrap: wrap; gap: 6px; }
.title-chip { padding: 5px 12px; border-radius: 14px; border: 1px solid var(--line); background: #f6f8fb; font-size: 12px; cursor: pointer; }
.title-chip.active { background: linear-gradient(135deg, #ffd45c, #f0a11c); color: #4a3000; border-color: transparent; font-weight: 700; }
.ach-row { padding: 10px; border-radius: 12px; background: #f6f8fb; margin-bottom: 8px; }
.ach-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ach-tiers { display: flex; gap: 6px; }
.ach-tier { flex: 1; text-align: center; border-radius: 10px; border: 1.5px solid #e2e7ef; background: #fff; padding: 6px 4px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; align-items: center; opacity: .55; }
.ach-tier.done { opacity: 1; border-color: #f5c26b; background: #fff8e6; }
.ach-tier.claimed { border-color: #33c469; background: #eefaf0; }
.ach-tier span { font-weight: 800; color: #556; }
.ach-tier i { font-style: normal; color: #c8871a; font-weight: 700; }
.ach-tier em { font-style: normal; color: #33c469; font-weight: 900; }
.coop-form { display: flex; gap: 6px; flex-wrap: wrap; }
.coop-form select { flex: 1; min-width: 120px; padding: 7px; border-radius: 8px; border: 1px solid var(--line); font-size: 12.5px; }
.critter.shiny .clv { background: linear-gradient(135deg, rgba(255,215,0,.85), rgba(255,140,0,.85)); color: #3a2400; border-color: #fff3b0; }
.critter.shiny > .flip, .critter.shiny > .ani, .critter.shiny > .plantbox { animation: shinySparkle 2s ease-in-out infinite; }
@keyframes shinySparkle { 0%,100% { filter: drop-shadow(0 0 4px rgba(255,215,0,.6)) brightness(1); } 50% { filter: drop-shadow(0 0 14px rgba(255,215,0,1)) brightness(1.15); } }
html[data-theme="dark"] .ach-row, html[data-theme="dark"] .title-chip { background: #262b36; }
html[data-theme="dark"] .ach-tier { background: #1e2128; border-color: #3a4254; }
/* 场景里按阶级给标签描边 */
.critter[data-tier="1"] .clv { border-color: #5aa9ff; box-shadow: 0 0 8px rgba(90,169,255,.55); }
.critter[data-tier="2"] .clv { border-color: #c084fc; box-shadow: 0 0 10px rgba(192,132,252,.6); }
.critter[data-tier="3"] .clv { border-color: #ffd166; background: linear-gradient(135deg, rgba(90,60,10,.85), rgba(40,25,5,.85)); color: #ffe9a8; box-shadow: 0 0 12px rgba(255,209,102,.7); }
.critter[data-tier="3"] > .flip, .critter[data-tier="3"] > .ani, .critter[data-tier="3"] > .plantbox { filter: drop-shadow(0 0 10px rgba(255,209,102,.8)); }
html[data-theme="dark"] .shop-tab, html[data-theme="dark"] .shop-kind, html[data-theme="dark"] .dex-card, html[data-theme="dark"] .tier-row { background: #262b36; color: #cfd6e4; }
html[data-theme="dark"] .dex-name { color: #e7e9ee; }
html[data-theme="dark"] .dex-bar { background: #262b36; color: #cfd6e4; }
@media (max-width: 720px) { .dex-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } .dex-grid.two { grid-template-columns: repeat(2, 1fr); gap: 8px; } .dex-card { min-height: 120px; padding: 6px 2px 5px; } .dex-img { height: 38px; } .dex-emoji { font-size: 30px; line-height: 38px; } }
.game-logs { margin-top: 12px; }
.game-log-title { font-size: 12px; font-weight: 700; color: #667; margin-bottom: 6px; }
.game-log-row { font-size: 12px; color: #556; padding: 4px 2px; border-bottom: 1px dashed #e5eaf2; }
html[data-theme=dark] .roster-panel { background: rgba(32,38,50,.96); }
html[data-theme=dark] .roster-row { color: #cfd6e4; }
html[data-theme=dark] .roster-row:hover, html[data-theme=dark] .shop-row:hover { background: rgba(255,255,255,.06); }
html[data-theme=dark] .shop-coins { color: #cfd6e4; }
html[data-theme=dark] .game-log-row { color: #9aa4b8; border-bottom-color: #3a4254; }

/* ---------- 2.5D 场景（Kenney CC0 美术） ---------- */
/* 海洋馆：写实海底背景照片 + 深蓝色调层 + 光束 + 写实珊瑚水草 + 照片级鱼 */
.tank { background: url('assets/game/real/bg_ocean.webp') center 65%/cover no-repeat; box-shadow: inset 0 10px 40px rgba(0,30,70,.45), inset 0 0 0 2px rgba(190,230,255,.28), 0 0 0 5px rgba(120,180,225,.4), 0 14px 34px rgba(0,30,70,.35); }
.tank .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,95,180,.55) 0%, rgba(10,55,130,.38) 45%, rgba(2,20,55,.55) 100%); mix-blend-mode: multiply; pointer-events: none; }
.tank .rays { position: absolute; inset: -20% -10% 30% -10%; background: repeating-linear-gradient(112deg, rgba(210,240,255,.13) 0 22px, transparent 22px 96px); mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, #fff 20%, transparent 100%); mask-image: linear-gradient(180deg, #fff 20%, transparent 100%); animation: rayShift 11s ease-in-out infinite alternate; pointer-events: none; }
@keyframes rayShift { from { transform: translateX(-36px) skewX(-2deg); } to { transform: translateX(36px) skewX(2deg); } }
.tank .weed { position: absolute; bottom: 0; transform-origin: bottom center; animation: weedSway 4s ease-in-out infinite; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0,15,35,.4)); }
@keyframes weedSway { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.tank .rockimg { position: absolute; bottom: 0; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0,15,35,.4)); }
.critter.fish { filter: none; }
.flip { display: block; }
.fish-img { display: block; animation: fishWiggle 1.6s ease-in-out infinite; }
@keyframes fishWiggle { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
/* 陆地馆：草地 + 围栏 + 树 + 走路的圆头动物（有写实背景图时前端会加 .real 类改用图片） */
.zoo { background: linear-gradient(180deg, #cdedfe 0%, #e8f8ff 54%, #9ce07a 54%, #6fc45e 100%); }
.zoo.real { background: url('assets/game/real/bg_zoo.webp') center 100%/cover no-repeat; }
@media (max-width: 720px) { .zoo.real { background-position: 42% 100%; background-size: auto 160%; } }
.zoo.real .ztree, .zoo.real .zfence, .zoo.real .ztuft, .zoo.real .zrock, .zoo.real .zcloud { display: none; }
.garden.real { background: url('assets/game/real/bg_sky.webp') center 40%/cover no-repeat; }
.garden.real .sky-hills, .garden.real .sky-tree, .garden.real .sky-sun, .garden.real .zcloud { display: none; }
.zcloud { position: absolute; animation: cloudDrift 26s ease-in-out infinite alternate; pointer-events: none; }
.ztree { position: absolute; bottom: 44%; z-index: 1; pointer-events: none; }
.zfence { position: absolute; left: 0; right: 0; bottom: 43%; height: 44px; background: url('assets/game/z_fence.png') repeat-x left bottom/64px 44px; z-index: 1; opacity: .95; pointer-events: none; }
.ztuft, .zrock { position: absolute; z-index: 2; pointer-events: none; }
.ztuft { width: 30px; }
.zrock { width: 44px; }
.ani { position: relative; display: flex; flex-direction: column; align-items: center; }
.ani-head { width: 94%; display: block; position: relative; z-index: 2; animation: headBob 1.4s ease-in-out infinite; }
@keyframes headBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.ani-body { display: block; margin-top: -26%; position: relative; z-index: 1; overflow: visible; }
.ani.real { position: relative; }
.ani-full { width: 100%; display: block; position: relative; z-index: 2; filter: drop-shadow(0 6px 6px rgba(0,20,10,.35)); animation: realWalk .9s ease-in-out infinite; }
@keyframes realWalk { 0%,100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(-2px) rotate(.7deg); } }
.ani-shadow { position: absolute; bottom: -2px; z-index: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.22) 55%, transparent 72%); z-index: 1; pointer-events: none; }
.ani-legs, .ani-legs2 { transform-box: fill-box; transform-origin: 50% 0%; }
.ani-legs { animation: legWalk .46s ease-in-out infinite alternate; }
.ani-legs2 { animation: legWalk .46s ease-in-out infinite alternate-reverse; }
@keyframes legWalk { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
/* 天空馆：高远蓝天 + 阳光 + 多层云 + 远山 + 树梢，鸟在天上飞 */
.garden { background: linear-gradient(180deg, #4d9be6 0%, #8fc7f4 35%, #cfe9fb 62%, #e9f6ff 74%, #7fbf62 74%, #5aa04a 100%); }
.sky-sun { position: absolute; top: 6%; right: 12%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #fff9d6 0%, #ffe680 40%, rgba(255,214,90,0) 70%); box-shadow: 0 0 60px 20px rgba(255,235,150,.55); pointer-events: none; }
.zcloud.far { filter: blur(1.2px); opacity: .8; }
.sky-hills { position: absolute; left: -10%; right: -10%; bottom: 24%; height: 22%; background: radial-gradient(60% 100% at 20% 100%, #a9d29a 0 60%, transparent 61%), radial-gradient(70% 100% at 60% 100%, #97c988 0 60%, transparent 61%), radial-gradient(55% 100% at 95% 100%, #b6d9a8 0 60%, transparent 61%); opacity: .9; pointer-events: none; }
.sky-tree { position: absolute; bottom: 20%; z-index: 2; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,30,10,.25)); }
.bird-img { display: block; animation: birdFlap .55s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes birdFlap { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(3deg) translateY(-2px); } }
.critter.bird { filter: none; }
.gfence { display: none; }
.critter.planted { z-index: 3; }
.plantbox { position: relative; display: flex; flex-direction: column; align-items: center; }
.plant-img { display: block; position: relative; z-index: 1; filter: drop-shadow(0 4px 3px rgba(40,20,5,.25)); }
.mound { width: 74%; min-width: 46px; height: 14px; margin-top: -8px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #9b7047 0%, #6d4a2b 70%); box-shadow: 0 2px 4px rgba(40,20,5,.3); }
.pet-name { font-weight: 600; font-size: 14px; }
.pet-tier { display: inline-block; font-size: 11px; color: #fff; border-radius: 8px; padding: 1px 8px; margin: 4px 0; }
.pet-bar { height: 7px; background: #eef1f7; border-radius: 4px; overflow: hidden; margin: 6px 2px 4px; }
html[data-theme="dark"] .pet-bar { background: #333a45; }
.pet-bar i { display: block; height: 100%; background: linear-gradient(90deg,#33c469,#0099ff); }
.pet-lv { font-size: 11px; color: var(--muted); }
.pet-feed { margin-top: 8px; width: 100%; padding: 6px; border: none; border-radius: 8px; background: #fff2e0; color: #e08a1e; cursor: pointer; font-size: 12px; }
.pet-feed:hover { background: #ffe6c2; }
.pet-cheer { margin-top: 8px; width: 100%; padding: 6px; border: 1px solid var(--brand); border-radius: 8px; background: #fff; color: var(--brand); cursor: pointer; font-size: 12px; }
.pet-cheer.done { border-color: var(--line); color: var(--muted); cursor: default; }
.pet-empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 30px; }
.adopt-card { background: #fff; border: 2px dashed var(--brand); border-radius: 14px; padding: 14px; text-align: center; color: var(--brand); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; font-size: 14px; }
html[data-theme="dark"] .adopt-card { background: #1c2530; }
.adopt-card .plus { font-size: 40px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border-radius: 10px; margin-bottom: 8px; max-width: 520px; margin-left: auto; margin-right: auto; }
html[data-theme="dark"] .rank-row { background: #22262e; }
.rank-no { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: #eef1f7; color: var(--muted); flex-shrink: 0; }
.rank-no.top1 { background: #ffd700; color: #7a5b00; } .rank-no.top2 { background: #cfd8e3; color: #556; } .rank-no.top3 { background: #e8b184; color: #6b3f16; }
.rank-name { flex: 1; font-weight: 600; }
.rank-score { color: #e0a020; font-weight: 700; }
.game-visit-tip { text-align: center; color: var(--muted); font-size: 13px; padding: 8px; }

/* @提及高亮 & 选择器 */
.at { color: #1e8fff; font-weight: 600; }
html[data-theme="dark"] .at { color: #6bb8ff; }
.mention-pop { position: absolute; bottom: 62px; left: 16px; width: 220px; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,30,60,.16); z-index: 30; }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; font-size: 14px; }
.mention-item:hover, .mention-item.active { background: #eef4fb; }
.mention-item .li-avatar { width: 28px; height: 28px; font-size: 12px; }
.at-badge { color: #ff4d4f; font-size: 11px; margin-right: 4px; font-weight: 600; }

/* 已读回执 */
.read-flag { font-size: 10px; color: var(--muted); padding: 0 4px; }
.read-flag.read { color: #33a1ff; }

/* 消息搜索结果 */
.search-sec { padding: 8px 14px 4px; font-size: 12px; color: var(--muted); background: transparent; }
.search-snippet { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-snippet em { color: var(--brand); font-style: normal; font-weight: 600; }

/* 导航栏主题按钮 */
.nav-theme { font-size: 18px; }

/* 引用/回复 */
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #eef4fb; border-top: 1px solid var(--line); }
html[data-theme="dark"] .reply-bar { background: #22262e; }
.reply-quote { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); border-left: 3px solid var(--brand); padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-quote span:first-child { color: var(--brand); font-weight: 600; margin-right: 6px; }
.reply-x { border: none; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.reply-x:hover { background: rgba(0,0,0,.06); }
.msg-quote { font-size: 12px; color: var(--muted); background: rgba(0,0,0,.05); border-left: 3px solid var(--brand); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.msg-row.me .msg-quote { background: rgba(255,255,255,.25); }
.msg-quote b { color: var(--brand); }
.msg-row.me .msg-quote b { color: #0a3a5c; }
html[data-theme="dark"] .msg-quote { background: rgba(255,255,255,.08); }
.msg-flash { animation: msgflash 1s ease; }
@keyframes msgflash { 0%,100% { background: transparent; } 30% { background: rgba(0,153,255,.18); } }

/* ---------- 趣味玩法：骰子/猜拳/抖动/彩蛋 ---------- */
/* 玩法面板 */
.fun-panel { display: flex; gap: 10px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); }
html[data-theme="dark"] .fun-panel { background: #22262e; }
.fun-panel button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fc; cursor: pointer; font-size: 30px; color: var(--text); }
html[data-theme="dark"] .fun-panel button { background: #2a2f3a; }
.fun-panel button span { font-size: 12px; color: var(--muted); }
.fun-panel button:hover { border-color: var(--brand); }

/* 骰子/猜拳气泡 */
.magic { font-size: 44px; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.magic-label { font-size: 15px; color: var(--muted); }
.msg-row.me .magic-label { color: var(--me-bubble-text); opacity: .8; }
@keyframes pop { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.magic.pop { animation: pop .55s cubic-bezier(.3,1.4,.5,1); }

/* 窗口抖动 */
@keyframes shakewin {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-6px,-4px); } 20% { transform: translate(7px,3px); }
  30% { transform: translate(-8px,4px); } 40% { transform: translate(6px,-5px); }
  50% { transform: translate(-7px,3px); } 60% { transform: translate(8px,4px); }
  70% { transform: translate(-5px,-3px); } 80% { transform: translate(6px,4px); }
  90% { transform: translate(-4px,-2px); }
}
.chat-room.shake { animation: shakewin .55s ease; }
.shake-tip { align-self: center; color: #e0863a; font-size: 12px; background: #fff3e6; padding: 3px 12px; border-radius: 10px; }
html[data-theme="dark"] .shake-tip { background: #33291a; }

/* 全屏彩蛋(表情雨) */
.fx-overlay { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 100; }
.fx-item { position: absolute; top: -8vh; will-change: transform, opacity; animation-name: fxfall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes fxfall { 0% { transform: translateY(-10vh) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(112vh) rotate(360deg); opacity: .85; } }

/* 群公告条 */
.ann-bar { display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: #fff8e6; border-bottom: 1px solid #ffe6a8; color: #a06a12; font-size: 13px; cursor: pointer; }
.ann-ico { flex-shrink: 0; }
.ann-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="dark"] .ann-bar { background: #2a2618; border-color: #4a3f1e; color: #d9b25e; }
.ann-full { white-space: pre-wrap; word-break: break-word; line-height: 1.7; font-size: 14px; max-height: 50vh; overflow-y: auto; }

/* 名片气泡 */
.card-bubble { display: flex; align-items: center; gap: 10px; padding: 4px 2px; min-width: 180px; cursor: pointer; }
.card-bubble .li-avatar { width: 42px; height: 42px; font-size: 16px; }
.card-info { min-width: 0; }
.card-name { font-weight: 600; font-size: 14px; }
.card-qid { font-size: 12px; opacity: .7; }
.card-label { font-size: 11px; opacity: .6; border-top: 1px solid rgba(0,0,0,.08); padding-top: 3px; margin-top: 2px; }
.msg-row.me .card-label { border-color: rgba(255,255,255,.25); }

/* 扫码 */
.scan-overlay { position: fixed; inset: 0; background: #000; z-index: 95; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scan-overlay video { width: 100%; max-width: 480px; max-height: 70vh; object-fit: cover; }
.scan-frame { position: absolute; width: 220px; height: 220px; border: 3px solid #12b7f5; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.scan-tip { position: absolute; bottom: 90px; color: #fff; font-size: 14px; }
.scan-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.25); color: #fff; font-size: 22px; cursor: pointer; }

/* 我的二维码 */
.qr-card { text-align: center; }
.qr-canvas-wrap { display: inline-block; padding: 10px; background: #fff; border-radius: 12px; margin: 6px 0 10px; }
.qr-name { font-weight: 600; font-size: 16px; }
.qr-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.qr-tip { color: var(--muted); font-size: 12px; margin-top: 10px; }

/* 加好友弹窗分段 */
.af-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.af-tab { flex: 1; padding: 7px 0; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text); }
.af-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
html[data-theme="dark"] .af-tab { background: #2a2f3a; }
html[data-theme="dark"] .af-tab.active { background: var(--brand); }

.shop-row.dim { opacity: .5; }

/* ===== 动物行为：走 / 站(呼吸·东张西望) / 低头吃草(啃) / 打盹💤 ===== */


/* 吃草：绕后脚跟往前压低（贴图默认头朝左，负角度=头往下），前半身没进草里正好像埋头啃 */
.critter.st-graze .ani-full, .critter.st-graze .ani-sheet { animation: realGraze 1.15s ease-in-out infinite; transform-origin: 88% 100%; }
@keyframes realGraze { 0%,100% { transform: rotate(-6deg) translateY(-1px); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(-7deg) translateY(-1px); } }
/* 啃草时嘴边蹦出的小草屑 */
.critter.st-graze .ani.real::after, .critter.st-graze .ani.real::before { content: ''; position: absolute; left: 9%; bottom: 10px; width: 5px; height: 5px; border-radius: 40% 60% 50% 50%; background: #9ade5c; box-shadow: 0 0 2px rgba(0,0,0,.25); opacity: 0; animation: nibble 1.15s ease-out infinite; z-index: 3; }
.critter.st-graze .ani.real::before { left: 15%; width: 4px; height: 4px; background: #c8ea78; animation-delay: .35s; }
@keyframes nibble { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-7px,-16px) rotate(140deg) scale(1); } }
/* 打盹：慢呼吸 + 冒💤 */




/* 鸟：滑翔时翅膀定住微微倾斜 */
.critter.st-glide .bird-img { animation-play-state: paused; transform: rotate(-4deg); transition: transform .5s ease; }

/* ===== 帧动画精灵图播放器（.ani.anim > .ani-sheet）：横排精灵图，JS 改 background-position 换帧 ===== */
.ani.anim { position: relative; }
.ani-sheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; background-repeat: no-repeat; background-size: auto 100%; background-position: 0 0; z-index: 2; filter: drop-shadow(0 6px 6px rgba(0,20,10,.35)); }


/* 鸟用精灵图播放器：不要地面阴影，飞行本身在帧里 */
.flip.anim { display: inline-block; }
.ani-sheet.bird { position: static; display: block; margin: 0; filter: drop-shadow(0 4px 5px rgba(0,20,40,.25)); }
.critter.st-glide .ani-sheet.bird { filter: drop-shadow(0 4px 5px rgba(0,20,40,.2)); }

/* ================= 场景重构（2026-08-18）================= */

/* A4 转身过渡：scaleX(1)→scaleX(-1) 天然穿零，读作"侧身转过来"而不是贴图闪一下 */
.critter .flip { transition: transform .22s ease-in-out; transform-origin: 50% 100%; will-change: transform; }

/* C5 前景遮挡：复用背景图自身像素（background:inherit 继承已算好的 position/size，像素级对齐），
   只留最下面一条当近景平面。走到最前排的动物脚会被真草叶盖住 —— 遮挡是最强的深度线索 */
.zoo.real::before {
  content: ''; position: absolute; inset: 0; background: inherit;
  -webkit-mask-image: linear-gradient(to top, #000 0 40px, rgba(0,0,0,.72) 72px, rgba(0,0,0,.3) 104px, transparent 136px);
          mask-image: linear-gradient(to top, #000 0 40px, rgba(0,0,0,.72) 72px, rgba(0,0,0,.3) 104px, transparent 136px);
  z-index: 450; pointer-events: none;
}

/* C6 环境活物：纯 CSS 零 JS。动物慢下来后如果背景完全静止，会被读成卡顿 */
.amb { position: absolute; inset: 0; pointer-events: none; z-index: 415; overflow: hidden; }
.amb i { position: absolute; display: block; }
.amb .bfly { width: 7px; height: 7px; border-radius: 50% 50% 50% 0; background: #ffd86b; box-shadow: 3px 0 0 -1px #ffb43b; animation: bflyPath 22s linear infinite, bflyFlap .28s steps(2) infinite; opacity: .85; }
.amb .bfly.b2 { background: #ffe9a8; box-shadow: 3px 0 0 -1px #ffd06b; animation-duration: 29s, .32s; animation-delay: -8s, 0s; }
.amb .bfly.b3 { background: #cfe9ff; box-shadow: 3px 0 0 -1px #9fd0ff; animation-duration: 26s, .24s; animation-delay: -17s, 0s; }
@keyframes bflyFlap { 0% { transform: scaleX(1); } 100% { transform: scaleX(.35); } }
@keyframes bflyPath {
  0%   { left: -4%; top: 74%; }
  25%  { left: 28%; top: 62%; }
  50%  { left: 56%; top: 78%; }
  75%  { left: 82%; top: 64%; }
  100% { left: 104%; top: 72%; }
}
.amb .fluff { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.72); animation: fluffDrift 34s linear infinite; }
@keyframes fluffDrift { 0% { transform: translate(0,0); opacity: 0; } 8% { opacity: .8; } 92% { opacity: .5; } 100% { transform: translate(150px,-70px); opacity: 0; } }
.amb .cloudy { position: absolute; inset: -20% -40%; background: radial-gradient(ellipse 34% 46% at 30% 50%, rgba(20,40,70,.16), transparent 70%); mix-blend-mode: multiply; animation: cloudPass 96s linear infinite; }

@keyframes cloudPass { 0% { transform: translateX(-40%); } 100% { transform: translateX(40%); } }

/* C7 无障碍：系统开了"减少动态效果"就把环境动画停掉 */
@media (prefers-reduced-motion: reduce) {
  .amb, .critter.shiny > .flip, .critter.shiny > .ani { animation: none !important; }
  .amb { display: none; }
  .critter .flip { transition: none; }
}

/* ================= 🃏 卡组（卡牌收集 + 上阵）================= */
.cards-head { font-size: 12px; color: #667; padding: 0 2px 10px; line-height: 1.5; }
.cards-head b { color: #0d86e0; font-size: 15px; }
.cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.petcard { position: relative; border-radius: 14px; padding: 8px 8px 10px; cursor: pointer; background: linear-gradient(170deg, #fbfcff, #eef2f8); border: 2px solid #dfe6f0; box-shadow: 0 2px 8px rgba(0,20,60,.08); transition: transform .12s ease, box-shadow .12s ease; overflow: hidden; }
.petcard:active { transform: scale(.97); }
.petcard.on { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25), 0 6px 18px rgba(20,120,60,.2); }
.petcard.out { opacity: .55; }
/* 稀有度：卡框跟着阶级走 */
.petcard.t1 { background: linear-gradient(170deg, #f2f8ff, #dfeeff); border-color: #7cc0ff; }
.petcard.t2 { background: linear-gradient(170deg, #f8f2ff, #ece0ff); border-color: #c084fc; }
.petcard.t3 { background: linear-gradient(170deg, #fff8e8, #ffeec2); border-color: #ffc247; box-shadow: 0 0 14px rgba(255,190,60,.35); }
.petcard.shiny::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); animation: cardShine 2.6s ease-in-out infinite; }
@keyframes cardShine { 0%,100% { transform: translateX(-70%); } 50% { transform: translateX(70%); } }

.pc-pic { position: relative; height: 84px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.pc-pic .cardpic { max-width: 100%; max-height: 84px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,20,40,.25)); }
.pc-pic .cardpic.emoji { font-size: 46px; }
.pc-on { position: absolute; top: 0; right: 0; background: #22c55e; color: #fff; font-size: 9.5px; font-style: normal; font-weight: 700; padding: 2px 6px; border-radius: 8px; box-shadow: 0 2px 6px rgba(20,120,60,.35); }
.pc-out { position: absolute; top: 0; left: 0; background: rgba(20,30,50,.8); color: #fff; font-size: 9.5px; font-style: normal; padding: 2px 6px; border-radius: 8px; }
.pc-name { font-size: 13px; font-weight: 700; color: #22324a; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-stars { font-size: 11px; text-align: center; letter-spacing: 1px; line-height: 1.2; }
.pc-stars i { opacity: .25; font-style: normal; }
.pc-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: #667; margin-top: 3px; }
.pc-meta b { color: #0d86e0; font-size: 12px; }
.pc-bar { height: 4px; border-radius: 3px; background: #dde5ef; overflow: hidden; margin-top: 5px; }
.pc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4ea8f5, #0d86e0); }
.pc-hungry { position: absolute; bottom: 6px; right: 8px; font-size: 9.5px; color: #d9480f; font-weight: 700; }

html[data-theme=dark] .petcard { background: linear-gradient(170deg, #2a3242, #222836); border-color: #3a4356; }
html[data-theme=dark] .pc-name { color: #dce6f5; }
html[data-theme=dark] .pc-bar { background: #3a4356; }

/* ================= 🎰 抽卡扭蛋 ================= */
.gacha-hero { text-align: center; padding: 6px 0 12px; }
.gacha-egg { font-size: 52px; line-height: 1; animation: eggWobble 2.4s ease-in-out infinite; }
@keyframes eggWobble { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.gacha-sub { font-size: 12px; color: #667; margin-top: 6px; line-height: 1.5; }
.gacha-rates { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 8px; }
.gr { font-size: 10.5px; padding: 3px 8px; border-radius: 10px; font-weight: 700; }
.gr.t0 { background: #eef1f6; color: #6b7686; }
.gr.t1 { background: #e3f0ff; color: #1a6fd4; }
.gr.t2 { background: #f3e8ff; color: #8b3fd4; }
.gr.t3 { background: linear-gradient(135deg, #fff0c2, #ffd76e); color: #7a5200; }
.gacha-pity { font-size: 11.5px; color: #667; text-align: center; background: #f6f8fb; border-radius: 10px; padding: 7px 10px; line-height: 1.6; }
.gacha-pity b { color: #0d86e0; }
.gacha-btns { display: flex; gap: 10px; margin: 12px 0 8px; }
.gacha-btns .modal-btn { flex: 1; margin: 0; }
.gacha-btns .modal-btn i { font-style: normal; font-size: 10px; opacity: .85; }
.gacha-coins { text-align: center; font-size: 12px; color: #667; }
.gacha-res { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.gres { border-radius: 10px; padding: 6px 3px; text-align: center; border: 2px solid #e2e8f2; background: #f8fafd; animation: gresIn .35s cubic-bezier(.2,1.4,.5,1) backwards; }
.gres:nth-child(n+2) { animation-delay: .06s; } .gres:nth-child(n+4) { animation-delay: .12s; }
.gres:nth-child(n+6) { animation-delay: .18s; } .gres:nth-child(n+8) { animation-delay: .24s; }
@keyframes gresIn { from { opacity: 0; transform: scale(.6) translateY(10px); } }
.gres img { width: 100%; height: 34px; object-fit: contain; }
.gres .ge { font-size: 26px; }
.gres b { display: block; font-size: 9px; color: #f5a623; letter-spacing: -1px; }
.gres span { display: block; font-size: 9.5px; color: #445; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gres i { display: block; font-style: normal; font-size: 9px; color: #8a94a6; }
.gres.t1 { border-color: #7cc0ff; background: #f2f8ff; }
.gres.t2 { border-color: #c084fc; background: #faf5ff; }
.gres.t3 { border-color: #ffc247; background: linear-gradient(160deg, #fffaf0, #ffeec2); box-shadow: 0 0 12px rgba(255,190,60,.5); }
.gres.t3 i, .gres.t2 i { color: #b45309; font-weight: 700; }
.gacha-got { text-align: center; font-size: 12.5px; font-weight: 700; color: #16a34a; margin-top: 10px; }

/* ================= 🔗 羁绊 ================= */
.bondbox, .dexbox { background: #f6f8fb; border-radius: 12px; padding: 9px 10px; margin-bottom: 10px; }
.bondtitle { font-size: 12px; font-weight: 700; color: #445; margin-bottom: 6px; }
.bondtitle b { color: #16a34a; }
.bondtitle i { font-style: normal; font-size: 10px; color: #999; }
.bondchip { display: inline-block; font-size: 10.5px; background: #e8f7ee; color: #15803d; border: 1px solid #bbe8cd; border-radius: 9px; padding: 3px 7px; margin: 0 5px 5px 0; font-weight: 700; }
.bondchip i { font-style: normal; font-weight: 400; opacity: .7; margin-left: 4px; font-size: 9.5px; }
.bondchip.sig { background: linear-gradient(135deg, #fff2cc, #ffe08a); color: #7a5200; border-color: #ffd166; }
.bondhint { font-size: 11px; color: #8a94a6; }
.bondtag { color: #7dffb0; font-style: normal; }

/* ================= 📖 图鉴里程碑 ================= */
.dexbar { position: relative; height: 8px; border-radius: 5px; background: #dfe6f0; overflow: hidden; margin: 4px 0 8px; }
.dexbar i { display: block; height: 100%; background: linear-gradient(90deg, #4ea8f5, #0d86e0); }
.dexbar u { position: absolute; top: 0; width: 2px; height: 100%; background: rgba(255,255,255,.85); }
.dexms { display: flex; gap: 6px; }
.dexchip { flex: 1; border: 1px solid #dfe6f0; background: #fff; border-radius: 9px; padding: 4px 2px; font-size: 10.5px; font-weight: 700; color: #8a94a6; cursor: default; }
.dexchip i { display: block; font-style: normal; font-size: 9px; font-weight: 400; }
.dexchip.can { border-color: #22c55e; background: #eefcf3; color: #15803d; cursor: pointer; animation: dexPulse 1.5s ease-in-out infinite; }
@keyframes dexPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
.dexchip.got { color: #b9c2d0; }

/* 卡面上的碎片/升星 */
.pc-shard { margin-top: 5px; font-size: 10px; text-align: center; border-radius: 8px; padding: 3px 4px; background: #eef1f6; color: #7b8798; font-weight: 700; }
.pc-shard.ok { background: linear-gradient(135deg, #ffe9a8, #ffd166); color: #6b4700; cursor: pointer; box-shadow: 0 0 8px rgba(255,200,80,.55); }
.pc-shard.max { background: transparent; color: #c3ccd8; }

html[data-theme=dark] .bondbox, html[data-theme=dark] .dexbox, html[data-theme=dark] .gacha-pity { background: #2a3242; }
html[data-theme=dark] .bondtitle { color: #dce6f5; }
html[data-theme=dark] .gres { background: #2a3242; border-color: #3a4356; }
html[data-theme=dark] .dexchip { background: #2a3242; border-color: #3a4356; }

/* ══════════════════════════════════════════════════════════════════════
   养成馆 · 古铜雕花皮肤（三馆统一）  2026-08-18
   追加在文件末尾是有意为之：同权重下后写的赢，这里的规则会覆盖上面所有旧的
   场景 UI 样式，不用去动那些旧规则。
   ⚠ 本段最后的 @media (max-width:720px) 必须留在文件最末尾 ——
     手机端覆盖若写在基础规则之前会被同权重的基础规则盖掉（这个坑踩过一次）。
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --bz-a: #7a4d2c;                    /* 铜面·亮（渐变上端） */
  --bz-b: #422818;                    /* 铜面·暗（渐变下端） */
  --bz-edge: #cfa568;                 /* 外描边·亮铜 */
  --bz-ink: #241407;                  /* 内刻线·深棕 —— 和外描边一起构成"双线雕花" */
  --bz-hi: rgba(255,238,203,.34);     /* 顶部内高光 */
  --bz-txt: #f4e6c8;                  /* 主文字·米金 */
  --bz-txt2: #cbb086;                 /* 次文字·暗金 */
  --bz-ink-txt: #351d06;              /* 亮底上的深棕字 */
  --bz-gold-a: #ffe697;
  --bz-gold-b: #f2bb43;
  --bz-gold-c: #c8871a;
  --bz-sh: 0 3px 10px rgba(0,0,0,.45);
  --bz-warm: 210, 150, 70;            /* 场景暖光基色 */
}

/* ── 材质母版：所有铜制控件共用这一条，改配方只改这里 ───────────────── */
.game-tabs, .scene-tier, .scene-coins, .scene-rank-btn, .dock-btn, .dock-note,
.away-note, .critter .clv, #main-game .btn-back.light {
  background:
    linear-gradient(180deg, rgba(255,238,203,.20), rgba(255,238,203,0) 48%),
    linear-gradient(180deg, var(--bz-a), var(--bz-b));
  border: 1px solid var(--bz-edge);
  box-shadow:
    inset 0 0 0 1px var(--bz-ink),          /* 内刻线 */
    inset 0 1px 0 var(--bz-hi),             /* 上沿高光 */
    inset 0 -3px 5px rgba(18,8,2,.5),       /* 下沿内暗，做出浮雕厚度 */
    var(--bz-sh);
  color: var(--bz-txt);
  text-shadow: 0 1px 1px rgba(20,8,0,.7);
  backdrop-filter: none;                    /* 铜面不透明，省掉旧的 blur 合成层 */
  -webkit-backdrop-filter: none;
}

/* ── 顶栏：深蓝夜空 + 铜色分隔线 ──────────────────────────────────── */
#main-game .feed-wrap {
  background-image:
    radial-gradient(circle at 84% -30%, rgba(196,228,255,.36), rgba(196,228,255,0) 56%),
    linear-gradient(180deg, #16497f 0%, #1c69ad 56%, #2b84c9 100%);
  background-size: 100% 150px, 100% 150px;
}
#main-game .game-body { border-top: 2px solid var(--bz-edge); }
#main-game .feed-head { text-shadow: 0 1px 3px rgba(0,25,60,.55); }
#main-game .btn-back.light {
  width: 32px; height: 32px; line-height: 28px; font-size: 20px;
  color: #f7ead0; border-radius: 50%;
}
#main-game .btn-back.light:active { filter: brightness(1.18); }
#game-title-extra { color: #cfe6ff; text-shadow: 0 1px 2px rgba(0,20,50,.6); }

/* ── 三馆切换：铜制分段控件 ───────────────────────────────────────── */
.game-tabs {
  display: flex; gap: 2px; margin: 0 12px 11px; padding: 3px;
  border-radius: 999px;
}
.game-tab {
  flex: 1; padding: 7px 0; border: none; background: transparent; cursor: pointer;
  color: var(--bz-txt2); font-size: 13.5px; font-weight: 700; letter-spacing: .3px;
  border-radius: 999px; text-shadow: 0 1px 1px rgba(20,8,0,.6);
  transition: color .18s ease, transform .12s ease;
}
.game-tab:active { transform: scale(.95); }
/* 选中态：内凹的浅铜胶囊（inset 阴影在上 = 凹下去） */
.game-tab.active {
  background: linear-gradient(180deg, #d9b071, #a4763f);
  color: var(--bz-ink-txt);
  text-shadow: 0 1px 0 rgba(255,238,200,.45);
  box-shadow:
    inset 0 2px 5px rgba(52,28,10,.55),
    inset 0 -1px 0 rgba(255,240,205,.4),
    0 0 0 1px rgba(255,234,190,.5),
    0 1px 3px rgba(0,0,0,.35);
}
html[data-theme="dark"] .game-tab { background: transparent; color: var(--bz-txt2); }
html[data-theme="dark"] .game-tab.active { background: linear-gradient(180deg, #d9b071, #a4763f); color: var(--bz-ink-txt); }

/* ── 铜徽章：给 emoji 套一个内凹的圆形凹槽，扁 emoji 立刻有了浮雕感 ── */
.bz-ico, .bz-coin {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-style: normal; line-height: 1;
  background: radial-gradient(circle at 34% 28%, #6b4326, #2b1a0e);
  box-shadow: inset 0 1px 2px rgba(12,5,0,.8), inset 0 -1px 0 rgba(255,232,186,.28), 0 0 0 1px var(--bz-edge);
}
.bz-ico { width: 24px; height: 24px; font-size: 13px; }
.bz-coin {
  width: 21px; height: 21px; font-size: 12px;
  background: radial-gradient(circle at 34% 28%, var(--bz-gold-a), var(--bz-gold-c));
  box-shadow: inset 0 -1px 2px rgba(120,70,0,.55), 0 0 0 1px #ffeab4, 0 0 7px rgba(255,190,80,.5);
}

/* ── 左上：馆名石牌 ───────────────────────────────────────────────── */
.scene-tier {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 13px 6px 8px; border-radius: 11px; font-size: 13px; font-weight: 700;
  line-height: 1.25;
}
.scene-tier .st-txt { display: flex; flex-direction: column; min-width: 0; }
.scene-tier b { font-weight: 800; letter-spacing: .3px; }
.scene-tier i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--bz-txt2); }
.bondtag { color: #8ce8ab; font-style: normal; }

/* ── 右上：奖杯铜章 + 金币条 ──────────────────────────────────────── */
.scene-top-right { display: flex; align-items: center; gap: 7px; pointer-events: auto; }
.scene-rank-btn {
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.scene-rank-btn:active { transform: scale(.92); }
.scene-coins {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800;
}
.scene-coins b { color: #ffe9b0; font-weight: 800; letter-spacing: .2px; }

/* ── 生物头顶名牌：两行（Lv. / 阶级名） ───────────────────────────── */
.critter .clv {
  position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 2px 8px 3px; border-radius: 9px; line-height: 1.18;
  white-space: nowrap; pointer-events: none; z-index: 5;
  font-size: 10px; font-weight: 700;
}
.critter .clv b { font-size: 10px; font-weight: 800; color: var(--bz-txt); }
.critter .clv em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--bz-txt2); letter-spacing: .4px; }
.critter .clv::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--bz-edge); border-bottom: none;
}
/* 只有一行时把牌子收窄一点，别显得空 */
.critter .clv.one { padding: 3px 8px; }
/* 阶级配色：只换描边和辉光，底还是铜的，保证整屏统一 */
.critter.shiny .clv { border-color: #ffe08a; box-shadow: inset 0 0 0 1px var(--bz-ink), inset 0 1px 0 var(--bz-hi), 0 0 10px rgba(255,215,0,.75), var(--bz-sh); }
.critter.shiny .clv::after { border-top-color: #ffe08a; }
.critter[data-tier="1"] .clv { border-color: #7cc0ff; box-shadow: inset 0 0 0 1px var(--bz-ink), inset 0 1px 0 var(--bz-hi), 0 0 8px rgba(90,169,255,.6), var(--bz-sh); }
.critter[data-tier="1"] .clv::after { border-top-color: #7cc0ff; }
.critter[data-tier="2"] .clv { border-color: #d0a0ff; box-shadow: inset 0 0 0 1px var(--bz-ink), inset 0 1px 0 var(--bz-hi), 0 0 10px rgba(192,132,252,.65); }
.critter[data-tier="2"] .clv::after { border-top-color: #d0a0ff; }
.critter[data-tier="3"] .clv {
  border-color: #ffd166;
  background: linear-gradient(180deg, rgba(255,238,203,.20), rgba(255,238,203,0) 48%), linear-gradient(180deg, #8a5c22, #402408);
  box-shadow: inset 0 0 0 1px var(--bz-ink), inset 0 1px 0 rgba(255,240,200,.45), 0 0 13px rgba(255,209,102,.8);
}
.critter[data-tier="3"] .clv::after { border-top-color: #ffd166; }
.critter[data-tier="3"] .clv em { color: #ffe9a8; }

/* ── 提示条：铜牌横条，多条竖着堆，不再拼成一行撑爆 375px ─────────── */
.note-stack {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  z-index: 870; max-width: 88%; pointer-events: none;
}
.away-note {
  position: static; display: flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 5px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.away-note .bz-ico { width: 20px; height: 20px; font-size: 11px; }

/* ── 底部按钮坞 ───────────────────────────────────────────────────── */
.scene-dock { bottom: 10px; gap: 7px; }
.dock-btn {
  pointer-events: auto; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 58px; padding: 6px 9px 5px; border-radius: 13px; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.dock-btn:active { transform: translateY(1px) scale(.95); filter: brightness(1.12); }
/* 图标凹槽：让扁 emoji 看着像嵌在铜牌里的立体件 */
.dock-btn .dock-ico {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,225,175,.16), rgba(0,0,0,.42));
  box-shadow: inset 0 1px 2px rgba(10,4,0,.7), inset 0 -1px 0 rgba(255,232,186,.22);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.dock-btn .dock-txt { font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--bz-txt); }
/* 高亮金块：亮度和其它按钮明显拉开 */
.dock-btn.gold {
  background: linear-gradient(180deg, var(--bz-gold-a) 0%, var(--bz-gold-b) 48%, var(--bz-gold-c) 100%);
  border-color: #fff1c6;
  box-shadow:
    inset 0 0 0 1px rgba(120,70,0,.5), inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -3px 5px rgba(120,66,0,.42),
    0 0 15px rgba(255,190,70,.5), var(--bz-sh);
}
.dock-btn.gold .dock-txt { color: #4a2c05; text-shadow: 0 1px 0 rgba(255,245,210,.55); }
.dock-btn.gold .dock-ico { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.4), rgba(160,95,0,.3)); box-shadow: inset 0 1px 2px rgba(120,70,0,.5); }
.dock-btn.steal {
  background: linear-gradient(180deg, #b98af0, #6b32b8);
  border-color: #e6ceff;
  box-shadow: inset 0 0 0 1px rgba(48,12,90,.6), inset 0 1px 0 rgba(255,240,255,.45), inset 0 -3px 5px rgba(40,8,80,.45), 0 0 14px rgba(180,110,250,.45), var(--bz-sh);
}
.dock-btn.wide { flex-direction: row; gap: 8px; padding: 9px 18px; border-radius: 22px; }
.dock-btn.wide .dock-txt { font-size: 13.5px; }
.dock-btn.wide .dock-ico { width: 24px; height: 24px; }
.dock-note { padding: 8px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }

/* ── 场景氛围层（.amb-land）：金色暖光 / 光束 / 雾带 / 浮尘 ────────
   全部塞在 .zoo 里 → 天然位于生物之下；pointer-events:none 不挡点击。
   现有背景还是写实牧场照片，所以暖光刻意压得很淡（0.10~0.26），
   靠光束+浮尘+雾带出"游戏感"，而不是给照片套一层廉价滤镜。      ── */
.amb-land { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.al-warm {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 76% at 78% 4%, rgba(var(--bz-warm), .26), rgba(var(--bz-warm), .07) 44%, rgba(var(--bz-warm), 0) 70%),
    linear-gradient(180deg, rgba(255,196,110,.10) 0%, rgba(255,170,90,0) 46%, rgba(46,24,66,.16) 100%);
}
/* 斜射光束：一个元素 + repeating-gradient，比堆多个 div 省一半合成层 */
.al-rays {
  position: absolute; inset: -18% -12% 34% -12%;
  background: repeating-linear-gradient(102deg, rgba(255,238,190,.16) 0 26px, rgba(255,238,190,0) 26px 108px);
  -webkit-mask-image: linear-gradient(180deg, #fff 8%, transparent 92%);
  mask-image: linear-gradient(180deg, #fff 8%, transparent 92%);
  animation: alRay 15s ease-in-out infinite alternate;
}
@keyframes alRay { from { transform: translateX(-30px) skewX(-1.5deg); } to { transform: translateX(30px) skewX(1.5deg); } }
/* 地平线雾带：把远景压朦胧，近景保持清楚 */
.al-mist {
  position: absolute; left: -4%; right: -4%; top: 40%; height: 26%;
  background: linear-gradient(180deg, rgba(236,244,255,0) 0%, rgba(238,246,255,.46) 46%, rgba(236,244,255,0) 100%);
  animation: alMist 22s ease-in-out infinite alternate;
}
@keyframes alMist { from { transform: translate3d(-14px,0,0); opacity: .85; } to { transform: translate3d(14px,0,0); opacity: 1; } }
/* 浮尘光点：12 个，够满但不炸帧 */
.al-motes i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,214,.95), rgba(255,214,140,0) 70%);
  animation: alMote linear infinite;
}
@keyframes alMote {
  0%   { transform: translate3d(0,0,0) scale(.5); opacity: 0; }
  14%  { opacity: .95; }
  76%  { opacity: .7; }
  100% { transform: translate3d(24px,-104px,0) scale(1.15); opacity: 0; }
}
/* 暖色暗角：盖在生物之上，把四周压下去、中心提起来 */
.scene.scene-animal::after {
  box-shadow:
    inset 0 -70px 80px -54px rgba(38,18,4,.55),
    inset 0 46px 60px -46px rgba(30,16,44,.42),
    inset 0 0 130px -34px rgba(24,10,2,.5);
}
/* 生物暖色调映射：让绿幕抠出来的写实毛发和奇幻场景色温对齐。
   放在 .ani-sheet / .ani-full 上而不是 .critter —— 后者会连名牌一起染色，
   而且会和 .critter[data-tier=3] / .shiny 已有的 filter 打架。 */
.scene-animal .ani-sheet { filter: sepia(.17) hue-rotate(-8deg) saturate(1.06) brightness(1.04); }
.scene-animal .ani-full { filter: drop-shadow(0 6px 6px rgba(0,20,10,.35)) sepia(.17) hue-rotate(-8deg) saturate(1.06) brightness(1.04); }

@media (prefers-reduced-motion: reduce) {
  .al-rays, .al-mist, .al-motes i { animation: none; }
  .al-motes i { opacity: .55; }
}

/* ── 手机端（必须留在文件最末尾，见文件头注释） ───────────────────── */
@media (max-width: 720px) {
  .game-tabs { margin: 0 11px 10px; }
  .game-tab { font-size: 13px; padding: 7px 0; }
  .scene-tier { font-size: 12px; padding: 5px 11px 5px 6px; gap: 6px; }
  .scene-tier i { font-size: 10px; }
  .bz-ico { width: 21px; height: 21px; font-size: 12px; }
  .scene-coins { font-size: 12.5px; padding: 4px 10px 4px 4px; }
  .bz-coin { width: 19px; height: 19px; font-size: 11px; }
  .scene-rank-btn { width: 31px; height: 31px; font-size: 15px; }
  .scene-dock { gap: 5px; bottom: 8px; }
  .dock-btn { min-width: 45px; padding: 5px 4px 4px; border-radius: 11px; }
  .dock-btn .dock-ico { width: 23px; height: 23px; font-size: 16px; }
  .dock-btn .dock-txt { font-size: 10px; }
  .critter .clv { font-size: 9.5px; top: -24px; padding: 2px 7px 3px; }
  .critter .clv b { font-size: 9.5px; }
  .critter .clv em { font-size: 9px; }
  .note-stack { top: 50px; }
  .away-note { font-size: 11px; padding: 3px 10px 3px 4px; }
  .away-note .bz-ico { width: 18px; height: 18px; font-size: 10px; }
}

/* 捡红包是临时出现的第 8 个按钮，挤进 dock 会在 375px 下溢出 40px（实测）。
   改成浮在 dock 正上方的奖励条：dock 恒定 7 个按钮 = 345px，稳稳放得下。 */
.dock-btn.scatter {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  flex-direction: row; gap: 7px; padding: 7px 16px; border-radius: 20px; min-width: 0;
  animation: scatterBob 1.9s ease-in-out infinite;
}
.dock-btn.scatter .dock-txt { font-size: 12.5px; }
.dock-btn.scatter:active { transform: translateX(-50%) scale(.95); }
@keyframes scatterBob { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 5px; } }
/* 兜底：万一某个标签变长（比如「收 123456」），换行也别被切掉 */
.scene-dock { flex-wrap: wrap; row-gap: 5px; }
@media (prefers-reduced-motion: reduce) { .dock-btn.scatter { animation: none; } }

/* ── 高台：最强的那只站上去，其余在地面走 ─────────────────────────
   石台复用海洋馆那张 d_rock.webp（包里已有，14KB）。台上那只定格在
   tools/find-stand-frame.js 挑出的「四脚落地最实」那一帧 —— 停在第 0 帧
   多半是一条腿悬在半空，比不动还假。再叠一层极缓的呼吸起伏就活了。 */
.zledge { position: absolute; pointer-events: none; user-select: none; }
/* 呼吸只能加在 .ani-sheet / .ani-full 上：.ani 带 .flip，transform 被朝向翻转占着；
   .critter 的 transform 又被逐帧定位占着，加在那两层会直接打架。 */
.critter.on-ledge .ani-sheet,
.critter.on-ledge .ani-full { animation: standBreathe 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes standBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.016); } }
/* 台上那只的接地阴影收小一点：它站在石头上，不是踩在草地里 */
.critter.on-ledge .ani-shadow { filter: blur(1px); }
@media (prefers-reduced-motion: reduce) {
  .critter.on-ledge .ani-sheet, .critter.on-ledge .ani-full { animation: none; }
}