/* ============================================================
* 配色变量（主题切换的核心）
* :root 是默认「碧海」，其余主题只覆盖这几个变量
* ============================================================ */
:root {
--bg1: #4783a6;
--bg2: #3a6c8b;
--bg3: #2f5c78;
--p1: #2e6584;
--p2: #356f90;
--p3: #3d7d9c;
--text: #f2fbff;
--text-sub: #c2dcec;
--accent: #ffd76e;
--bd: rgba(150, 205, 235, .40);
--bar: rgba(32, 78, 104, .94);
--bar2: rgba(28, 70, 94, .97);
--panel-rgb: 64, 118, 148;
--btn-rgb: 90, 155, 190;
}
body.theme-sunset {
--bg1: #8a4a42; --bg2: #6f3730; --bg3: #5a2b25;
--p1: #7a3f36; --p2: #8a4a3f; --p3: #9a5648;
--text: #ffeede; --text-sub: #f2c9b0; --accent: #ffd76e;
--bd: rgba(255, 190, 150, .34);
--bar: rgba(92, 42, 36, .95); --bar2: rgba(80, 36, 30, .97);
--panel-rgb: 150, 80, 66; --btn-rgb: 165, 95, 80;
}
body.theme-bamboo {
--bg1: #4a7d60; --bg2: #39634b; --bg3: #2c4f3b;
--p1: #3d6f52; --p2: #46805f; --p3: #52906c;
--text: #eefaf1; --text-sub: #bfe4cc; --accent: #ffe9a8;
--bd: rgba(170, 230, 195, .34);
--bar: rgba(40, 78, 58, .95); --bar2: rgba(0, 0, 0, 0.60);
--panel-rgb: 80, 138, 104; --btn-rgb: 95, 155, 118;
}
body.theme-violet {
--bg1: #7b5ea7; --bg2: #64498c; --bg3: #513c72;
--p1: #63498f; --p2: #7157a5; --p3: #8268b8;
--text: #f0eaff; --text-sub: #cfc0f2; --accent: #ffd76e;
--bd: rgba(200, 180, 255, .34);
--bar: rgba(64, 52, 96, .95); --bar2: rgba(56, 45, 84, .97);
--panel-rgb: 118, 98, 172; --btn-rgb: 132, 112, 190;
}
body.theme-paper {
--bg1: #f7f4ea; --bg2: #efece1; --bg3: #e6e2d4;
--p1: #fbf8ee; --p2: #f2eddd; --p3: #e8e2d0;
--text: #1f1f1f; --text-sub: #5f5f5f; --accent: #b8791f;
--bd: #d8d2c0;
--bar: rgba(250, 247, 238, .97); --bar2: rgba(245, 241, 230, .98);
--panel-rgb: 252, 250, 243; --btn-rgb: 240, 235, 222;
}
/* ============================================================
* 万界游牧 · 界面样式（按参考截图还原）
* ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
background: #6b6f73;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
font-size: 14px; color: #e8f2f7;
}
#app {
max-width: 640px; margin: 0 auto;
/* 高度兼容：--app-h 由 JS 按真实可视高度设置（部分浏览器 100vh 含地址栏/工具栏导致底栏被挤出屏幕） */
height: 100vh; /* 兜底 */
height: 100dvh; /* 支持动态视口的浏览器 */
height: var(--app-h, 100dvh); /* JS 实测高度，最可靠 */
display: flex; flex-direction: column;
background: linear-gradient(var(--p1), var(--p2) 30%, var(--p2));
box-shadow: 0 0 20px rgba(0,0,0,.5); position: relative; overflow: hidden;
}
.hidden { display: none !important; }
b { font-weight: 600; }
/* ---------- 启动遮罩（消除「先看到空场景、1 秒后才出登录框」的闪烁） ---------- */
#boot-loading {
position: fixed; inset: 0; z-index: 900;
display: flex; align-items: center; justify-content: center;
background: var(--bg3); color: #7ee0ff; font-size: 14px; letter-spacing: 3px;
}
#boot-loading.hidden { display: none; }
/* ---------- 顶部 HUD ---------- */
#hud { flex: 0 0 auto; background: var(--p1); border-bottom: 1px solid var(--p3); }
.hud-res { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 10px; font-size: 13px; background: var(--p1); }
.hud-res .res b { color: var(--accent); }
.hud-res .add { color: #7ef29a; cursor: pointer; }
.hud-res .sign { background: var(--p3); color: #ffe9a8; border: 1px solid var(--p3); border-radius: 3px; padding: 1px 10px; cursor: pointer; }
.hud-res .joinqq { margin-left: auto; background: #1c5a3e; color: #9af2bd; border: 1px solid #3aa56a; border-radius: 3px; padding: 1px 10px; cursor: pointer; text-decoration: none; font-size: 13px; }
.hud-res .joinqq:active { filter: brightness(1.2); }
.hud-res .zone {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
color: var(--accent); font-size: 12px; pointer-events: none;
}
.hud-res .online { color: #7ef29a; }
/* 货币图标（金币/仙玉/仙元） */
.cur-ico { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; }
.res-plus { color: #7ef29a; cursor: pointer; font-style: normal; margin-left: 4px; font-weight: 700; }
.res-plus:active { filter: brightness(1.3); }
.hud-main { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; }
.avatar {
width: 44px; height: 44px; border-radius: 8px; flex: 0 0 44px;
background: radial-gradient(circle at 50% 40%, #e8536a, #7a1f33);
display: flex; align-items: center; justify-content: center; font-size: 24px;
border: 2px solid var(--accent); cursor: pointer;
}
.hud-info { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.hud-info .nm {
color: var(--accent); font-weight: 700; font-size: 14px; text-shadow: 1px 1px 0 #000;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-info .uid { color: #7ee0ff; font-size: 11.5px; line-height: 1.35; }
.hud-info .pw { color: #ff7a7a; font-size: 12px; line-height: 1.35; }
.hud-info .pw b { color: #ff5252; }
.hud-side { display: flex; gap: 8px; }
.round-btn {
width: 46px; height: 46px; border-radius: 50%; border: 2px solid #b23a5e;
background: radial-gradient(circle at 50% 35%, var(--p3), var(--p2));
color: #ff9ab5; font-size: 13px; line-height: 1.15; cursor: pointer; font-weight: 700;
}
/* ---------- 页面主体 ---------- */
#page { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.page-title { text-align: center; color: #bfe6ff; padding: 7px 0 5px; font-size: 14px; letter-spacing: 1px; }
.grp-title { text-align: center; color: #ff9ab5; font-weight: 700; margin: 12px 0 8px; font-size: 14px; text-shadow: 1px 1px 0 #000; }
/* 战斗页：副本入口 + 地图分组下拉 */
.map-tools { display: flex; gap: 8px; padding: 4px 14px 0; align-items: stretch; }
.dun-enter {
flex: 1 1 auto; background: linear-gradient(#7a4b8f, #5d3a70);
border: 1px solid #9a6bb0; border-radius: 6px; padding: 8px 10px;
color: var(--accent); font-weight: 700; font-size: 14px; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-shadow: 1px 1px 0 #000;
}
.dun-enter:active { filter: brightness(1.2); }
.dun-enter-sub { font-size: 11px; color: #e8c8f0; font-weight: 400; margin-top: 2px; }
.map-sel {
flex: 0 0 auto; background: var(--p1); color: #bfe6ff; border: 1px solid var(--p3);
border-radius: 6px; padding: 0 8px; font-size: 13px; min-width: 118px;
}
/* 副本页 */
.dun-back { color: #8fd0e8; font-size: 13px; padding: 2px 14px 8px; cursor: pointer; }
.dun-back:active { color: var(--text); }
.dun-desc { color: #a8cbd8; font-size: 12px; padding: 0 14px 8px; }
.dmon-row { cursor: pointer; }
.dmon-row:active { filter: brightness(1.25); }
.dun-manual { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
.dun-manual button {
background: linear-gradient(var(--p3), var(--p2)); border: 1px solid #57a0c8; color: var(--text);
border-radius: 6px; padding: 8px 16px; font-size: 14px; cursor: pointer; min-width: 92px;
}
.dun-manual button:active { filter: brightness(1.2); }
.dun-manual .sk-fight-btn {
background: linear-gradient(#8a5a1f, #5c3810); border-color: #d8a45c; color: #ffe9a8;
font-weight: 700;
}
.dun-manual .sk-fight-btn i { display: block; font-size: 10px; font-style: normal; color: #ffcf7a; font-weight: 400; }
/* 提升页：修炼 / 图谱 */
.cult-lv { color: #ff6a6a; font-size: 12px; margin-left: 4px; }
.atlas-total { text-align: center; color: var(--accent); font-size: 13px; padding: 2px 0 6px; }
.atlas-sub { color: #ff6a6a; font-size: 11px; margin-left: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; justify-content: center; }
.chips .btab { border: 0; cursor: pointer; }
.btn-dim { opacity: .55; }
/* 修炼·材料提升小标题（提升战力分组内） */
.cult-sub { margin-top: 4px; }
/* 修炼塔信息卡 */
.tower-info {
margin: 6px 14px; padding: 8px 12px; background: rgba(var(--panel-rgb), .55);
border: 1px solid var(--p2); border-radius: 6px;
}
.tw-row { display: flex; align-items: baseline; font-size: 13px; line-height: 2; color: #a8cbd8; }
.tw-row > span:first-child { width: 72px; color: #8fb8c8; flex: 0 0 auto; }
.tw-row b { font-weight: 700; }
.tw-tip { font-size: 11px; color: var(--text-sub); margin-left: 6px; }
/* 双列卡片 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.card-btn {
background: linear-gradient(var(--p2), var(--p3));
border: 1px solid var(--p3); border-radius: 6px; min-height: 64px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; cursor: pointer; position: relative; padding: 8px 6px; text-align: center;
}
.card-btn:active { filter: brightness(1.15); }
.card-btn .t { font-size: 15px; letter-spacing: 1px; }
.card-btn .d { font-size: 11px; color: #a8cbd8; }
.card-btn .red-dot {
position: absolute; top: -5px; right: -5px; background: #e23a3a; color: var(--text);
font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; padding: 0 3px;
}
.t-gold { color: var(--accent); }
.t-green { color: #7ef29a; }
.t-red { color: #ff6a6a; }
.t-sky { color: #7ec8ff; }
.t-pink { color: #ff9ab5; }
/* ---------- 修仙页 ---------- */
.home-wrap { position: relative; }
/* 菱形入口按钮（攻略 / 赞助 / 首充） */
.side-diamond {
width: 46px; height: 46px; border: 2px solid #c04a5a; border-radius: 8px;
background: radial-gradient(circle at 50% 40%, #8a2438, #4a1220);
transform: rotate(45deg); display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 0 8px rgba(192,74,90,.45);
}
.side-diamond span {
transform: rotate(-45deg); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 1px;
}
.side-diamond:active { filter: brightness(1.25); }
/* 入口横排（攻略/赞助/首充）：居中显示，不与内容重叠 */
.sd-row { display: flex; justify-content: center; gap: 34px; margin: 2px 0 12px; }
.cultivate-figure { text-align: center; padding: 26px 0 10px; position: relative; width: 200px; height: 170px; margin: 0 auto; }
.cultivate-figure .aura {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%; pointer-events: none;
}
.cultivate-figure .aura-inner {
width: 88px; height: 88px;
border: 1px solid rgba(160, 255, 230, .35);
box-shadow: 0 0 12px rgba(160, 255, 230, .25), inset 0 0 16px rgba(160, 255, 230, .12);
animation: auraSpin 4s linear infinite;
}
.cultivate-figure .aura-mid {
width: 130px; height: 130px;
border: 1px dashed rgba(190, 120, 255, .35);
box-shadow: 0 0 22px rgba(190, 120, 255, .2);
animation: auraSpin 7s linear infinite reverse;
}
.cultivate-figure .aura-outer {
width: 168px; height: 168px;
border: 2px solid rgba(var(--panel-rgb), .15);
background: radial-gradient(circle at 50% 50%, rgba(200,110,240,.12), rgba(var(--panel-rgb), .05) 55%, transparent 70%);
box-shadow: 0 0 34px rgba(160, 120, 255, .18), inset 0 0 40px rgba(var(--panel-rgb), .06);
animation: auraPulse 3s ease-in-out infinite;
}
.cultivate-figure .fig {
position: absolute; top: 50%; left: 50%;
width: 150px; height: 150px; margin: 0;
transform: translate(-50%, -50%);
border-radius: 0;
background: transparent;
box-shadow: none;
display: flex; align-items: center; justify-content: center; font-size: 46px;
animation: figureBreath 3s ease-in-out infinite;
overflow: visible;
}
.cultivate-figure .fig-img {
width: 100%; height: 100%; object-fit: contain; display: block;
mix-blend-mode: screen; /* 深色背景图片与页面融合，只留人物与光效 */
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%);
mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 74%);
}
.cultivate-figure .fv { color: #bfe6ff; font-size: 13px; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; text-shadow: 0 0 6px rgba(var(--panel-rgb), .5); }
@keyframes auraSpin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes auraPulse { 0%,100% { opacity: .55; transform: translate(-50%, -50%) scale(.95); } 50% { opacity: .95; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes figureBreath { 0%,100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
/* 突破瞬间特效 */
.cultivate-figure.breakthrough .aura-inner { animation: auraSpin .8s linear infinite, auraFlash .8s ease-out forwards; }
.cultivate-figure.breakthrough .aura-mid { animation: auraSpin 1.2s linear infinite reverse, auraFlash .8s ease-out forwards; }
.cultivate-figure.breakthrough .aura-outer { animation: auraPulse .6s ease-in-out infinite, auraBloom 1s ease-out forwards; }
.cultivate-figure.breakthrough .fig { animation: figureBreath .4s ease-in-out infinite, figureBurst .8s ease-out forwards; }
@keyframes auraFlash { 0% { box-shadow: 0 0 12px rgba(160,255,230,.3); } 50% { box-shadow: 0 0 60px rgba(255,235,180,.9), 0 0 30px rgba(160,255,230,.8); border-color: rgba(255,235,180,.9); } 100% { box-shadow: 0 0 12px rgba(160,255,230,.3); } }
@keyframes auraBloom { 0% { transform: translate(-50%, -50%) scale(.95); } 50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.06); opacity: .95; } }
@keyframes figureBurst { 0% { filter: brightness(1); transform: translate(-50%, -50%) scale(1); } 50% { filter: brightness(2.4) drop-shadow(0 0 24px #fff); transform: translate(-50%, -50%) scale(1.25); } 100% { filter: brightness(1); transform: translate(-50%, -50%) scale(1.08); } }
.home-btns { display: flex; justify-content: center; gap: 10px; margin: 10px 0 16px; }
.home-btns button {
background: var(--p3); color: var(--text); border: 1px solid var(--p3); border-radius: 4px;
padding: 5px 14px; font-size: 13px; cursor: pointer; position: relative;
}
.home-btns button .badge {
position: absolute; top: -7px; right: -7px; background: #e23a3a; color: var(--text);
font-size: 10px; min-width: 15px; height: 15px; line-height: 15px; border-radius: 8px;
}
.tower-row { display: flex; justify-content: center; gap: 34px; margin-bottom: 12px; }
.tower-item { text-align: center; cursor: pointer; }
.tower-item .ico { font-size: 34px; filter: drop-shadow(0 0 6px rgba(255,215,110,.6)); }
.tower-item .nm { margin-top: 4px; font-size: 13px; color: var(--accent); }
.wj-table { width: calc(100% - 28px); margin: 0 14px; border-collapse: collapse; font-size: 13px; }
.wj-table td { border: 1px solid var(--p3); padding: 4px 10px; }
.wj-table td:first-child { background: var(--p3); color: #7ee0ff; width: 32%; }
.wj-table td:last-child { color: #7ee0ff; }
.home-note { text-align: center; color: #a8cbd8; font-size: 12px; margin: 8px 14px; line-height: 1.7; }
/* ---------- 战斗页 ---------- */
.fight-top { display: flex; align-items: center; padding: 6px 10px; gap: 8px; }
.fight-top button {
background: var(--p3); color: var(--text); border: 1px solid var(--p3); border-radius: 4px;
padding: 5px 14px; font-size: 13px; cursor: pointer;
}
.fight-top button.exit { background: #7a3a5a; border-color: #a05078; }
.fight-top .ft-title { flex: 1; text-align: center; color: #bfe6ff; font-size: 14px; }
.fight-top .help { background: var(--p2); }
#fight-area { position: relative; min-height: 320px; display: flex; flex-direction: column; }
#fight-log { flex: 1; overflow-y: auto; padding: 10px 12px; font-size: 13px; line-height: 1.9; max-height: 52vh; }
#fight-log p { margin: 0 0 2px; text-shadow: 1px 1px 0 #000; }
#fight-log .sys { color: #7ec8ff; }
#fight-log .round { color: #ff9ab5; font-weight: 700; }
#fight-log .atk { color: var(--accent); }
#fight-log .skill { color: #b26ee0; font-weight: 600; }
#fight-log .dmg { color: #ff5252; font-weight: 600; }
#fight-log .heal { color: #7ef29a; }
#fight-log .win { color: var(--accent); font-weight: 700; }
#fight-log .lose { color: #ff5252; font-weight: 700; }
#fight-log .drop { color: #7ef29a; }
.fight-mon { text-align: center; padding: 4px 0; }
.fight-mon .ico { font-size: 44px; filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); }
.fight-mon .ico img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; vertical-align: middle; }
.fight-mon .nm { font-size: 12px; color: #7ee0ff; }
.fight-tip {
margin: 20px auto; max-width: 82%; background: rgba(0, 0, 0, 0.53); border-radius: 8px;
padding: 10px 16px; text-align: center; color: #cfe6f2; font-size: 13px; line-height: 1.8;
}
.fight-me { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0; }
.fight-me .ico {
font-size: 20px; width: 32px; height: 32px; flex: 0 0 32px;
border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--p3); background: var(--p1);
}
.fight-me .ico .av-img { width: 100%; height: 100%; object-fit: cover; }
.fight-me .nm { font-size: 12px; color: var(--accent); }
.fight-status {
flex: 0 0 auto; background: var(--p1); padding: 7px 12px; font-size: 12.5px; color: #7ee0ff;
}
.fight-status .mode { color: var(--accent); cursor: pointer; }
.dun-mode-bar { margin: 6px 14px; color: #7a9cb0; font-size: 12px; }
.dun-mode-bar .mode-btn { color: var(--accent); font-weight: 700; cursor: pointer; text-decoration: underline; }
.fight-status .mode.fast { color: #7ef29a; }
/* 战斗日志内小头像（与文字差不多大） */
#fight-log .log-av { width: 15px; height: 15px; border-radius: 3px; vertical-align: -3px; object-fit: cover; }
#fight-log span.log-av { display: inline-block; text-align: center; line-height: 15px; font-size: 11px; }
/* 聊天分页条 */
.chat-page {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 8px 10px; border-top: 1px solid var(--p2); background: rgba(var(--panel-rgb), .7);
}
.chat-page button {
background: var(--p2); border: 1px solid var(--p3); color: #bfe6ff;
border-radius: 4px; padding: 3px 12px; font-size: 12px; cursor: pointer;
}
.chat-page button:disabled { opacity: .35; cursor: default; }
.chat-page .cp-info { color: #7ee0ff; font-size: 12px; min-width: 44px; text-align: center; }
/* ---------- 聊天页 ---------- */
.chat-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--p1); border-bottom: 1px solid var(--p2); }
.chat-top .ch-btn {
background: #7a3a5a; color: var(--text); border: 1px solid #a05078; border-radius: 4px;
padding: 5px 14px; font-size: 13px; cursor: pointer; flex: 0 0 auto;
}
.chat-top .filters { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.chat-top .filters button {
background: transparent; color: #9fc4d4; border: 1px solid var(--p3); border-radius: 12px;
padding: 3px 12px; font-size: 12px; cursor: pointer;
}
.chat-top .filters button.on { background: var(--p3); color: #ffe9a8; border-color: var(--p3); }
#chat-list { height: calc(var(--app-h, 100vh) - 300px); overflow-y: auto; padding: 4px 10px 8px; font-size: 13px; line-height: 1.8; }
.chat-row { padding: 5px 6px; border-bottom: 1px dashed rgba(var(--panel-rgb), .45); word-break: break-all; }
.chat-row:last-child { border-bottom: 0; }
.chat-row.sys .ctext { color: var(--accent); }
.chat-row.me { background: rgba(var(--panel-rgb), .10); }
.chat-row .tag {
display: inline-block; font-size: 10px; line-height: 16px; padding: 0 5px; border-radius: 3px; margin-right: 5px;
background: #b23a3a; color: var(--text); vertical-align: 1px;
}
.chat-row .tag.sys { background: var(--p3); }
.chat-row .tag.tip { background: #6a8a3a; }
.chat-row .tag.me { background: #7a3a5a; }
.chat-row .time { color: var(--text-sub); font-size: 11px; margin-right: 5px; }
.chat-nm { color: #7ec8ff; font-weight: 700; }
.chat-nm.me { color: #7ef29a; }
.chat-row .ctext { color: #dfeef5; }
.chat-input { display: flex; gap: 8px; padding: 8px 10px; background: var(--p1); border-top: 1px solid var(--p2); }
.chat-input input {
flex: 1; height: 36px; border: 1px solid var(--p3); border-radius: 4px;
background: var(--p1); color: var(--text); padding: 0 10px; font-size: 14px; min-width: 0;
}
.chat-input button {
width: 72px; border: 0; border-radius: 4px; background: linear-gradient(var(--p3), var(--p3));
color: var(--text); font-size: 14px; cursor: pointer; flex: 0 0 auto;
}
.chat-page { display: flex; justify-content: center; gap: 6px; padding: 8px 0; }
.chat-page button { background: var(--p2); color: #bfe6ff; border: 1px solid var(--p3); border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chat-page button:disabled { opacity: .4; }
.chat-page .cp-info { color: #9fc4d4; font-size: 12px; align-self: center; }
/* ---------- 包裹（包裹/仓库/卖出） ---------- */
.bag-tabs { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--p1); }
.btab { border: 0; border-radius: 4px; padding: 5px 14px; font-size: 13px; color: var(--text); cursor: pointer; background: var(--p3); }
.btab.on { background: #e0679a; }
.btab.store.on { background: var(--p3); }
.btab.sell { background: var(--accent); }
.btab.sell.on { background: #e0679a; }
.bt-right { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.bchip { border: 0; border-radius: 3px; padding: 4px 10px; font-size: 12px; color: var(--text); cursor: pointer; background: var(--p3); }
.bchip.f-prop { background: #e23a3a; }
.bchip.f-equip { background: #e0564e; }
.bchip.on { filter: brightness(1.25); box-shadow: 0 0 0 1px #ffe9a8 inset; }
.bag-row {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(var(--p2), var(--p3)); border: 1px solid var(--p3);
border-radius: 6px; padding: 10px; margin: 8px 10px;
}
.bico {
width: 46px; height: 46px; flex: 0 0 auto; border-radius: 6px;
background: var(--p1); border: 1px solid var(--p3);
display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer;
overflow: hidden;
}
/* 后台自定义物品图片（装备/道具/商城/详情通用） */
.bimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-ico { display: inline-block; width: 30px; height: 30px; margin-right: 4px; vertical-align: middle; overflow: hidden; border-radius: 4px; background: var(--p1); border: 1px solid var(--p3); }
.heal { color: #6fe08c; font-weight: 700; }
.binfo { flex: 1; min-width: 0; line-height: 1.7; }
.bname { font-size: 14px; font-weight: 700; }
.bsub { color: #ff9ab5; font-size: 11px; }
.bdesc { display: block; color: #a8cbd8; font-size: 11px; }
.bbtns { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.bbtns button { border: 0; border-radius: 4px; padding: 6px 10px; font-size: 12px; color: var(--text); cursor: pointer; background: var(--p2); border: 1px solid var(--p3); }
.bbtns button:active { filter: brightness(1.2); }
.bbtns .b-eq, .bbtns button[data-act=wear] { background: var(--p2); }
.bbtns button[data-act=sell-one] { background: var(--p3); }
.bbtns button[data-act=store-add], .bbtns button[data-act=store-take] { background: #2a6e5c; }
.bbtns .btn-op { background: #2a5a3e; border: 1px solid #3aa56a; color: #9af2bd; }
.bchk {
width: 26px; height: 26px; flex: 0 0 auto; border: 2px solid var(--p3); border-radius: 4px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
color: #7ef29a; font-weight: 700; font-size: 14px;
}
.bchk.on { border-color: #7ef29a; }
#sell-bar {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--p1); border-top: 1px solid var(--p3); padding: 8px 10px;
}
#sell-bar .sb-pg { background: #e0679a; color: var(--text); border: 0; border-radius: 4px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
#sell-bar input { width: 64px; height: 28px; text-align: center; background: var(--p1); border: 1px solid var(--p3); color: var(--text); border-radius: 4px; font-size: 13px; }
#sell-bar .sb-batch { background: #e0679a; color: var(--text); border: 0; border-radius: 4px; padding: 6px 16px; font-size: 13px; cursor: pointer; }
/* 物品详情弹窗 */
.dlg-detail { border: 2px solid var(--p3); border-radius: 4px; padding: 14px; max-width: 420px; margin: 0 auto; }
.dd-top { display: flex; gap: 12px; align-items: center; }
.dd-ico {
width: 56px; height: 56px; flex: 0 0 auto; border-radius: 8px; font-size: 30px;
background: radial-gradient(circle at 50% 40%, var(--p3), var(--p1));
border: 1px solid var(--p3); display: flex; align-items: center; justify-content: center;
}
.dd-info { font-size: 13px; line-height: 2; }
.dd-name { font-size: 15px; font-weight: 700; }
.dd-desc { margin-top: 10px; font-size: 13px; line-height: 1.8; }
/* 属性逐行显示 */
.dd-stats { margin-top: 10px; padding: 6px 10px; background: rgba(var(--panel-rgb), .5); border: 1px solid var(--p2); border-radius: 4px; }
.dd-stat { font-size: 13px; line-height: 1.9; color: #bfe3d8; }
.dd-close { text-align: center; border-top: 1px solid var(--p3); margin: 12px -14px -14px; padding: 13px 0; cursor: pointer; font-size: 15px; color: #e8f2f7; }
.dd-close:active { background: rgba(var(--panel-rgb), .25); }
/* ---------- 乾坤袋（旧，兼容） ---------- */
.bag-equipped { padding: 8px 14px; }
.bag-equipped .slot {
display: flex; align-items: center; gap: 8px; background: var(--p2);
border: 1px solid var(--p3); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px;
cursor: pointer;
}
.bag-equipped .slot .sn { color: #7ee0ff; width: 44px; }
.bag-equipped .slot .sv { flex: 1; }
.bag-equipped .slot button {
background: var(--p3); color: var(--text); border: 1px solid var(--p3); border-radius: 4px;
padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.bag-list { padding: 4px 14px 14px; }
.bag-item {
display: flex; align-items: center; gap: 8px; background: linear-gradient(var(--p2), var(--p3));
border: 1px solid var(--p3); border-radius: 6px; padding: 9px 10px; margin-bottom: 8px; font-size: 13px;
}
.bag-item .ico { font-size: 22px; }
.bag-item .info { flex: 1; min-width: 0; line-height: 1.6; }
.bag-item .info .sub { color: #a8cbd8; font-size: 11px; }
.bag-item button {
background: linear-gradient(var(--p3), var(--p3)); color: var(--text); border: 0; border-radius: 4px;
padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.bag-item button.wear { background: linear-gradient(#4CAF50, #388e3c); }
.empty-tip { text-align: center; color: #a8cbd8; padding: 40px 0; font-size: 13px; }
/* ---------- 弹窗 ---------- */
#mask {
position: absolute; inset: 0; background: rgba(0, 0, 0, 0.48); z-index: 60;
display: flex; align-items: flex-end; justify-content: center;
}
#modal {
width: 100%; max-width: 640px; max-height: 86%; overflow-y: auto;
background: var(--p2); border-top: 2px solid var(--p3); border-radius: 14px 14px 0 0;
padding: 16px 16px 20px;
}
#modal h3 { margin: 0 0 12px; text-align: center; color: var(--accent); font-size: 16px; }
#modal .mrow {
display: flex; align-items: center; gap: 8px; background: var(--p2);
border: 1px solid var(--p3); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px;
}
#modal .mrow .info { flex: 1; line-height: 1.6; }
#modal .mrow .sub { color: #a8cbd8; font-size: 11px; }
#modal .mrow button {
background: linear-gradient(var(--p3), var(--p3)); color: var(--text); border: 0; border-radius: 4px;
padding: 6px 14px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#modal .mrow button:disabled { opacity: .45; cursor: not-allowed; }
#modal .mrow button.buy { background: linear-gradient(#c8963c, #a07020); }
#modal .mrow button.wear { background: linear-gradient(#4CAF50, #388e3c); }
.modal-close { text-align: center; color: #a8cbd8; padding-top: 12px; cursor: pointer; font-size: 13px; }
/* 居中弹窗（道友三思 / 双塔 等确认类弹窗） */
#mask.center { align-items: center; }
#mask.center #modal {
border: 2px solid var(--p3); border-top: 2px solid var(--p3); border-radius: 8px;
margin: 0 26px; max-height: 78%;
}
#mask.center .modal-close { display: none; }
.dlg-text { color: #e8f2f7; font-size: 14px; line-height: 1.9; margin-bottom: 10px; }
.dlg-warn { color: #ff6a6a; font-size: 13px; line-height: 1.7; margin-bottom: 6px; }
.dlg-green { color: #7ef29a; font-size: 14px; font-weight: 700; margin: 8px 0 4px; }
.dlg-list { font-size: 13px; color: #cfe6f2; line-height: 1.9; }
.dlg-list p { margin: 0; }
.dlg-btns { display: flex; border-top: 1px solid var(--p3); margin: 14px -16px -20px; }
.dlg-btn {
flex: 1; background: transparent; border: 0; color: var(--text); font-size: 15px;
padding: 12px 0; cursor: pointer; font-family: inherit;
}
.dlg-btn + .dlg-btn { border-left: 1px solid var(--p3); }
.dlg-btn:active { background: rgba(var(--panel-rgb), .25); }
/* 地图卡片：金色标题（福利地图等） */
.card-btn.gold .t { color: var(--accent); }
/* 洞府飘字：每秒经验/修为 */
.float-txt {
position: absolute; left: 0; right: 0; top: 26%; text-align: center;
font-size: 15px; font-weight: 800;
pointer-events: none; z-index: 6;
animation: floatUp 2.2s ease-out forwards; white-space: nowrap;
letter-spacing: 1px;
}
.float-txt.dao { top: 42%; }
.float-txt.exp { color: #a8ffcb; text-shadow: 0 0 8px rgba(var(--panel-rgb), .55), 0 0 16px rgba(var(--panel-rgb), .25); }
.float-txt.dao { color: #ffe0a8; text-shadow: 0 0 8px rgba(255,174,0,.55), 0 0 16px rgba(255,174,0,.25); }
/* 点击打坐人物加速修炼 */
.cultivate-figure[data-act] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cultivate-figure.tap .fig { animation: figureTap .26s ease-out; }
@keyframes figureTap {
0% { transform: translate(-50%, -50%) scale(1); }
45% { transform: translate(-50%, -50%) scale(.9); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes floatUp {
0% { opacity: 0; transform: translateY(18px) scale(.85); }
12% { opacity: 1; transform: translateY(-4px) scale(1.05); }
30% { opacity: 1; transform: translateY(-18px) scale(1); }
100% { opacity: 0; transform: translateY(-86px) scale(.92); }
}
/* 人物信息面板（顶栏「人物」弹窗） */
.hero-panel {
margin: 0; border: 0; border-radius: 0;
background: transparent;
padding: 0;
}
.hero-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hero-modal-head .hero-title { flex: 1; margin-bottom: 0; }
.back-btn {
background: #7a3a5a; color: var(--text); border: 1px solid #a05078; border-radius: 4px;
padding: 4px 14px; font-size: 12px; cursor: pointer;
}
.hero-title { text-align: center; color: var(--accent); font-weight: 700; margin-bottom: 10px; font-size: 15px; letter-spacing: 2px; }
/* 玩家信息面板 */
.pi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pi-head .hero-title { flex: 1; margin-bottom: 0; }
.pi-label { color: var(--accent); font-weight: 700; }
.hero-ident { display: flex; align-items: center; gap: 10px; }
.hero-avatar { width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto;
background: radial-gradient(circle at 50% 40%, rgba(200,110,240,.4), rgba(var(--panel-rgb), .15));
display: flex; align-items: center; justify-content: center; font-size: 34px; }
.hero-id-info { flex: 1; min-width: 0; }
.hero-name { font-size: 15px; color: #e8f2f7; font-weight: 700; }
.hero-sub { font-size: 12px; color: #a8cbd8; line-height: 1.6; }
.hero-pw { text-align: right; font-size: 12px; color: #cfe6f2; flex: 0 0 auto; }
.hero-pw b { color: var(--accent); font-size: 15px; }
.hero-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
/* 环形装备布局：左4槽 / 中间人物 / 右4槽（参考目标：方形图标格） */
.hero-eq-layout {
display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px;
align-items: center; margin: 12px 0;
}
.hero-eq-col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hero-eq-col .hero-slot { min-height: 0; }
.hero-center { text-align: center; padding: 4px 2px; }
.hero-center .hero-avatar { margin: 0 auto 6px; width: 68px; height: 68px; font-size: 38px; }
.hero-center .hero-name { font-size: 14px; color: var(--accent); }
.hero-center .hero-sub { line-height: 1.75; }
.hero-center .hero-sub .lv-txt { color: #ffe9a8; font-weight: 700; }
.hero-center .hero-pw { margin-top: 4px; text-align: center; }
.hero-slot {
width: 60px; height: 60px; box-sizing: border-box;
border: 1px solid var(--p2); border-radius: 10px;
background: linear-gradient(var(--p3), var(--p2));
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 3px 2px; overflow: hidden; cursor: pointer; font-size: 24px;
}
.hero-slot:active { filter: brightness(1.25); border-color: #8a6cc0; }
.hero-slot .hs-ico { font-size: 24px; line-height: 1; }
.hero-slot .hs-ico.empty { color: #7ef29a; font-weight: 700; }
.hero-slot .hs-img { display: block; max-width: 52px; max-height: 38px; object-fit: contain; }
.hero-slot .hs-nm { font-size: 9px; line-height: 1.1; margin-top: 3px; max-width: 56px;
color: #a8cbd8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 装备品质配色 */
.q0 { color: #cfe6f2; }
.q1 { color: #7ee0ff; }
.q2 { color: #b26ee0; }
.q3 { color: var(--accent); }
.hero-actions { display: flex; gap: 12px; margin: 14px 0 12px; }
.hero-actions button { flex: 1; padding: 9px 0; background: var(--p2); border: 1px solid var(--p3);
color: #ffe9a8; border-radius: 6px; font-size: 14px; cursor: pointer; font-family: inherit; }
.hero-actions button:active { filter: brightness(1.2); }
.hero-sect { text-align: center; color: #ff9ab5; font-weight: 700; margin: 14px 0 8px; font-size: 13px; }
.hero-skill { display: flex; align-items: center; border-bottom: 1px dashed var(--p3); padding: 7px 0; }
.hero-skill:last-child { border-bottom: none; }
.hero-skill .sk-info { flex: 1; min-width: 0; }
.hero-skill .sk-name { font-size: 13px; color: #e8f2f7; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hero-skill .sk-desc { font-size: 11px; color: #a8cbd8; }
/* 技能图标：小尺寸圆角方图，避免像旧头像那样过大 */
.hero-skill .sk-ico {
width: 44px; height: 44px; flex: 0 0 44px; margin-right: 10px;
border-radius: 8px; overflow: hidden;
display: flex; align-items: center; justify-content: center; font-size: 22px;
background: radial-gradient(circle at 50% 35%, var(--p3), var(--p2));
border: 1px solid var(--p3);
}
.hero-skill .sk-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-tag { font-size: 10px; font-weight: 400; color: var(--accent); border: 1px solid #8a6c30; border-radius: 3px; padding: 0 4px; }
.sk-tag.passive { color: #7ec8ff; border-color: var(--p3); }
.hero-skill button { padding: 4px 12px; background: var(--p2); border: 1px solid var(--p3);
color: var(--accent); border-radius: 6px; font-size: 12px; flex: 0 0 auto; }
/* 人物弹窗底部功能栏：一键装备 / 提升 / 转生 */
.hero-bottombar { display: flex; border-top: 1px solid var(--p3); margin: 16px -16px -20px; }
.hero-bottombar button {
flex: 1; background: var(--p2); border: 0; border-right: 1px solid var(--p3);
color: #ffe9a8; font-size: 14px; padding: 13px 0; cursor: pointer; font-family: inherit;
}
.hero-bottombar button:last-child { border-right: 0; }
.hero-bottombar button:active { filter: brightness(1.2); }
/* 人物属性面板：成对、同色、带框 */
.hero-stats { border: 1px solid var(--p3); border-radius: 10px; overflow: hidden; background: rgba(var(--panel-rgb), .55); margin: 0 0 10px; }
.stat-row { display: flex; align-items: center; border-bottom: 1px solid rgba(var(--panel-rgb), .8); }
.stat-row:nth-child(odd) { background: rgba(var(--panel-rgb), .10); }
.stat-row:last-child { border-bottom: 0; }
.stat-row-full .stat-item { flex: 1; }
.stat-item { flex: 1; display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px; font-size: 13px; min-height: 38px; }
.stat-item + .stat-item { border-left: 1px solid rgba(var(--panel-rgb), .8); }
.stat-item .sl { font-weight: 700; margin-right: 8px; letter-spacing: .5px; }
.stat-item .sv { display: flex; align-items: center; color: #eaf6fb; font-weight: 700; }
.stat-item .sv .pot-btn, .stat-item .sv .mini-btn { margin-left: 6px; }
/* 标签统一金色、数值统一白色加粗，避免整页花乱 */
.stat-item .sl { color: var(--accent); }
.stat-item .sv { color: var(--text); }
.mini-btn.ready {
background: linear-gradient(#8a5a1f, #5c3810); border-color: #d8a45c;
color: #ffe9a8; font-weight: 700;
}
.pot-btn { padding: 0 7px; background: var(--p2); border: 1px solid var(--p3);
color: var(--accent); border-radius: 5px; font-size: 12px; cursor: pointer; }
.mini-btn { padding: 2px 8px; background: var(--p2); border: 1px solid var(--p3);
color: #bfe6ff; border-radius: 4px; font-size: 11px; cursor: pointer; }
.pot-btn:active, .mini-btn:active { filter: brightness(1.2); }
/* ---------- 引导任务条 ---------- */
#guide-bar {
flex: 0 0 auto; margin: 6px 10px; padding: 7px 10px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
/* 淡化：半透明淡金，不再抢眼 */
background: rgba(233, 205, 140, .16);
border: 1px solid rgba(200, 164, 92, .45); border-radius: 6px;
font-size: 12.5px; color: #f0dcb0; line-height: 1.55;
box-shadow: none;
}
#guide-bar .gb-tag { flex: 0 0 auto; color: var(--accent); font-weight: 700; }
#guide-bar .gb-txt { flex: 1 1 auto; min-width: 0; }
#guide-bar .gb-claim,
#guide-bar .gb-todo {
flex: 0 0 auto; margin-left: auto; padding: 3px 11px;
font-size: 11.5px; color: var(--text); cursor: pointer; border-radius: 12px; white-space: nowrap;
background: linear-gradient(180deg, #d8a03c, #b8801e);
border: 1px solid #ffcf7a; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
#guide-bar .gb-claim { background: linear-gradient(180deg, #4fae6a, #2f8a4a); border-color: #7fe0a0; }
#guide-bar .gb-claim:active,
#guide-bar .gb-todo:active { filter: brightness(1.15); }
/* ---------- 底部导航 ---------- */
#tabbar {
flex: 0 0 auto; display: flex; background: var(--p1); border-top: 1px solid var(--p3);
}
#tabbar button {
flex: 1; background: transparent; border: 0; color: #bfe6ff; font-size: 14px;
padding: 13px 0; cursor: pointer; position: relative; font-family: inherit;
}
#tabbar button.on { background: var(--p2); color: #ffe9a8; font-weight: 700; }
#tabbar .dot {
position: absolute; top: 6px; right: 12%; width: 8px; height: 8px; border-radius: 50%;
background: #e23a3a; display: none;
}
#tabbar .dot.show { display: block; }
/* ---------- 提示 ---------- */
#toast {
position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
background: rgba(var(--panel-rgb), .95); border: 1px solid var(--p3); color: #ffe9a8;
padding: 9px 18px; border-radius: 8px; font-size: 13px; z-index: 200; max-width: 80%; text-align: center;
}
/* ---------- 登录弹窗 ---------- */
#login-mask {
background:
linear-gradient(rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.55)),
url('../img/login-bg.png') center / cover no-repeat,
radial-gradient(circle at 50% 30%, var(--p3), var(--p1));
}
.login-qq { margin-top: 8px; color: #bfe6ff; font-size: 13px; }
.login-qq .t-red { font-weight: 700; }
#login-mask {
position: absolute; inset: 0;
z-index: 100; display: flex; align-items: center; justify-content: center;
}
.login-box {
width: 82%; max-width: 340px; text-align: center;
}
.login-title { color: var(--accent); font-size: 30px; font-weight: 700; letter-spacing: 4px; text-shadow: 2px 2px 0 #000; }
.login-sub { color: #7ee0ff; font-size: 13px; margin: 8px 0 24px; letter-spacing: 2px; }
.login-box input {
width: 100%; height: 44px; margin-bottom: 12px; border: 1px solid var(--p3); border-radius: 6px;
background: var(--p1); color: var(--text); padding: 0 14px; font-size: 15px;
}
.login-btns { display: flex; gap: 12px; margin-top: 4px; }
.login-btns button {
flex: 1; height: 42px; border: 0; border-radius: 6px; font-size: 15px; cursor: pointer;
}
.login-btns #login-go { background: linear-gradient(var(--p3), var(--p3)); color: var(--text); }
.login-btns #login-reg { background: linear-gradient(#c8963c, #a07020); color: var(--text); }
.login-tip { color: #7a9cb0; font-size: 12px; margin-top: 14px; }
/* ---------- 注册视图 ---------- */
.reg-box { width: 92%; max-width: 420px; max-height: 92%; overflow-y: auto; }
.reg-fld { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.reg-fld .rf-lb { color: #bfe6ff; font-size: 14px; flex: 0 0 58px; text-align: right; }
.reg-fld input {
flex: 1; height: 40px; border: 1px solid var(--p3); border-radius: 6px;
background: var(--p1); color: var(--text); padding: 0 12px; font-size: 14px;
}
.reg-feature {
margin-top: 14px; text-align: left; background: rgba(0, 0, 0, 0.53);
border: 1px solid var(--p2); border-radius: 6px; padding: 10px 12px;
font-size: 12px; line-height: 1.9; color: #cfe6f2;
}
.reg-feature .t-green { color: #7ef29a; }
.reg-qq { margin-top: 10px; color: #bfe6ff; font-size: 13px; }
.reg-qq .t-red { font-weight: 700; }
/* ---------- 头像图片（种族头像） ---------- */
.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* ---------- 弹窗裸样式：物品详情去掉外层框，仅保留内层详情框 ---------- */
#modal.bare { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: 460px; }
#mask.center #modal.bare { border: 0; }
/* ---------- 创建角色（种族头像 + 道号） ---------- */
#cc-mask {
position: absolute; inset: 0; z-index: 120; overflow-y: auto;
background: radial-gradient(circle at 50% 30%, var(--p3), var(--p1));
display: flex; align-items: center; justify-content: center;
}
.cc-box { width: 88%; max-width: 420px; text-align: center; padding: 16px 0; }
.cc-title { color: var(--accent); font-size: 22px; font-weight: 700; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; margin-bottom: 16px; }
.cc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.cc-av {
width: 64px; height: 64px; border-radius: 10px; border: 2px solid var(--p3); background: var(--p1);
display: flex; align-items: center; justify-content: center; font-size: 34px; cursor: pointer; overflow: hidden;
}
.cc-av.on { border-color: var(--accent); box-shadow: 0 0 8px rgba(255, 215, 110, .6); }
.cc-race { color: #7ee0ff; font-size: 14px; margin-bottom: 10px; }
.cc-race b { color: #ff9ab5; }
.cc-nm { color: #bfe6ff; font-size: 14px; margin-bottom: 12px; }
.cc-nm input {
width: 62%; height: 36px; border: 1px solid var(--p3); border-radius: 6px;
background: var(--p1); color: var(--text); padding: 0 10px; font-size: 14px;
}
.cc-btns button {
background: linear-gradient(#c8963c, #a07020); border: 0; border-radius: 6px;
color: var(--text); font-size: 15px; padding: 10px 36px; cursor: pointer;
}
.cc-tip { color: #7a9cb0; font-size: 11px; margin-top: 10px; }
/* ---------- 游戏攻略弹窗 ---------- */
.gl-title { text-align: center; font-weight: 700; margin: 4px 0 8px; }
.gl-tabs { justify-content: center; margin-bottom: 10px; }
/* ---------- 货币交易 ---------- */
.ct-form {
max-width: 340px; margin: 0 auto; border: 2px solid var(--p3); border-radius: 8px;
background: var(--p1); padding: 16px 14px; text-align: center;
}
.ct-cur { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.ct-lb { color: #bfe6ff; font-size: 13px; margin: 8px 0 4px; }
.ct-lb.sub { color: #7a9cb0; font-size: 11px; }
.ct-form input {
width: 100%; height: 38px; border: 1px solid var(--p3); border-radius: 6px;
background: var(--p2); color: var(--text); padding: 0 12px; font-size: 15px; text-align: center;
}
.ct-go {
margin-top: 14px; width: 100%; height: 40px; border: 0; border-radius: 6px;
background: linear-gradient(#c8963c, #a07020); color: var(--text); font-size: 15px; cursor: pointer;
}
.ct-go.ct-cancel { margin-top: 8px; background: var(--p3); }
.ct-row .bdesc { display: block; }
/* ---------- 帮派 ---------- */
.gang-home { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.gang-big {
background: var(--p3); border: 1px solid var(--p3); border-radius: 6px; color: var(--text);
font-size: 15px; padding: 10px 22px; cursor: pointer;
}
.gang-big.gold { background: linear-gradient(#c8963c, #a07020); }
.gang-tag {
flex: 0 0 42px; width: 42px; height: 42px; border-radius: 6px; background: var(--p1);
border: 1px solid var(--p3); color: var(--accent); font-size: 18px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.gang-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.gang-head .gang-nm .bname { display: block; }
.gang-notice { margin: 0 14px 8px; padding: 8px 10px; background: rgba(var(--panel-rgb), .5); border: 1px solid var(--p2); border-radius: 6px; color: #bfe3d8; font-size: 12px; line-height: 1.7; }
.gang-ops { text-align: center; padding: 16px 0; }
.gang-ops button { background: #5a2a3a; border: 1px solid #b23a5e; border-radius: 6px; color: #ff9ab5; padding: 8px 22px; cursor: pointer; }
/* ---------- 每日签到日历 ---------- */
.sign-cal {
display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 2px;
max-height: 300px; overflow-y: auto;
}
.sign-cell {
flex: 1 1 30%; max-width: 32%; min-width: 88px;
background: rgba(0, 0, 0, 0.34); border: 1px solid var(--p2); border-radius: 6px;
padding: 5px 7px; display: flex; flex-direction: column; gap: 2px;
}
.sign-cell .sc-day { color: #7ee0ff; font-size: 12px; font-weight: 700; position: relative; }
.sign-cell .sc-day .sc-ok {
position: absolute; right: 0; top: 0; color: #7ef29a; font-style: normal; font-weight: 700;
}
.sign-cell .sc-rw { color: #bfe6ff; font-size: 11px; line-height: 1.4; }
.sign-cell.got { opacity: .55; }
.sign-cell.got .sc-rw { text-decoration: line-through; }
.sign-cell.today { border-color: var(--accent); box-shadow: 0 0 6px rgba(255,215,110,.45); }
.sign-cell.today-got { border-color: #7ef29a; box-shadow: 0 0 6px rgba(var(--panel-rgb), .4); }
.sign-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px 4px; }
.sign-foot .info { font-size: 13px; color: #bfe6ff; }
/* ---------- GM 万能宝箱 ---------- */
/* 场景标题行最右侧按钮（仅设计号可见）：GM 宝箱 GM */
.scene-head .head-gm {
margin-left: auto; flex: 0 0 auto;
background: linear-gradient(#8a5a1f, #5c3810); border: 1px solid #d8a45c; color: #ffe9a8;
border-radius: 5px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
letter-spacing: .5px; box-shadow: 0 0 8px rgba(255, 160, 60, .45);
}
.scene-head .head-gm span { color: var(--accent); margin: 0 2px; }
.scene-head .head-gm:active { filter: brightness(1.2); }
/* 宝箱弹窗：搜索 / 列表 / 分页 / 数量表单 */
.gm-search { display: flex; gap: 8px; padding: 4px 6px 8px; }
.gm-search input {
flex: 1; height: 34px; border: 1px solid var(--p3); border-radius: 6px;
background: var(--p1); color: var(--text); padding: 0 10px; font-size: 13px;
}
.gm-search button {
background: var(--p3); border: 1px solid var(--p3); border-radius: 6px;
color: var(--text); font-size: 13px; padding: 0 16px; cursor: pointer;
}
.gm-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--p2); border-radius: 6px; }
.gm-row {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 10px; border-bottom: 1px dashed rgba(var(--panel-rgb), .3);
}
.gm-row:last-child { border-bottom: 0; }
.gm-nm { color: #bfe6ff; font-size: 13px; }
.gm-pick { color: #7ee0ff; cursor: pointer; text-decoration: underline; font-size: 13px; }
.gm-page {
display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0 4px;
}
.gm-page button {
background: var(--p2); border: 1px solid var(--p3); color: #bfe6ff;
border-radius: 4px; padding: 3px 12px; font-size: 12px; cursor: pointer;
}
.gm-page button:disabled { opacity: .35; cursor: default; }
.gm-page .gp-info { color: #7ee0ff; font-size: 12px; min-width: 44px; text-align: center; }
.gm-form { padding: 12px 6px; color: #bfe6ff; font-size: 14px; }
.gm-form input {
width: 130px; height: 36px; border: 1px solid var(--p3); border-radius: 6px;
background: var(--p1); color: #a8ffcb; padding: 0 10px; font-size: 14px; margin-left: 6px;
}
/* ---------- 赞助界面 ---------- */
.zz-text {
color: #bfe6ff; font-size: 12px; line-height: 1.9;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px;
padding: 10px 12px; margin-bottom: 12px;
}
.zz-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 10px; }
.zz-btns button {
background: var(--p3); border: 1px solid var(--p3); border-radius: 6px;
color: var(--text); font-size: 14px; padding: 9px 18px; cursor: pointer;
}
.zz-btns button:active { filter: brightness(1.2); }
/* ---------- 顶栏圆形按钮配色（攻略/赞助/首充） ---------- */
.round-btn.rb-green { border-color: #3aa56a; color: #9af2bd; background: radial-gradient(circle at 50% 35%, #2a5a43, #14301f); }
.round-btn.rb-gold { border-color: #c8963c; color: #ffe9a8; background: radial-gradient(circle at 50% 35%, #6a4a1f, #30200f); font-size: 12px; }
.hud-side { gap: 6px; }
.round-btn { width: 44px; height: 44px; flex: 0 0 44px; }
/* ---------- 修仙页聊天预览 ---------- */
.home-chat {
margin: 12px 14px 8px; border: 1px solid var(--p2); border-radius: 8px;
background: rgba(var(--panel-rgb), .35); padding: 6px 10px 8px; cursor: pointer;
}
.home-chat .hc-title { text-align: left; color: #7ee0ff; font-size: 12px; padding: 2px 0 4px; letter-spacing: 1px; }
.home-chat .hc-line { margin: 3px 0; font-size: 12px; line-height: 1.6; color: #cfe8f2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-chat .hc-nm { color: #7ec8ff; }
/* ---------- 场景地图 ---------- */
.fight-top .ft-title.left { text-align: left; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fight-top .st-btn { flex: 0 0 auto; padding: 4px 9px; font-size: 12px; }
.scene-pic { text-align: left; margin: 8px 14px 2px; }
.scene-pic img { max-width: 31%; max-height: 57px; border-radius: 6px; border: 1px solid var(--p3); object-fit: contain; }
.scene-pic .scene-img-ph { font-size: 28px; filter: drop-shadow(0 0 10px rgba(255,215,110,.5)); padding: 4px 0; }
/* 场景介绍：纯文字行（无背景框，与出口行一致） */
.scene-desc-line {
margin: 6px 14px; padding: 2px 4px; color: #a8cbd8; font-size: 13px; line-height: 1.7;
border-bottom: 1px dashed rgba(var(--panel-rgb), .3);
}
/* 场景名标题（靠左，最上方） */
.scene-head {
display: flex; align-items: center; gap: 8px; margin: 10px 14px 2px;
padding-bottom: 6px; border-bottom: 1px solid rgba(var(--panel-rgb), .35);
}
.scene-head-ico { font-size: 22px; }
.scene-head-name { color: var(--accent); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.scene-head .head-refresh {
margin-left: 10px; background: var(--p2); border: 1px solid var(--p3); color: #bfe6ff;
border-radius: 5px; padding: 3px 12px; font-size: 12px; cursor: pointer; flex: 0 0 auto;
}
/* 挂机按钮（显眼橙金渐变） */
.scene-head .head-idle {
margin-left: 8px; background: linear-gradient(#d8862c, #a85a10); border: 1px solid #ffb14e; color: var(--text);
border-radius: 5px; padding: 3px 14px; font-size: 12px; font-weight: 700; cursor: pointer; flex: 0 0 auto;
box-shadow: 0 0 8px rgba(255, 160, 60, .5);
}
.scene-head .head-idle:active { filter: brightness(1.2); }
/* 背包顶部货币栏 */
.bag-cur {
display: flex; align-items: center; gap: 6px; margin: 8px 14px; padding: 6px 12px;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px; font-size: 13px;
}
.bag-cur b { color: var(--accent); margin-right: 8px; }
.scene-head .head-refresh:active { filter: brightness(1.2); }
/* 安/危 标记：安=不可PK（绿），危=可PK（红） */
.pk-tag { font-size: 15px; font-weight: 700; }
.pk-tag.safe { color: #7ef29a; }
.pk-tag.danger { color: #ff8a8a; }
/* 功能按钮行：完全保持原来的尺寸与排列（左对齐、按文字宽度），只换按钮皮肤 */
.scene-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 14px 2px; justify-content: flex-start; align-items: center; }
.scene-btns button, .scene-btns a {
flex: 0 0 auto; position: relative;
padding: 4px 12px; font-size: 12px; line-height: 1.5;
color: #eaf7ff; cursor: pointer; border-radius: 5px;
background: linear-gradient(180deg, rgba(var(--panel-rgb), .58) 0%, rgba(var(--panel-rgb), .70) 55%, rgba(var(--panel-rgb), .78) 100%);
border: 1px solid rgba(var(--panel-rgb), .45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 1px 2px rgba(0, 0, 0, .16);
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.scene-btns button:active, .scene-btns a:active { filter: brightness(1.25); }
.scene-btns button .dot {
position: absolute; top: 2px; right: 4px;
width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a;
}
/* 出口：上下左右纯文字行（无框无箭头） */
.exit-list { margin: 6px 14px; }
.exit-row {
display: flex; align-items: center; gap: 10px; padding: 7px 4px;
border-bottom: 1px dashed rgba(var(--panel-rgb), .3); cursor: pointer;
}
.exit-row:active { background: rgba(var(--panel-rgb), .12); }
.exit-row.off { opacity: .4; cursor: default; }
.exit-dir { flex: 0 0 30px; color: var(--accent); font-weight: 700; font-size: 14px; }
.exit-name { flex: 0 1 auto; color: #bfe6ff; font-size: 14px; }
.exit-go { color: #7ee0ff; font-size: 12px; margin-left: 10px; }
/* 场景内实体行（人物/BOSS/物品）：文字与图标相称，防覆盖 */
.scene-row {
display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 7px 4px;
border-bottom: 1px dashed rgba(var(--panel-rgb), .35); cursor: pointer;
}
.scene-row .sr-ico { flex: 0 0 30px; width: 30px; height: 30px; font-size: 21px; text-align: center; line-height: 30px; }
.scene-row .sr-info { flex: 0 1 auto; min-width: 0; line-height: 1.4; display: flex; flex-direction: column; gap: 1px; }
.scene-row .sr-info b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scene-row .sr-info .sub { font-size: 11px; color: #7a9cb0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.scene-row button { flex: 0 0 auto; padding: 3px 12px; font-size: 12px; white-space: nowrap; margin-left: 10px; }
.scene-row .btn-danger { background: #5a2a3a; border: 1px solid #b23a5e; color: #ff9ab5; }
.scene-boss { border-bottom-color: rgba(178, 58, 94, .5); }
/* 好友 */
.fr-find { display: flex; gap: 8px; padding: 4px 6px 8px; }
.fr-find input { flex: 1; height: 36px; border: 1px solid var(--p3); border-radius: 6px; background: var(--p1); color: var(--text); padding: 0 10px; font-size: 14px; }
.fr-find button { background: linear-gradient(#c8963c, #a07020); border: 0; border-radius: 6px; color: var(--text); padding: 0 16px; cursor: pointer; }
.fr-tip { color: #7a9cb0; font-size: 11px; padding: 6px 6px 2px; line-height: 1.6; }
.fr-list { max-height: 320px; overflow-y: auto; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px dashed rgba(var(--panel-rgb), .35); cursor: pointer; }
.fr-row:active { filter: brightness(1.2); }
.fr-idx { color: #7a9cb0; width: 22px; }
.fr-ico { flex: 0 0 30px; width: 30px; height: 30px; font-size: 20px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--p1); border: 1px solid var(--p3); overflow: hidden; }
.fr-ico .av-img { width: 100%; height: 100%; object-fit: cover; }
.fr-nm { color: #7ee0ff; }
.fr-view { padding: 0 6px; }
.frv-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; }
.frv-ava { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 8px; border: 2px solid var(--accent); background: var(--p1); font-size: 30px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.frv-ava .av-img { width: 100%; height: 100%; object-fit: cover; }
.frv-nm { color: var(--accent); font-size: 15px; font-weight: 700; }
.frv-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(var(--panel-rgb), .3); font-size: 13px; color: #bfe6ff; }
.frv-row b { color: #ffe9a8; }
.frv-sep { text-align: center; color: #7a9cb0; font-size: 12px; margin: 10px 0 6px; }
.pm-box { max-height: 200px; overflow-y: auto; background: rgba(var(--panel-rgb), .6); border: 1px solid var(--p2); border-radius: 6px; padding: 6px 10px; margin: 0 6px; }
.pm-box p { margin: 3px 0; font-size: 13px; line-height: 1.5; }
.pm-box .pm-nm { color: #7ec8ff; }
.pm-box .pm-me .pm-nm { color: #7ef29a; }
.pm-box .pm-tm { color: var(--p3); font-size: 10px; }
.pm-send { display: flex; gap: 8px; padding: 8px 6px 4px; }
.pm-send input { flex: 1; height: 36px; border: 1px solid var(--p3); border-radius: 6px; background: var(--p1); color: var(--text); padding: 0 10px; font-size: 14px; }
.pm-send button { background: var(--p3); border: 1px solid var(--p3); border-radius: 6px; color: var(--text); padding: 0 14px; cursor: pointer; }
.pm-ops { display: flex; justify-content: center; gap: 18px; padding: 8px 0 2px; }
.pm-ops .fr-op { color: #7ee0ff; font-size: 13px; cursor: pointer; text-decoration: underline; }
/* 场景任务 */
.task-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px dashed rgba(var(--panel-rgb), .35); }
.task-row .sr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.task-row .sub { font-size: 11px; color: #7a9cb0; }
.task-row button { flex: 0 0 auto; padding: 3px 12px; font-size: 12px; }
.task-done { background: rgba(var(--panel-rgb), .05); }
/* 腾云 */
.ty-list { max-height: 340px; overflow-y: auto; padding: 0 4px; }
.ty-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 3px 0; background: var(--p1); border: 1px solid var(--p3); border-radius: 6px; cursor: pointer; font-size: 14px; color: #7ee0ff; }
.ty-row:active { filter: brightness(1.25); }
.ty-cur { border-color: #7ef29a; }
.ty-ico { font-size: 18px; }
.ty-nm { color: var(--accent); }
/* ---------- 手机端适配（窄屏紧凑化） ---------- */
@media (max-width: 480px) {
/* 顶栏：头像/圆形按钮缩小，文字单行省略，避免竖向堆叠撑大 */
.avatar { width: 40px; height: 40px; flex: 0 0 40px; font-size: 20px; }
.hud-main { gap: 6px; padding: 5px 8px 6px; }
.hud-side { gap: 4px; }
.round-btn { width: 38px; height: 38px; flex: 0 0 38px; font-size: 10px; line-height: 1.3; }
.round-btn.rb-gold { font-size: 10px; }
.hud-info { line-height: 1.45; min-width: 0; }
.hud-info .nm { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-info .tl, .hud-info .pw { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 顶栏货币行：区服改行内，避免绝对定位遮挡 */
.hud-res { gap: 6px; padding: 3px 8px; font-size: 12px; }
.hud-res .zone { position: static; transform: none; margin-left: 2px; }
.hud-res .res { white-space: nowrap; }
/* 页面卡片紧凑 */
.grid2 { gap: 8px; margin: 8px; }
.card-btn { padding: 8px 10px; }
.card-btn .t { font-size: 14px; }
.card-btn .d { font-size: 11px; }
.grp-title { font-size: 12px; margin: 8px 8px 4px; }
.map-tools { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
.map-tools .dun-enter { font-size: 12px; padding: 6px 10px; }
/* 实体行与按钮紧凑 */
.bag-row { padding: 6px 8px; gap: 6px; }
.bag-row .bbtns button, .scene-row button, .task-row button { padding: 2px 8px; font-size: 11px; }
.bag-row .binfo .bname { font-size: 13px; }
.bag-row .binfo .bsub, .bag-row .binfo .bdesc { font-size: 10px; }
.scene-row button { padding: 2px 10px; }
.scene-btns button, .scene-btns a {
padding: 8px 0;
font-size: 12.5px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
justify-content: center;
}
.scene-head-name { font-size: 16px; }
.scene-head .head-refresh, .scene-head .head-idle { padding: 3px 10px; font-size: 11px; }
.exit-row { padding: 6px 2px; }
/* 战斗页紧凑 */
.fight-top { padding: 4px 6px; gap: 4px; }
.fight-top button { padding: 3px 8px; font-size: 11px; }
.fight-status { font-size: 11px; padding: 5px 8px; }
.fight-mon .ico img { width: 48px; height: 48px; }
.cultivate-figure { height: 150px; }
.cultivate-figure .fig { width: 110px; height: 110px; }
/* 弹窗与底部导航 */
#modal { width: 94%; max-width: 94%; }
#tabbar button { font-size: 12px; }
}
/* ===== 二级页面统一抬头：返回靠最左 / 标题居中（与聊天页同一视觉） ===== */
.subpage { padding: 0 10px 22px; }
.sub-bar {
display: flex; align-items: center; gap: 8px;
margin: 0 -10px 10px; padding: 8px 10px;
background: var(--p1); border-bottom: 1px solid var(--p2);
}
.sub-back {
flex: 0 0 56px; width: 56px; box-sizing: border-box; text-align: center;
background: #7a3a5a; color: var(--text); border: 1px solid #a05078; border-radius: 4px;
padding: 5px 0; font-size: 13px; cursor: pointer;
}
.sub-back:active { filter: brightness(1.2); }
.sub-title {
flex: 1; min-width: 0; text-align: center; color: var(--accent); font-weight: 700;
letter-spacing: 2px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub-side { flex: 0 0 56px; width: 56px; }
.subpage .fr-list, .subpage .ty-list { max-height: none; overflow: visible; }
/* 任务页 */
.tk-sum {
display: flex; align-items: center; gap: 14px; padding: 8px 10px; margin: 2px 0 8px;
background: rgba(var(--panel-rgb), .7); border: 1px solid var(--p2); border-radius: 8px;
font-size: 12px; color: #9fc4d4;
}
.tk-sum b { font-size: 14px; }
.tk-all {
margin-left: auto; padding: 5px 12px; border: 0; border-radius: 6px;
background: linear-gradient(#c8963c, #a07020); color: var(--text); font-size: 12px; cursor: pointer;
}
.tk-all:active { filter: brightness(1.15); }
.tk-type {
display: inline-block; padding: 0 5px; margin-right: 5px; border-radius: 3px;
font-size: 10px; background: #3a2a10; color: var(--accent); border: 1px solid #7a5a20; vertical-align: 1px;
}
.tk-rws { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tk-rw {
font-size: 10px; color: #9ad8ff; background: rgba(var(--panel-rgb), .6);
border: 1px solid var(--p2); border-radius: 3px; padding: 0 4px;
}
.tk-bar { display: block; height: 6px; margin: 5px 0 2px; background: var(--p1); border: 1px solid var(--p2); border-radius: 4px; overflow: hidden; }
.tk-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--p3), #7ee0ff); }
.tk-bar i.ok { background: linear-gradient(90deg, #4fd18b, #a8f5c0); }
/* 腾云页 */
.ty-sec { margin: 10px 4px 6px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.ty-cnt { color: #7a9cb0; font-size: 11px; font-weight: 400; letter-spacing: 0; }
.ty-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ty-q {
display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px;
background: var(--p1); border: 1px solid var(--p3); border-radius: 6px; cursor: pointer;
}
.ty-q:active { filter: brightness(1.25); }
.ty-q-ico { font-size: 18px; }
.ty-q-nm { font-size: 11px; color: #bfe6ff; }
.ty-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ty-desc { display: block; font-size: 10px; color: #7a9cb0; line-height: 1.35; margin-top: 1px; }
.ty-tag { flex: 0 0 auto; font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.ty-tag.safe { color: #8ef0a8; border: 1px solid #2f6a4a; background: rgba(30, 80, 55, .4); }
.ty-tag.danger { color: #ff9a9a; border: 1px solid #7a3a3a; background: rgba(90, 30, 30, .4); }
@media (max-width: 480px) {
.ty-quick { grid-template-columns: repeat(4, 1fr); }
.sub-title { font-size: 14px; letter-spacing: 1px; }
}
/* 页签上的小红点（任务可交提示） */
.btab .dot { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: #ff5a5a; vertical-align: 1px; }
/* ===== 玩家信息页：紧凑列表（参考页游玩家信息） ===== */
.pi-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 8px; border-bottom: 1px solid rgba(var(--panel-rgb), .5);
}
.pi-row:nth-child(odd) { background: rgba(var(--panel-rgb), .18); }
.pi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pi-line { font-size: 13px; color: #e8f2f7; line-height: 1.5; word-break: break-all; }
.pi-label { color: var(--accent); font-weight: 700; }
.pi-val { color: var(--text); }
.pi-desc { font-size: 10px; color: #7a9cb0; line-height: 1.35; }
.pi-ops { flex: 0 0 auto; display: flex; gap: 4px; }
.pi-ops button {
background: var(--p2); border: 1px solid var(--p3); color: #ffe9a8;
border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.pi-ops button:active { filter: brightness(1.2); }
@media (max-width: 480px) {
.pi-row { padding: 5px 6px; }
.pi-ops button { padding: 4px 8px; font-size: 12px; }
}
/* ===== 人物页紧凑化（参考页游人物面板：更小的头像/装备格、更紧的属性行） ===== */
.hero-eq-layout { grid-template-columns: 58px 1fr 58px; gap: 8px; margin: 8px 0; }
.hero-eq-col { gap: 8px; }
.hero-slot { width: 54px; height: 54px; border-radius: 9px; font-size: 21px; }
.hero-slot .hs-ico { font-size: 21px; }
.hero-slot .hs-img { max-width: 48px; max-height: 34px; }
.hero-slot .hs-nm { max-width: 50px; font-size: 9px; margin-top: 2px; }
.hero-center { padding: 2px; }
.hero-center .hero-avatar { width: 60px; height: 60px; font-size: 32px; margin-bottom: 4px; }
.hero-center .hero-name { font-size: 14px; }
.hero-center .hero-sub { font-size: 11px; line-height: 1.5; }
.hero-center .hero-pw { font-size: 11px; margin-top: 2px; }
.hero-center .hero-pw b { font-size: 14px; }
.hero-actions { gap: 8px; margin: 10px 0; }
.hero-actions button { padding: 8px 0; font-size: 13px; }
.hero-stats { margin-bottom: 8px; border-radius: 8px; }
.stat-item { padding: 5px 8px; min-height: 30px; font-size: 13px; }
.hero-sect { margin: 10px 0 4px; font-size: 12px; }
.hero-skill { padding: 6px 0; }
.hero-skill .sk-ico { width: 40px; height: 40px; flex: 0 0 40px; margin-right: 8px; }
.hero-skill .sk-name { font-size: 12.5px; }
.hero-skill .sk-desc { font-size: 10.5px; }
.hero-skill button { padding: 4px 10px; font-size: 12px; }
.hero-bottombar { margin: 12px -10px 10px; }
.hero-bottombar button { padding: 11px 0; font-size: 13px; }
/* ===== 顶栏 5 个圆形功能按钮：AI 图标 + 下方小字，整体缩小 ===== */
.hud-side { gap: 6px; align-items: flex-start; }
.round-btn { width: 34px; height: 34px; flex: 0 0 34px; }
.round-btn.rb-ico {
width: 34px; height: auto; flex: 0 0 34px; padding: 0;
border: 0; background: transparent; box-shadow: none; border-radius: 0; overflow: visible;
display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1;
}
.round-btn.rb-ico img {
width: 34px; height: 34px; object-fit: cover; display: block; border-radius: 50%;
border: 1px solid #c8963c; box-shadow: 0 0 6px rgba(255, 190, 90, .3);
}
.round-btn.rb-ico .rb-lb { font-size: 9px; line-height: 1; color: var(--accent); font-weight: 400; letter-spacing: 0; }
.round-btn.rb-ico:active { filter: brightness(1.2); }
/* ===== 人物页装备槽：两侧向中间收拢、去掉紫色底 ===== */
.hero-eq-layout { grid-template-columns: 1fr 175px 1fr; gap: 6px; padding: 0 2px; margin: 10px 0 8px; }
.hero-eq-col { align-items: center; gap: 8px; }
.hero-slot {
border: 1px solid var(--p3);
background: linear-gradient(var(--p1), var(--p1));
box-shadow: inset 0 0 8px rgba(var(--panel-rgb), .1);
}
.hero-slot:active { border-color: #7ec8ff; }
/* ===== 场景页统一背景：纯色（不要网格纹理） ===== */
.scene-wrap { min-height: 100%; padding-bottom: 6px; background: var(--p1); }
/* 场景实体行前缀：NPC：/ 怪物： */
.scene-row .sr-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.scene-row .sr-label.npc { color: #7ee0ff; }
.scene-row .sr-label.mob { color: #ff9ab5; }
/* NPC / 怪物头像小图 */
.scene-row .sr-ico {
flex: 0 0 34px; width: 34px; height: 34px; font-size: 21px;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.scene-row .sr-img {
width: 34px; height: 34px; object-fit: cover; display: block;
border-radius: 50%; border: 1px solid var(--p3); background: var(--p1);
}
/* 场景行按钮（对话 / 挑战）：深蓝底白字圆角，参考背包按钮 */
.scene-row button,
.scene-row .btn-danger {
flex: 0 0 auto; margin-left: 10px; padding: 4px 14px; font-size: 12px;
background: var(--p1); border: 1px solid var(--p2); color: #eaf6fb;
border-radius: 6px; font-family: inherit; cursor: pointer;
}
.scene-row button:active { filter: brightness(1.3); }
/* 弹窗里的次要说明 */
.dlg-text .sub { color: #7a9cb0; font-size: 11px; }
.dlg-btn[disabled] { opacity: .45; }
/* ===== 顶栏：头像与右侧三行文字等高对齐 ===== */
.hud-main { align-items: center; }
.hud-info { display: flex; flex-direction: column; justify-content: center; gap: 0; line-height: 1.2; }
.hud-info .nm { font-size: 14px; line-height: 1.25; }
.hud-info .tl, .hud-info .pw { font-size: 11.5px; line-height: 1.2; }
@media (max-width: 480px) {
.hud-info .nm { font-size: 12px; }
.hud-info .tl, .hud-info .pw { font-size: 10px; }
}
/* ===== 每日签到：独立整页 ===== */
.sign-page .sign-cal { max-height: none; overflow: visible; }
.sign-page .sign-cell { min-width: 30%; }
.sign-page .sign-foot { margin-top: 4px; border-top: 1px dashed rgba(var(--panel-rgb), .35); padding-top: 12px; }
.sign-page .sign-foot button {
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a; color: var(--text);
border-radius: 6px; padding: 7px 20px; font-size: 13px; font-weight: 700;
font-family: inherit; cursor: pointer;
}
.sign-page .sign-foot button[disabled] { opacity: .45; cursor: not-allowed; }
/* ===== 修炼页：当前经验条 ===== */
.home-expbar {
margin: 6px 14px 10px; height: 8px; background: var(--p1);
border: 1px solid var(--p2); border-radius: 5px; overflow: hidden;
}
.home-expbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--p3), #7ef29a); }
/* ===== 确认类弹窗：统一居中 ===== */
#mask.center { align-items: center; }
#mask.center #modal {
width: 88%; max-width: 460px; margin: 0 12px; padding: 18px 16px 20px;
background: var(--p1); border: 2px solid var(--p3); border-radius: 10px;
box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}
#mask.center #modal h3 { margin: 0 0 14px; font-size: 17px; letter-spacing: 1px; }
#mask.center .dlg-btns { margin: 16px -16px -20px; border-top: 1px solid var(--p3); }
#mask.center .dlg-btn { font-size: 15px; padding: 13px 0; }
/* 居中弹窗里「无外框」的物品详情不受居中样式影响 */
#mask.center #modal.bare {
background: transparent; border: 0; box-shadow: none; padding: 0;
width: auto; max-width: 460px;
}
/* 居中弹窗底部按钮贴合圆角 */
#mask.center .dlg-btns { border-radius: 0 0 9px 9px; overflow: hidden; }
/* 顶栏文字单行省略，保证与头像等高 */
.hud-info > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== 所有弹窗统一居中显示（含各类信息/确认弹窗） ===== */
#mask { align-items: center; }
#modal {
width: 92%; max-width: 500px; max-height: 84%;
border: 2px solid var(--p3); border-radius: 10px;
background: var(--p1); box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}
#mask.center #modal { width: 88%; max-width: 460px; }
#modal.bare { width: auto; max-width: 460px; border: 0; background: transparent; box-shadow: none; padding: 0; }
/* ===== 顶栏紧凑（去掉经验增益条后整体上移） ===== */
.hud-main { padding: 5px 10px 6px; }
/* ===== 场景页：同地图玩家 ===== */
.map-players {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
margin: 4px 14px 0; font-size: 13px; line-height: 1.7;
}
.map-players .mp-label { color: #bfe6ff; }
.map-players .mp-name {
color: #7ee0ff; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.map-players .mp-name:active { color: var(--accent); }
.map-players .mp-sep { color: var(--p3); font-style: normal; }
/* ===== NPC 独立页面 ===== */
.npc-page { padding: 12px 4px 20px; }
.npc-hero {
display: flex; align-items: center; gap: 12px; padding: 12px;
border: 1px solid var(--p2); border-radius: 10px;
background: linear-gradient(var(--p1), var(--p1));
}
.npc-ava {
width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
border: 2px solid #c8963c; flex: 0 0 64px; background: var(--p1);
display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.npc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.npc-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.npc-name { font-size: 17px; color: var(--accent); letter-spacing: 1px; }
.npc-say {
margin: 12px 0; padding: 12px 14px; border-radius: 8px;
background: rgba(var(--panel-rgb), .75); border: 1px solid var(--p2); border-left: 3px solid var(--p3);
color: #cfeaf5; font-size: 13px; line-height: 1.8;
}
.npc-act {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
background: rgba(var(--panel-rgb), .7); border: 1px solid var(--p2); border-radius: 8px;
}
.na-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.na-txt b { color: #bfe6ff; font-size: 14px; }
.na-txt .sub { color: #7a9cb0; font-size: 11px; }
.na-btn {
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a; color: var(--text);
border-radius: 6px; padding: 7px 16px; font-size: 13px; font-weight: 700;
font-family: inherit; cursor: pointer;
}
.na-btn[disabled] { opacity: .45; }
.npc-tip { margin-top: 10px; text-align: center; font-size: 11px; color: #7a9cb0; }
/* ===== 玩家资料页 ===== */
.pv-card { padding: 12px 4px 20px; }
.pv-head {
display: flex; align-items: center; gap: 12px; padding: 12px;
background: linear-gradient(var(--p1), var(--p1)); border: 1px solid var(--p2); border-radius: 10px;
}
.pv-ava {
width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
border: 2px solid var(--accent); flex: 0 0 64px; background: var(--p1);
display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.pv-ava .av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-name { font-size: 17px; color: var(--accent); }
.pv-rows {
margin-top: 10px; border: 1px solid var(--p2); border-radius: 10px;
overflow: hidden; background: rgba(var(--panel-rgb), .7);
}
.pv-row {
display: flex; justify-content: space-between; padding: 9px 12px;
border-bottom: 1px dashed rgba(var(--panel-rgb), .3); font-size: 13px; color: #bfe6ff;
}
.pv-row:last-child { border-bottom: 0; }
.pv-row b { color: #eaf6fb; }
.pv-ops { display: flex; gap: 10px; margin-top: 14px; }
.pv-ops button {
flex: 1; padding: 10px 0; font-size: 14px; border-radius: 8px;
border: 1px solid var(--p3); background: var(--p2); color: #bfe6ff;
font-family: inherit; cursor: pointer;
}
.pv-ops button:active { filter: brightness(1.2); }
/* ===== 独立页底部「返回场景」按钮 ===== */
.sub-foot { display: flex; justify-content: center; padding: 16px 0 26px; }
.sub-foot .sub-home, .sub-foot a.sub-home {
min-width: 180px; padding: 10px 30px; font-size: 14px; font-weight: 700;
color: var(--text); background: linear-gradient(#c8963c, #a07020);
border: 1px solid #ffcf7a; border-radius: 8px; font-family: inherit; cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, .35); letter-spacing: 1px;
}
.sub-foot .sub-home:active { filter: brightness(1.12); }
/* ===== 人物页：境界+等级并入经验行 ===== */
.stat-exp-row { flex-wrap: nowrap; }
.stat-exp-row .stat-item { min-width: 0; }
.stat-exp-row .stat-realm { flex: 0 0 44%; }
.stat-exp-row .stat-exp .sv { font-size: 12px; gap: 2px; }
.stat-exp-row .stat-exp .mini-btn { padding: 2px 8px; font-size: 11px; }
.stat-exp-row .stat-exp { flex: 1 1 0; }
.stat-exp-row .stat-item .sv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-exp-row .lv-badge { color: var(--accent); font-weight: 700; margin-left: 4px; }
.stat-item .lv-badge { color: var(--accent); font-weight: 700; }
/* ===== 查看玩家 / 我的装备 ===== */
.pv-eq { margin-top: 4px; }
.pv-avatar.hero-avatar { border-color: var(--accent); }
.pv-sect {
margin: 14px 0 8px; padding: 6px 0; text-align: center;
font-size: 14px; letter-spacing: 3px; color: #8fd6ea; font-weight: 700;
border-top: 1px dashed rgba(var(--panel-rgb), .35);
border-bottom: 1px dashed rgba(var(--panel-rgb), .35);
}
.pv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv-stat {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 12px; font-size: 13px; color: #bfe6ff;
background: rgba(var(--panel-rgb), .7); border: 1px solid var(--p2); border-radius: 8px;
}
.pv-stat b { color: #eaf6fb; }
.hero-slot.ro { cursor: pointer; }
.hero-slot.ro:active { filter: brightness(1.15); }
.eq-tip { margin: 10px 2px 0; text-align: center; line-height: 1.6; }
/* ===== 我的装备 / 技能 页面 ===== */
.eq-page, .skill-page { padding: 10px 2px 0; }
.skill-head {
display: flex; justify-content: space-between; align-items: center;
margin: 2px 2px 10px; padding: 9px 12px; font-size: 13px; color: #bfe6ff;
background: rgba(var(--panel-rgb), .7); border: 1px solid var(--p2); border-radius: 8px;
}
.skill-head b { color: var(--accent); }
/* ===== 天骄榜（独立页） ===== */
.rank-page { padding: 8px 0 0; }
.rank-page .chips { margin-bottom: 10px; }
.rank-row {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
background: rgba(var(--panel-rgb), .7); border: 1px solid var(--p2); border-radius: 8px;
}
.rank-row.linkable { cursor: pointer; }
.rank-row.linkable:active { background: rgba(var(--panel-rgb), .8); }
.rk-no {
flex: 0 0 28px; height: 28px; line-height: 28px; text-align: center;
font-size: 13px; font-weight: 700; color: #bfe6ff;
background: var(--p1); border: 1px solid var(--p2); border-radius: 6px;
}
.rk-no.top { color: var(--accent); border-color: #c8963c; background: #3a2f16; }
.rk-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 13px; }
.rk-info b { color: #eaf6fb; }
.rk-info .sub { font-size: 11px; width: 100%; }
.rk-go { flex: 0 0 auto; font-size: 12px; color: #7ee0ff; }
/* ===== 地上掉落列表 ===== */
.drop-list { margin: 0 14px 2px; }
.drop-list .scene-row { margin-left: 0; margin-right: 0; }
.drop-empty { padding: 6px 2px; font-size: 12px; }
.scene-row .sr-info { min-width: 0; }
.scene-row .sr-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== 聊天页改版：发言置顶 + 频道分栏 ===== */
.chat-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--p1); border-bottom: 1px solid var(--p2); }
.chat-top .chat-send { flex: 1; display: flex; gap: 6px; min-width: 0; }
.chat-top .chat-send input {
flex: 1; height: 34px; min-width: 0; padding: 0 10px; font-size: 13px;
border: 1px solid var(--p3); border-radius: 5px; background: var(--p1); color: var(--text);
}
.chat-top .chat-send button {
flex: 0 0 auto; width: 64px; border: 0; border-radius: 5px; cursor: pointer;
background: linear-gradient(var(--p3), var(--p3)); color: var(--text); font-size: 13px;
}
.chat-top .chat-send button:active { filter: brightness(1.15); }
.chat-channels {
display: flex; gap: 6px; padding: 7px 10px; overflow-x: auto;
background: var(--p1); border-bottom: 1px solid var(--p2);
}
.chat-channels button {
flex: 0 0 auto; padding: 3px 12px; font-size: 12px; cursor: pointer;
background: transparent; color: #9fc4d4; border: 1px solid var(--p3); border-radius: 12px;
}
.chat-channels button.on { background: var(--p3); color: #ffe9a8; border-color: var(--p3); }
.chat-row[data-act] { cursor: pointer; }
.chat-row .tag.pm { background: #7a3a5a; }
.chat-row .tag.team { background: var(--p2); }
.chat-row .tag.notice { background: #8a6a2a; }
.chat-row.notice .ctext { color: #ffe9a8; }
/* ===== 好友列表：头像 + 种族 ===== */
.fr-ico { flex: 0 0 36px; width: 36px; height: 36px; font-size: 22px; }
.fr-race { margin-left: auto; font-size: 11px; white-space: nowrap; }
/* ===== 道友资料：环形装备 + 属性 ===== */
.frv-eq { margin: 8px 0 10px; }
.frv-avatar { border: 2px solid var(--accent); }
.frv-stats { margin-bottom: 8px; }
.frv-meta { margin-bottom: 0; }
.frv-tip { text-align: center; margin: 8px 0 2px; font-size: 11px; }
/* 场景功能按钮：腾云之后另起一行 */
.scene-btns-2 { margin-top: 2px; }
/* 道友资料弹窗内更紧凑的环形装备 */
.frv-eq .hero-center { min-width: 0; }
.frv-eq .hero-center .hero-avatar { width: 60px; height: 60px; font-size: 32px; }
.frv-eq .hero-name, .frv-eq .hero-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frv-eq .hero-slot { width: 56px; height: 56px; }
.fr-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 聊天频道 7 个按钮：压缩间距，手机宽度内一屏显示 */
.chat-channels { gap: 5px; padding: 7px 8px; }
.chat-channels button { padding: 3px 9px; font-size: 12px; }
/* 二级整页：内容不足一屏时，「返回场景」也贴在页面底部，不再悬在内容下方 */
.subpage { display: flex; flex-direction: column; min-height: 100%; box-sizing: border-box; }
.subpage #sub-body { flex: 1 1 auto; }
.subpage .sub-foot { margin-top: auto; }
/* ================= 包裹细节优化 ================= */
.bag-cur { gap: 10px; }
.cur-item { display: flex; align-items: center; gap: 3px; }
.cur-item i { font-style: normal; font-size: 10px; color: #7fa7ba; }
.cur-item b { margin: 0; font-size: 12px; }
.bag-back {
margin-left: auto; padding: 3px 9px; font-size: 11px; color: var(--text); border-radius: 4px; cursor: pointer;
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a;
}
.bag-back:active { filter: brightness(1.15); }
.bchip.f-all { background: #e23a3a; }
.bchip.f-equip { background: #e0564e; }
.bchip.f-skill { background: var(--p3); }
.bchip.f-mat { background: #6b8a3a; }
.bchip.f-pill { background: #7a4bb0; }
.bag-row { padding: 7px 9px; gap: 8px; align-items: center; }
.bico { width: 44px; height: 44px; }
.bname { font-size: 13px; }
.bnum { margin-left: 3px; font-size: 11px; color: #8fb6c8; }
.bind { font-style: normal; font-size: 10px; color: #ff9ab5; margin-left: 2px; }
.bdesc { font-size: 11px; color: #8fb6c8; line-height: 1.5; }
.bbtns { gap: 4px; flex-wrap: nowrap; }
.bbtns button { padding: 4px 8px; font-size: 11px; border-radius: 4px; white-space: nowrap; }
.bag-row .bbtns button.b-use { background: #1e6a4a; border-color: #3fae7a; }
.bag-row .bbtns button.b-sell { background: #5a2a3a; border-color: #b23a5e; }
.bag-row .bbtns button.b-store { background: #2a6e5c; border-color: var(--p3); }
/* ================= 帮派 ================= */
.scene-btns-3 { margin-top: 2px; }
.gang-hero {
display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px;
border-radius: 8px; background: linear-gradient(135deg, var(--p1), var(--p1)); border: 1px solid var(--p2);
}
.gang-hero.empty { flex-direction: column; text-align: center; padding: 22px 14px; }
.gang-hero.empty .gh-name { font-size: 17px; }
.gang-tag.big { width: 46px; height: 46px; font-size: 20px; border-radius: 8px; }
.gh-main { flex: 1; min-width: 0; }
.gh-name { font-size: 17px; color: var(--accent); font-weight: 700; }
.gh-lv {
margin-left: 6px; padding: 1px 6px; font-size: 11px; font-weight: 400; color: #bfe6ff;
background: var(--p2); border: 1px solid var(--p3); border-radius: 8px;
}
.gh-sub { margin-top: 3px; font-size: 11px; color: #8fb6c8; }
.gh-role {
flex: 0 0 auto; padding: 2px 8px; font-size: 11px; color: #7ef29a;
background: rgba(30, 80, 50, .5); border: 1px solid #2f6b4a; border-radius: 10px;
}
.gang-stats { display: flex; gap: 6px; margin: 8px 0; }
.gang-stats .gs {
flex: 1; padding: 7px 4px; text-align: center;
background: rgba(0, 0, 0, 0.34); border: 1px solid var(--p2); border-radius: 6px;
}
.gang-stats i { display: block; font-style: normal; font-size: 10px; color: #7fa7ba; margin-bottom: 2px; }
.gang-stats b { font-size: 13px; }
.gang-rule {
display: flex; gap: 6px; align-items: flex-start; padding: 7px 9px; font-size: 12px; line-height: 1.6;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px; color: #bfe3d8;
}
.gang-rule b { flex: 0 0 auto; color: var(--accent); }
.gang-rule span { flex: 1; word-break: break-all; }
.gang-rule .mini-btn { flex: 0 0 auto; }
.gang-nav { display: flex; gap: 5px; margin: 8px 0; }
.gang-nav button {
flex: 1; padding: 6px 0; font-size: 12px; color: #bfe6ff; cursor: pointer;
background: var(--p1); border: 1px solid var(--p2); border-radius: 5px;
}
.gang-nav button.on {
background: linear-gradient(#c8963c, #a07020); border-color: #ffcf7a; color: var(--text); font-weight: 700;
}
.gang-daily { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.gang-daily button {
flex: 1; min-width: 28%; padding: 7px 0; font-size: 12px; color: #d8ffe8; cursor: pointer;
background: linear-gradient(#1e6a4a, #14472f); border: 1px solid #3fae7a; border-radius: 5px;
}
.gang-daily button:disabled { filter: grayscale(.6); opacity: .7; cursor: default; }
.gang-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.gang-roles .gr {
display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-width: 0;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 5px;
}
.gang-roles i { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #7fa7ba; }
.gang-roles b {
flex: 1; min-width: 0; font-size: 12px; font-weight: 400; color: var(--accent);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gang-mem {
display: flex; align-items: center; gap: 7px; padding: 7px 9px; margin-bottom: 5px; font-size: 12px;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px;
}
.gm-role {
flex: 0 0 auto; padding: 1px 5px; font-size: 10px; border-radius: 3px;
color: #bfe6ff; background: var(--p2); border: 1px solid var(--p3);
}
.gm-role.leader { color: var(--accent); background: #5a3a10; border-color: #c8963c; }
.gm-role.office { color: #8ff2c0; background: #174a3a; border-color: #2f8a64; }
.gm-name { flex: 1; min-width: 0; color: #e6f6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-on { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: #466; vertical-align: middle; }
.gm-on.on { background: #5ef28a; box-shadow: 0 0 5px #5ef28a; }
.gm-contrib { flex: 0 0 auto; font-size: 11px; color: #9fd6a0; }
.gm-ops { display: flex; flex: 0 0 auto; gap: 4px; }
.gm-ops button {
padding: 3px 7px; font-size: 11px; color: #bfe6ff; cursor: pointer;
background: var(--p2); border: 1px solid var(--p3); border-radius: 4px;
}
.gm-ops button.danger { color: #ff9ab5; background: #4a1e2a; border-color: #a23a5a; }
.gang-rank-row {
display: flex; align-items: center; gap: 8px; padding: 8px 9px; margin-bottom: 5px;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px;
}
.gr-no { width: 20px; text-align: center; font-size: 12px; color: #7fa7ba; }
.gr-no.top.t1 { color: var(--accent); font-weight: 700; }
.gr-no.top.t2 { color: #dfe6ee; font-weight: 700; }
.gr-no.top.t3 { color: #d09a6a; font-weight: 700; }
.gang-tag.small { width: 24px; height: 24px; font-size: 13px; border-radius: 4px; }
.gr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gr-info b { font-size: 13px; font-weight: 600; color: var(--accent); }
.gr-info i { font-style: normal; font-size: 11px; color: #8fb6c8; }
.gang-rank-row button {
flex: 0 0 auto; padding: 4px 10px; font-size: 11px; color: var(--text); cursor: pointer;
background: linear-gradient(#1e6a4a, #14472f); border: 1px solid #3fae7a; border-radius: 4px;
}
.gr-mine {
flex: 0 0 auto; padding: 1px 6px; font-size: 10px; color: #7ef29a;
border: 1px solid #2f6b4a; border-radius: 8px;
}
.gang-chat { margin-top: 2px; }
.gc-list {
height: 260px; overflow-y: auto; padding: 7px 9px; font-size: 12px; line-height: 1.7;
background: rgba(0, 0, 0, 0.37); border: 1px solid var(--p2); border-radius: 6px;
}
.gc-line { word-break: break-all; }
.gc-time { color: var(--text-sub); }
.gc-nm { color: #7fd6ff; }
.gc-text { color: #dff2ff; }
.gc-send { display: flex; gap: 6px; margin-top: 6px; }
.gc-send input {
flex: 1; min-width: 0; padding: 7px 9px; font-size: 13px; color: #dff2ff;
background: var(--p1); border: 1px solid var(--p2); border-radius: 5px;
}
.gc-send button {
padding: 0 16px; font-weight: 700; color: var(--text); cursor: pointer;
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a; border-radius: 5px;
}
.gang-quit-row { text-align: center; padding: 14px 0 4px; }
.gang-quit-row button {
padding: 6px 20px; font-size: 12px; color: #ff9ab5; cursor: pointer;
background: #5a2a3a; border: 1px solid #b23a5e; border-radius: 6px;
}
.gang-form { display: flex; gap: 8px; margin-top: 12px; }
.gang-form.col { flex-direction: column; }
.gang-form input, .gang-form textarea {
flex: 1; min-width: 0; padding: 8px 9px; font-size: 13px; color: #dff2ff;
background: var(--p1); border: 1px solid var(--p2); border-radius: 5px;
}
.gang-form textarea { min-height: 70px; resize: vertical; }
.gang-form button {
padding: 8px 16px; font-weight: 700; color: var(--text); cursor: pointer;
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a; border-radius: 5px;
}
.gang-role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.gang-role-pick button {
padding: 9px 0; font-size: 13px; color: #bfe6ff; cursor: pointer;
background: var(--p2); border: 1px solid var(--p3); border-radius: 5px;
}
.gang-manage-tip { margin: 8px 2px; font-size: 11px; line-height: 1.6; color: #7fa7ba; }
.gang-more { padding: 8px 0; text-align: center; font-size: 12px; color: #7fd6ff; cursor: pointer; }
.gang-tips {
margin-top: 10px; padding: 9px 11px; font-size: 12px; line-height: 1.8; color: #bfe3d8;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px;
}
/* ================= 聊天头像与玩家名点击 ================= */
.chat-row .ch-av {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 20px; height: 20px; margin: 0 4px 0 2px; border-radius: 50%; overflow: hidden;
background: rgba(0, 0, 0, 0.37); border: 1px solid var(--p2); font-size: 12px; line-height: 1;
}
.chat-row .ch-av .av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-nm[data-act] { cursor: pointer; }
.chat-nm[data-act]:hover { text-decoration: underline; filter: brightness(1.2); }
/* ================= 战斗状态卡：头像 + 名字 + 血条/蓝条 ================= */
.fight-unit {
display: flex; align-items: center; gap: 10px; margin: 8px 14px; padding: 8px 10px;
background: rgba(0, 0, 0, 0.34); border: 1px solid var(--p2); border-radius: 8px;
}
.fight-unit.mon-unit { border-color: #6b3a3a; background: rgba(60, 22, 22, .35); }
.fight-unit.me-unit { border-color: var(--p2); }
.fu-ico {
width: 52px; height: 52px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
font-size: 30px; border-radius: 8px; background: rgba(0, 0, 0, 0.43); border: 1px solid var(--p2); overflow: hidden;
}
.fu-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fu-info { flex: 1; min-width: 0; }
.fu-name { margin-bottom: 4px; font-size: 13px; color: #e6f6ff; }
.fu-name b { font-weight: 700; }
.fu-name .fu-lv { margin-left: 6px; font-size: 10px; color: #8fb6c8; }
.fu-name .fu-boss {
margin-left: 6px; padding: 0 6px; font-size: 10px; color: var(--accent);
background: #5a3a10; border: 1px solid #c8963c; border-radius: 8px;
}
.fbar { position: relative; height: 15px; margin-top: 4px; border-radius: 8px; background: var(--p1); border: 1px solid var(--p2); overflow: hidden; }
.fbar.mp { height: 12px; }
.fbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width .25s ease; }
.fbar.hp i { background: linear-gradient(#e0564e, #8a2a2a); }
.fbar.mp i { background: linear-gradient(var(--accent), var(--p2)); }
.fbar span {
position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 13px;
color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
.fbar.mp span { line-height: 11px; }
.dun-manual .sk-fight-btn em { display: block; font-style: normal; font-size: 9px; line-height: 1.2; color: #9fc6ff; }
.dun-manual .sk-fight-btn:disabled { filter: grayscale(.7); opacity: .55; cursor: default; }
/* 包裹底部「返回场景」间距 */
.bag-foot { margin-top: 12px; }
/* 包裹页签左侧「返回」按钮（与二级页返回同款玫红样式），三个页签随之右移 */
.bag-back2 {
background: #7a3a5a; color: var(--text); border: 1px solid #a05078; border-radius: 4px;
padding: 4px 12px; font-size: 12px; cursor: pointer; margin-right: 2px;
}
.bag-back2:active { filter: brightness(1.2); }
/* ================= 天骄榜：紧凑精致 ================= */
.rank-row { gap: 8px; padding: 6px 9px; margin-bottom: 6px; border-radius: 6px; }
.rank-row.me { border-color: #2f6b4a; background: rgba(0, 0, 0, 0.31); }
.rk-no {
flex: 0 0 24px; width: 24px; height: 24px; line-height: 24px; text-align: center;
font-size: 12px; font-weight: 700; color: #bfe6ff; border-radius: 50%;
background: var(--p1); border: 1px solid var(--p2);
}
.rk-no.rk-1 { color: var(--accent); background: #4a3410; border-color: #e0b45a; }
.rk-no.rk-2 { color: #dfe6ee; background: var(--p1); border-color: #8aa2b6; }
.rk-no.rk-3 { color: #d09a6a; background: #3a2a1c; border-color: #b57e4e; }
.rk-av {
flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
font-size: 20px; border-radius: 6px; overflow: hidden;
background: rgba(0, 0, 0, 0.43); border: 1px solid var(--p2);
}
.rk-av .av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rk-info b { font-size: 13px; color: #eaf6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-sub { font-size: 10px; color: #7fa7ba; }
.rk-val { flex: 0 0 auto; font-size: 12px; color: var(--accent); text-align: right; }
.rk-go { flex: 0 0 14px; font-size: 14px; color: #7ee0ff; text-align: right; }
/* ================= 聊天行：头像与文字对齐优化 ================= */
.chat-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.chat-row .cr-time { flex: 0 0 auto; font-size: 11px; color: var(--text-sub); }
.chat-row .cr-body { flex: 1; min-width: 0; line-height: 1.55; word-break: break-all; }
.chat-row .ch-av {
flex: 0 0 22px; width: 22px; height: 22px; margin: 0;
border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.chat-row .chat-nm { margin-right: 2px; }
/* ================= 住宅系统 ================= */
.house-intro {
margin-top: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.7; color: #ffe9a8;
background: rgba(60, 44, 12, .45); border: 1px solid #8a6a2a; border-radius: 6px;
}
.house-tabs { display: flex; align-items: center; gap: 5px; margin: 8px 0; flex-wrap: wrap; }
.house-tabs button {
padding: 4px 12px; font-size: 12px; color: #bfe6ff; cursor: pointer;
background: var(--p1); border: 1px solid var(--p2); border-radius: 5px;
}
.house-tabs button.on { background: linear-gradient(#c8963c, #a07020); border-color: #ffcf7a; color: var(--text); font-weight: 700; }
.house-tabs button.mini { padding: 3px 9px; font-size: 11px; }
.ht-sep { flex: 0 0 6px; }
.house-row {
display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 6px;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px;
}
.house-row.mine { border-color: #2f6b4a; background: rgba(0, 0, 0, 0.25); }
.house-row.main { border-color: #c8963c; }
.hs-badge {
flex: 0 0 auto; padding: 2px 7px; font-size: 11px; border-radius: 4px;
color: #bfe6ff; background: var(--p2); border: 1px solid var(--p3);
}
.hs-badge.min { color: #9fd6a0; background: #17402c; border-color: #2f8a5a; }
.hs-badge.hao { color: var(--accent); background: #4a3410; border-color: #c8963c; }
.hs-badge.guan { color: #ff9ab5; background: #4a1e2a; border-color: #b23a5e; }
.hs-badge.big { font-size: 15px; padding: 6px 10px; border-radius: 6px; }
.hs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hs-info b { font-size: 13px; color: #eaf6fb; }
.hs-info i { font-style: normal; font-size: 10.5px; color: #7fa7ba; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-main-tag {
margin-left: 5px; padding: 0 5px; font-size: 10px; color: var(--accent);
background: #4a3410; border: 1px solid #c8963c; border-radius: 8px;
}
.hs-right { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.hs-price { font-size: 11px; color: var(--accent); }
.hs-sold { font-size: 11px; color: var(--text-sub); }
.hs-sold.ok { color: #7ef29a; }
.house-row button {
padding: 3px 10px; font-size: 11px; color: var(--text); cursor: pointer;
background: linear-gradient(#1e6a4a, #14472f); border: 1px solid #3fae7a; border-radius: 4px;
}
.house-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 4px; }
.house-foot button {
padding: 6px 16px; font-size: 12px; color: var(--text); cursor: pointer;
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a; border-radius: 5px;
}
.house-bonus {
display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 7px 10px;
background: rgba(0, 0, 0, 0.34); border: 1px solid var(--p2); border-radius: 6px; font-size: 12px;
}
.house-bonus b { flex: 0 0 auto; color: var(--accent); }
.house-bonus span { color: #bfe3d8; word-break: break-all; }
.house-tip { margin: 8px 2px; font-size: 11px; line-height: 1.7; color: #7fa7ba; }
.house-hero { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px; border-radius: 8px; background: linear-gradient(135deg, var(--p1), var(--p1)); border: 1px solid var(--p2); }
.hh-main { flex: 1; min-width: 0; }
.hh-name { font-size: 16px; color: var(--accent); font-weight: 700; }
.house-furn { margin-top: 2px; }
.hf-row {
display: flex; align-items: center; gap: 8px; padding: 8px 9px; margin-bottom: 6px;
background: rgba(0, 0, 0, 0.31); border: 1px solid var(--p2); border-radius: 6px;
}
.hf-ico { flex: 0 0 auto; font-size: 24px; }
.house-ops { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.house-ops button {
flex: 1; min-width: 40%; padding: 8px 0; font-size: 12px; color: #d8ffe8; cursor: pointer;
background: linear-gradient(#1e6a4a, #14472f); border: 1px solid #3fae7a; border-radius: 5px;
}
.house-ops button:disabled { filter: grayscale(.6); opacity: .6; }
/* 帮派排行表头与列 */
.gang-rank-head {
display: flex; align-items: center; gap: 8px; padding: 4px 9px 6px;
font-size: 10px; color: var(--text-sub);
}
.gang-rank-head .gh2 { flex: 1; }
.gang-rank-head span { width: 40px; text-align: right; }
.gang-rank-head span:first-child { width: 24px; text-align: center; }
.gang-rank-row .gr-no { width: 24px; height: 24px; line-height: 24px; border-radius: 50%; flex: 0 0 24px; font-size: 12px; font-weight: 700; text-align: center; color: #bfe6ff; background: var(--p1); border: 1px solid var(--p2); }
.gang-rank-row .gr-no.rk-1 { color: var(--accent); background: #4a3410; border-color: #e0b45a; }
.gang-rank-row .gr-no.rk-2 { color: #dfe6ee; background: var(--p1); border-color: #8aa2b6; }
.gang-rank-row .gr-no.rk-3 { color: #d09a6a; background: #3a2a1c; border-color: #b57e4e; }
.gang-rank-row.mine { border-color: #2f6b4a; background: rgba(0, 0, 0, 0.28); }
.gr-cell { flex: 0 0 40px; text-align: right; font-size: 11px; color: #bfe6ff; }
.gr-cell.funds { color: var(--accent); }
/* 聊天帮派标签 */
.chat-row .tag.gang { background: #2f8a64; }
/* 背包更紧凑 */
.bag-row { padding: 5px 8px; gap: 7px; }
.bico { width: 38px; height: 38px; }
.bname { font-size: 12.5px; }
.bdesc { font-size: 10.5px; line-height: 1.4; }
.bbtns { gap: 3px; }
.bbtns button { padding: 3px 7px; font-size: 10.5px; }
.bag-cur { margin: 6px 12px; }
/* 组队（好友页队伍页签） */
.tm-ops { flex: 0 0 auto; display: flex; gap: 4px; }
.tm-ops button {
padding: 3px 9px; font-size: 11px; color: var(--text); cursor: pointer;
background: linear-gradient(#1e6a4a, #14472f); border: 1px solid #3fae7a; border-radius: 4px;
}
.tm-ops button.danger { background: #5a2a3a; border-color: #b23a5e; }
.team-ops { display: flex; gap: 8px; justify-content: center; padding: 12px 0 4px; flex-wrap: wrap; }
.team-ops button {
padding: 6px 18px; font-size: 12px; color: #bfe6ff; cursor: pointer;
background: var(--p2); border: 1px solid var(--p3); border-radius: 5px;
}
/* GM 属性修改器 */
.gm-form.col { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gm-form.col label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #bfe6ff; }
.gm-form.col input {
flex: 1; min-width: 0; padding: 7px 9px; font-size: 13px; color: #dff2ff;
background: var(--p1); border: 1px solid var(--p2); border-radius: 5px;
}
/* ================= 挂机双进度条 ================= */
.home-bar { display: flex; align-items: center; gap: 8px; margin: 2px 14px 0; }
.home-bar .hb-lab { flex: 0 0 30px; font-size: 11px; color: #7fa7ba; }
.home-bar .home-expbar { flex: 1; margin: 0; }
.home-bar .hb-pct { flex: 0 0 34px; font-size: 10px; color: #8fb6c8; text-align: right; }
.home-bar .home-expbar.xw i { background: linear-gradient(90deg, #8a5a1f, var(--accent)); }
/* ================= NPC 面板合并 ================= */
.npc-card {
border: 1px solid var(--p2); border-radius: 10px;
background: linear-gradient(var(--p1), var(--p1)); overflow: hidden;
}
.npc-card .npc-head { display: flex; align-items: center; gap: 12px; padding: 12px; }
.npc-card .npc-say {
margin: 0 12px 12px; padding: 9px 11px; font-size: 13px; line-height: 1.7; color: #dff2ff;
background: rgba(0, 0, 0, 0.34); border: 1px solid var(--p2); border-radius: 8px;
}
.npc-page .npc-acts { margin-top: 10px; }
/* ================= 人物面板双列 ================= */
.hero-stats { display: flex; }
.hero-stats .hs-col { flex: 1; min-width: 0; }
.hero-stats .hs-col + .hs-col { border-left: 1px solid rgba(var(--panel-rgb), .8); }
.hero-stats .hs-col .stat-item { width: 100%; flex: none; border-left: 0; border-bottom: 1px solid rgba(var(--panel-rgb), .6); }
.hero-stats .hs-col .stat-item:last-child { border-bottom: 0; }
.hero-stats .stat-row-full { border-top: 1px solid rgba(var(--panel-rgb), .8); }
/* ================= 战斗：技能按钮变小 + 药品快捷键 ================= */
.dun-manual button { padding: 6px 12px; font-size: 12px; min-width: 70px; }
.dun-manual .sk-fight-btn em { font-size: 9px; color: #ffcf7a; font-weight: 400; }
.fight-quick { display: flex; gap: 6px; width: 100%; justify-content: center; margin-top: 4px; }
.fq-slot {
flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 64px; padding: 6px 8px; font-size: 11px; color: #eaf6fb; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 6px;
}
.fq-slot.empty { color: #7fa7ba; border-style: dashed; }
.fq-ico { font-size: 18px; line-height: 1; }
.fq-nm { font-size: 10px; color: #bfe6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
.fq-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.fq-pick button {
padding: 9px 4px; font-size: 12px; color: #eaf6fb; cursor: pointer;
background: var(--p2); border: 1px solid var(--p3); border-radius: 5px;
}
/* 人物面板：双列 + 境界/经验整行（允许下拉，不再挤压到右侧） */
.hero-stats { flex-wrap: wrap; }
.hero-stats .stat-row-full { flex-basis: 100%; width: 100%; }
/* 物品详情页 */
.idetail { padding: 4px 2px; }
.idt-ico {
width: 76px; height: 76px; margin: 6px auto 8px; display: flex; align-items: center; justify-content: center;
font-size: 44px; border-radius: 10px; background: rgba(0, 0, 0, 0.43); border: 1px solid var(--p2); overflow: hidden;
}
.idt-ico img { width: 100%; height: 100%; object-fit: cover; }
.idt-name { text-align: center; font-size: 17px; font-weight: 700; }
.idt-q { margin-left: 6px; font-size: 11px; color: #8fb6c8; font-weight: 400; }
.idt-desc { margin: 8px 6px; font-size: 12px; line-height: 1.7; color: #bfe3d8; text-align: center; }
.idt-eff { margin: 4px 6px; padding: 8px 10px; font-size: 12px; color: #ffe9a8; text-align: center; background: rgba(60, 44, 12, .4); border: 1px solid #8a6a2a; border-radius: 6px; }
.idt-attrs { margin: 6px 6px; text-align: center; font-size: 12px; color: #eaf6fb; }
.idt-price { text-align: center; font-size: 12px; color: var(--accent); margin: 4px 0 10px; }
.idt-ops { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.idt-ops button {
padding: 8px 20px; font-size: 13px; color: var(--text); cursor: pointer;
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a; border-radius: 6px;
}
.idt-none { font-size: 12px; color: #7fa7ba; }
.idt-back { text-align: center; padding-bottom: 8px; }
.idt-back button { padding: 6px 24px; font-size: 12px; color: #bfe6ff; cursor: pointer; background: var(--p2); border: 1px solid var(--p3); border-radius: 5px; }
/* 卖出栏：全选本页 */
.sb-all { background: #1e6a4a; border: 1px solid #3fae7a; color: #d8ffe8; }
/* 顶部 HUD 货币小字标签 */
.res-lab { font-style: normal; font-size: 9px; color: #7fa7ba; margin-right: 2px; }
/* GM 属性修改器说明 */
.gm-attr-tip { font-size: 11px; line-height: 1.8; color: #8fb6c8; }
/* 卖出分页/操作条：内联到列表下方（与包裹翻页一致） */
.sell-bar-inline { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.sell-bar-inline button {
padding: 5px 12px; font-size: 12px; color: #bfe6ff; cursor: pointer;
background: var(--p2); border: 1px solid var(--p3); border-radius: 4px;
}
.sell-bar-inline button:disabled { opacity: .5; }
.sell-bar-inline .sb-all { background: #1e6a4a; border-color: #3fae7a; color: #d8ffe8; }
.sell-bar-inline .sb-batch { background: linear-gradient(#c8963c, #a07020); border-color: #ffcf7a; color: var(--text); font-weight: 700; }
/* 场景顶栏：GM 宝箱与修改并排靠右 */
.scene-head .head-gm { margin-left: 0; }
.scene-head [data-act="gm-box-open"] { margin-left: auto; }
.scene-head [data-act="gm-stat-open"] { margin-left: 6px; }
/* 人物装备环：装备槽占满两侧栏宽 */
.hero-eq-layout { grid-template-columns: 1fr auto 1fr; }
.hero-eq-col { align-items: stretch; }
.hero-eq-col .hero-slot { width: 100%; height: 56px; }
.hero-eq-col .hero-slot .hs-img { max-width: 90%; }
/* ================= 帮派：去科技感，扁平纯色 ================= */
.gang-hero { background: var(--p1); border: 1px solid var(--p2); border-radius: 6px; }
.gang-stats .gs { background: var(--p1); border-color: var(--p2); border-radius: 4px; }
.gang-rule { background: var(--p1); border-color: var(--p2); border-radius: 4px; }
.gang-nav button { background: var(--p2); border-color: var(--p2); border-radius: 4px; }
.gang-nav button.on { background: #c8963c; border-color: #c8963c; color: var(--text); }
.gang-daily button { background: #2f8a64; border-color: #2f8a64; color: var(--text); border-radius: 4px; box-shadow: none; }
.gang-daily button:disabled { background: var(--p2); border-color: var(--p2); color: #7fa7ba; }
.gang-roles .gr { background: var(--p1); border-color: var(--p2); border-radius: 4px; }
.gang-mem { background: var(--p1); border-color: var(--p2); border-radius: 4px; }
.gang-rank-row { background: var(--p1); border-color: var(--p2); border-radius: 4px; }
.gang-quit-row button { background: #7a3a5a; border-color: #a05078; color: var(--text); border-radius: 4px; }
.gang-chat .gc-list { background: var(--p1); border-color: var(--p2); }
.gh-role { background: #17402c; border-color: #2f8a5a; color: #9fd6a0; border-radius: 4px; }
.gang-rule .mini-btn { background: var(--p2); border-color: var(--p3); }
.gang-tag { background: #c8963c; border-color: #ffcf7a; color: var(--text); }
/* 人物装备环：槽位固定图标尺寸，两列向中间靠拢（围绕人物居中） */
.hero-eq-layout { grid-template-columns: auto auto auto; justify-content: center; gap: 26px; }
.hero-eq-col { align-items: center; }
.hero-eq-col .hero-slot { width: 60px; height: 60px; }
.hero-eq-col .hero-slot .hs-img { max-width: 52px; max-height: 38px; }
/* ================= 战斗页：紧凑居中布局 ================= */
.fight-unit { display: flex; flex-direction: column; gap: 4px; margin: 6px 12px; padding: 6px 9px; border-radius: 6px; }
.fu-top { display: flex; align-items: center; gap: 8px; }
.fu-ico { width: 38px; height: 38px; font-size: 22px; border-radius: 6px; }
.fu-name { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; }
.fu-bars { width: 100%; }
.fbar { margin-top: 3px; height: 13px; }
.fbar.mp { height: 11px; }
.fight-tip { font-size: 12px; padding: 6px 10px; margin: 6px 12px; }
/* ================= 帮派：暖色木质风 ================= */
.gang-hero { background: linear-gradient(#3a2c1e, #2a2015); border: 1px solid #7a5a34; }
.gh-name { color: #ffd88a; }
.gh-lv { background: #4a3410; border-color: #8a6a2a; color: #ffe9a8; }
.gh-sub { color: #b9a58a; }
.gh-role { background: #233a26; border-color: #3f6b45; color: #a8e0b0; }
.gang-stats .gs { background: #2a2015; border-color: #5a452c; }
.gang-stats i { color: #b9a58a; }
.gang-rule { background: #2a2015; border-color: #5a452c; color: #e0d3bd; }
.gang-rule b { color: #ffd88a; }
.gang-rule .mini-btn { background: #4a3410; border-color: #8a6a2a; color: #ffe9a8; }
.gang-nav { gap: 4px; border-bottom: 1px solid #5a452c; }
.gang-nav button { background: transparent; border: 0; border-radius: 0; color: #b9a58a; padding: 7px 0; border-bottom: 2px solid transparent; }
.gang-nav button.on { background: transparent; color: #ffd88a; border-bottom-color: #e0b45a; font-weight: 700; }
.gang-daily { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gang-daily button { background: #6b4a2a; border: 1px solid #9a7040; color: #ffe9c4; border-radius: 4px; padding: 8px 0; }
.gang-daily button:nth-child(2) { background: #3f6b45; border-color: #5f8f65; }
.gang-daily button:disabled { background: #3a3a3a; border-color: #555; color: #888; }
.gang-roles { gap: 4px; }
.gang-roles .gr { background: #2a2015; border-color: #5a452c; border-radius: 4px; }
.gang-roles i { color: #b9a58a; }
.gang-roles b { color: #ffe9c4; }
.gang-mem { background: #2a2015; border-color: #5a452c; border-radius: 4px; padding: 6px 8px; }
.gm-role { background: #4a3410; border-color: #8a6a2a; color: #ffe9a8; }
.gm-role.leader { background: #7a2a2a; border-color: #b34a4a; color: #ffd0d0; }
.gm-role.office { background: #233a26; border-color: #3f6b45; color: #a8e0b0; }
.gm-name { color: #f0e6d6; }
.gm-contrib { color: #d8c090; }
.gang-chat .gc-list { background: #221a12; border-color: #5a452c; }
.gang-quit-row button { background: #5a2f2f; border-color: #8a4a4a; }
.gang-chat { margin-top: 4px; }
/* ================= 好友列表：紧凑排行风 ================= */
.fr-list { padding: 0 2px; }
.fr-row {
display: flex; align-items: center; gap: 8px; padding: 6px 9px; margin-bottom: 0;
background: transparent; border: 0; border-bottom: 1px solid rgba(var(--panel-rgb), .45); border-radius: 0;
}
.fr-row:active { background: rgba(var(--panel-rgb), .12); }
.fr-row .fr-idx { flex: 0 0 18px; width: 18px; color: #7fa7ba; font-size: 11px; text-align: center; }
.fr-row .fr-ico { flex: 0 0 30px; width: 30px; height: 30px; font-size: 18px; border-radius: 5px; }
.fr-row .fr-ico .av-img { width: 100%; height: 100%; object-fit: cover; }
.fr-row .fr-nm { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-row .fr-race { flex: 0 0 auto; font-size: 10.5px; color: #8fb6c8; }
.fr-list .fr-row:last-child { border-bottom: 0; }
/* 帮派按钮暖色化 */
.gang-big { background: #6b4a2a; border: 1px solid #9a7040; color: #ffe9c4; border-radius: 4px; }
.gang-big.gold { background: #8a5a1f; border-color: #c8963c; color: #ffe9a8; }
/* ================= 战斗卡：居中头像 + 头顶飘字 ================= */
.fight-unit { align-items: center; text-align: center; padding: 8px 10px 7px; margin: 6px 12px; }
.fu-avwrap { position: relative; display: flex; align-items: center; justify-content: center; }
.fu-ico { width: 56px; height: 56px; font-size: 32px; }
.fu-name { justify-content: center; margin: 3px 0 4px; font-size: 13px; }
.fu-bars { width: 100%; }
.fu-float { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 90px; height: 0; pointer-events: none; }
.fu-float .ff {
position: absolute; left: 50%; top: 0; transform: translateX(-50%);
font-size: 15px; font-weight: 700; color: #ff5a5a; text-shadow: 0 1px 3px rgba(0,0,0,.9);
white-space: nowrap; animation: ffUp 1.15s ease-out forwards;
}
.fu-float .ff.crit { font-size: 18px; color: #ffd23a; }
.fu-float .ff.heal { color: #6ef2a0; }
@keyframes ffUp {
0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); }
25% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}
/* ================= 帮派列表（参考图样式） ================= */
.gl-list { margin-top: 6px; }
.gl-row {
display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px;
background: var(--p1); border: 1px solid var(--p2); border-radius: 3px;
}
.gl-no { flex: 0 0 16px; text-align: center; font-size: 11px; color: #a8c8d8; }
.gl-tag {
flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 700; color: var(--text); background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
}
.gl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-main b { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-main i { font-style: normal; font-size: 10.5px; color: #b9d4e0; margin-top: 1px; }
.gl-count { flex: 0 0 auto; font-size: 11px; color: #b9d4e0; }
.gl-join {
flex: 0 0 auto; padding: 4px 10px; font-size: 11px; color: var(--text); cursor: pointer;
background: var(--p2); border: 1px solid var(--p3); border-radius: 3px;
}
.gl-mine { flex: 0 0 auto; font-size: 11px; color: #7ef29a; }
.gl-pagebar { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.gl-pagebar button, .gl-pagebar input {
height: 24px; min-width: 30px; padding: 0 8px; font-size: 12px; text-align: center;
color: #7a2a2a; background: #f09a94; border: 1px solid #c86a62; border-radius: 3px;
}
.gl-pagebar input { width: 46px; color: #eaf6fb; background: var(--p1); border-color: var(--p3); }
/* ================= 战斗药品快捷栏：与技能按钮同尺寸，单行显示 ================= */
.fight-quick { display: flex; gap: 6px; width: 100%; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.fq-slot {
display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px;
min-width: 70px; height: 30px; padding: 0 10px; font-size: 12px; color: #eaf6fb; cursor: pointer;
background: var(--p3); border: 1px solid #57a0c8; border-radius: 6px; box-sizing: border-box;
}
.fq-slot.empty { color: #9fc6d8; border: 1px dashed #57a0c8; background: var(--p2); font-size: 11px; }
.fq-slot .fq-ico { font-size: 14px; line-height: 1; }
.fq-slot .fq-nm { font-size: 12px; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ================= 药品设置页（列表 + 搜索） ================= */
.qp-tip { margin: 6px 2px 8px; font-size: 11px; line-height: 1.6; color: #8fb6c8; }
.qp-list { border-top: 1px solid rgba(var(--panel-rgb), .5); }
.qp-row {
display: flex; align-items: center; gap: 6px; padding: 6px 4px;
border-bottom: 1px solid rgba(var(--panel-rgb), .35); font-size: 12.5px;
}
.qp-ico { flex: 0 0 auto; font-size: 15px; }
.qp-name { flex: 1; min-width: 0; color: #7fd6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-num { flex: 0 0 auto; font-size: 11px; color: #9fc6d8; }
.qp-num .bind { color: #ff9ab5; }
.qp-row button {
flex: 0 0 auto; padding: 2px 8px; font-size: 11px; color: #d8f0ff; cursor: pointer;
background: var(--p2); border: 1px solid var(--p3); border-radius: 3px;
}
.qp-search { display: flex; gap: 6px; margin: 10px 0 6px; }
.qp-search input {
flex: 1; min-width: 0; height: 30px; padding: 0 9px; font-size: 12px; color: #dff2ff;
background: var(--p1); border: 1px solid var(--p2); border-radius: 5px;
}
.qp-search button {
flex: 0 0 auto; padding: 0 14px; font-size: 12px; color: var(--text); cursor: pointer;
background: var(--p3); border: 1px solid #57a0c8; border-radius: 5px;
}
.qp-back { padding: 6px 0 10px; }
.qp-back button {
padding: 3px 0; font-size: 12px; color: #7fd6ff; cursor: pointer;
background: transparent; border: 0;
}
/* ================= 帮派：贴合页面风格（去卡片背景，参考人物页扁平表格） ================= */
.gang-hero {
display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 10px 2px;
background: transparent; border: 0; border-bottom: 1px solid rgba(var(--panel-rgb), .7); border-radius: 0;
}
.gang-hero.empty { padding: 18px 6px; }
.gang-tag, .gang-tag.big {
flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 700; color: #eaf6fb; background: var(--p1);
border: 1px solid var(--p3); border-radius: 4px;
}
.gh-name { color: var(--accent); }
.gh-lv { background: var(--p1); border-color: var(--p3); color: #cfe8f5; }
.gh-sub { color: #9fc6d8; }
.gh-role { background: transparent; border: 1px solid #2f8a64; color: #7ef29a; border-radius: 3px; }
/* 数据行：左标签金色、右数值白色，两列紧凑 */
.gang-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin: 4px 0 0; }
.gang-stats .gs {
display: flex; align-items: center; justify-content: space-between; padding: 6px 0;
background: transparent; border: 0; border-bottom: 1px solid rgba(var(--panel-rgb), .45); border-radius: 0;
}
.gang-stats i { display: inline; margin: 0; font-size: 12px; color: var(--accent); }
.gang-stats b { font-size: 12.5px; color: #eaf6fb; font-weight: 600; }
.gang-rule {
margin: 4px 0 0; padding: 6px 0; background: transparent; border: 0;
border-bottom: 1px solid rgba(var(--panel-rgb), .45); border-radius: 0;
}
.gang-rule b { color: var(--accent); font-size: 12px; }
.gang-rule span { color: #c9dfe9; font-size: 12px; }
.gang-rule .mini-btn { background: var(--p1); border: 1px solid var(--p3); color: #cfe8f5; }
/* 页签与按钮：扁平蓝底描边（参考人物页「更新/玩家信息/改名」） */
.gang-nav { display: flex; gap: 6px; margin: 10px 0 8px; border: 0; }
.gang-nav button {
flex: 1; padding: 6px 0; font-size: 12px; color: #cfe8f5; cursor: pointer; border-radius: 4px;
background: var(--p1); border: 1px solid var(--p3);
}
.gang-nav button.on { background: var(--p3); border-color: #7ec8e0; color: var(--text); font-weight: 700; }
.gang-daily { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.gang-daily button {
padding: 7px 0; font-size: 12px; color: #eaf6fb; cursor: pointer; border-radius: 4px;
background: var(--p1); border: 1px solid var(--p3);
}
.gang-daily button:disabled { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* 职位 / 成员：两列或行式扁平列表 */
.gang-roles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.gang-roles .gr {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
padding: 6px 0; background: transparent; border: 0;
border-bottom: 1px solid rgba(var(--panel-rgb), .45); border-radius: 0;
}
.gang-roles i { color: var(--accent); font-size: 12px; }
.gang-roles b { color: #eaf6fb; font-size: 12px; font-weight: 600; }
.gang-mem {
display: flex; align-items: center; gap: 7px; padding: 6px 0; margin: 0;
background: transparent; border: 0; border-bottom: 1px solid rgba(var(--panel-rgb), .45); border-radius: 0;
}
.gm-role { background: var(--p1); border: 1px solid var(--p3); color: #cfe8f5; border-radius: 3px; }
.gm-role.leader { background: #5a3a10; border-color: #c8963c; color: var(--accent); }
.gm-role.office { background: #1c4a3a; border-color: #2f8a64; color: #8ff2c0; }
.gm-name { color: #eaf6fb; }
.gm-contrib { color: #9fd6a0; }
.gang-rule .mini-btn, .gang-more { color: #7fd6ff; }
.gang-quit-row { padding: 12px 0 4px; }
.gang-quit-row button { background: transparent; border: 1px solid #a05078; color: #ff9ab5; }
/* ================= 战斗：去卡片背景 + 血条收窄 ================= */
.fight-unit {
background: transparent; border: 0; border-radius: 0;
padding: 4px 10px; margin: 4px 12px;
}
.fight-unit.mon-unit, .fight-unit.me-unit { background: transparent; border: 0; }
.fu-bars { width: 100%; max-width: 220px; margin: 0 auto; }
.fbar { height: 12px; margin-top: 3px; }
.fbar.mp { height: 10px; }
.fbar span { font-size: 9px; line-height: 10px; }
.fbar.mp span { line-height: 8px; }
/* 帮派主按钮：统一扁平蓝底描边（参考人物页按钮） */
.gang-big, .gang-big.gold {
background: var(--p1); border: 1px solid var(--p3); color: #d8f0ff; border-radius: 4px;
}
.gang-big:active, .gang-big.gold:active { background: var(--p3); }
/* ================= 药品设置：行左对齐 + 详情可点 ================= */
.qp-row { justify-content: flex-start; gap: 6px; }
.qp-item { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; cursor: pointer; }
.qp-item:active { opacity: .8; }
.qp-name { flex: 0 0 auto; }
.qp-num { flex: 0 0 auto; margin-left: 2px; }
.qp-row button { margin-left: 4px; }
.qp-grow { flex: 1 1 auto; }
/* ================= 战斗：提示条去背景居中 ================= */
.fight-tip {
background: transparent; border: 0; text-align: center;
color: #9fc6d8; font-size: 12.5px; padding: 4px 10px; margin: 4px 12px;
}
/* ================= 战斗按钮统一尺寸、字大一点 ================= */
.dun-manual { gap: 8px; }
.dun-manual button, .fq-slot {
flex: 0 0 auto; width: 88px; height: 34px; min-width: 0;
padding: 0 6px; font-size: 13px; box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.fq-slot .fq-nm { font-size: 12.5px; max-width: 58px; }
.fq-slot.empty { font-size: 12px; }
/* ================= 场景页排版统一 ================= */
.home-chat { background: transparent; border: 0; padding: 2px 0 6px; }
.home-chat .hc-line { font-size: 12.5px; line-height: 1.9; }
.scene-desc-line { font-size: 13px; line-height: 1.8; padding: 6px 2px; color: #c9dfe9; }
.scene-head-name { font-size: 16px; }
.exit-row { padding: 5px 2px; font-size: 13px; }
.exit-row .exit-dir { font-size: 13px; color: #8fb6c8; }
.exit-row .exit-name { font-size: 13.5px; color: #eaf6fb; }
.exit-row .exit-go { font-size: 12px; }
.scene-row { padding: 5px 0; gap: 7px; }
.scene-row .sr-info b { font-size: 13px; }
.scene-row .sr-label { font-size: 12px; }
.map-players { font-size: 13px; padding: 6px 2px; }
.map-players .mp-label { font-size: 13px; color: #8fb6c8; }
.scene-btns button, .scene-btns a { font-size: 12.5px; }
/* ================= 技能按钮图标 ================= */
.dun-manual button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.skb-ico {
width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain;
display: inline-block; font-size: 14px; line-height: 1;
}
/* ================= 战斗区域居中 ================= */
.fight-unit { width: 100%; max-width: 360px; margin: 6px auto; }
.fight-tip { max-width: 360px; margin: 4px auto; }
/* ================= NPC 页：返回场景紧跟内容 ================= */
.subpage.npc-mode #sub-body { flex: 0 0 auto; }
.subpage.npc-mode .sub-foot { margin-top: 12px; }
/* ================= 人物：境界/经验行与两列对齐 ================= */
.hero-stats .stat-row-2 { display: flex; width: 100%; flex-basis: 100%; border-top: 1px solid rgba(var(--panel-rgb), .8); }
.hero-stats .stat-row-2 .stat-item { flex: 1; min-width: 0; border-left: 0; }
.hero-stats .stat-row-2 .stat-item + .stat-item { border-left: 1px solid rgba(var(--panel-rgb), .8); }
/* ================= 装备槽：只显示图片 ================= */
.hero-eq-col .hero-slot { width: 54px; height: 54px; }
.hero-slot .hs-nm { display: none; }
.hero-slot { padding: 2px; }
.hero-slot .hs-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hero-slot .hs-ico.empty { color: #7ef29a; font-size: 26px; font-weight: 700; }
/* ================= 装备详情浮层 ================= */
.eqd { padding: 2px 2px 0; }
.eqd-top { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px 6px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); }
.eqd-ico {
flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
font-size: 30px; background: rgba(0, 0, 0, 0.37); border: 1px solid var(--p2); border-radius: 6px; overflow: hidden;
}
.eqd-ico img { width: 100%; height: 100%; object-fit: contain; }
.eqd-meta { flex: 1; min-width: 0; font-size: 13px; line-height: 1.9; color: #dff2ff; }
.eqd-attrs { padding: 8px 4px; font-size: 12.5px; line-height: 1.9; color: #cfe8f2; }
.eqd-attrs i { font-style: normal; color: var(--accent); }
.eqd-btns { display: flex; gap: 6px; padding: 8px 2px 2px; }
.eqd-btns button {
flex: 1; padding: 8px 0; font-size: 13px; color: #eaf6fb; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
}
.eqd-btns button:active { background: var(--p3); }
/* ================= 装备选择浮层（法宝·装备选择） ================= */
.eqpick { padding: 2px; }
.eqpick-tt { text-align: center; font-size: 14px; color: var(--accent); padding: 4px 0 8px; }
.eqpick-cur {
padding: 8px 10px; margin-bottom: 8px; font-size: 12px; border-radius: 5px;
background: var(--p1); border: 1px solid var(--p3); color: #cfe8f2;
}
.eqpick-cur b { display: block; color: var(--accent); font-size: 12px; margin-bottom: 2px; font-weight: 600; }
.eqpick-row {
display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 6px;
background: var(--p1); border: 1px solid var(--p3); border-radius: 5px;
}
.ep-ico {
flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
font-size: 20px; background: rgba(0, 0, 0, 0.37); border: 1px solid var(--p2); border-radius: 4px; overflow: hidden;
}
.ep-ico img { width: 100%; height: 100%; object-fit: contain; }
.ep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ep-main b { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.ep-main b i { font-style: normal; font-size: 11px; }
.ep-main .sub { font-size: 10.5px; color: #9fc6d8; }
.ep-wear {
flex: 0 0 auto; padding: 4px 12px; font-size: 12px; color: var(--text); cursor: pointer;
background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 4px;
}
.eqpick-close { text-align: center; padding: 10px 0 2px; font-size: 13px; color: #9fc6d8; cursor: pointer; }
/* ================= 场景：查看地图传送入口 + 文字地图页 ================= */
.scene-map-link {
padding: 6px 2px; font-size: 13px; color: #7fd6ff; cursor: pointer;
border-bottom: 1px solid rgba(var(--panel-rgb), .45);
}
.scene-map-link:active { opacity: .8; }
.smap-tip { margin: 6px 2px 8px; font-size: 11px; color: #8fb6c8; }
.smap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.smap-node {
padding: 8px 4px; font-size: 12.5px; color: #d8f0ff; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
}
.smap-node.on { background: #c8963c; border-color: #ffcf7a; color: var(--text); font-weight: 700; }
.smap-cur { margin-top: 12px; font-size: 12.5px; color: #9fc6d8; }
.home-chat .hc-nm[data-act] { cursor: pointer; }
.home-chat .hc-nm[data-act]:active { text-decoration: underline; }
/* ================= NPC：描述去掉框 ================= */
.npc-card .npc-say {
margin: 0 2px 8px; padding: 4px 0 2px; background: transparent; border: 0;
font-size: 13px; line-height: 1.7; color: #cfe8f2;
}
/* ================= 装备详情：紧凑 ================= */
.eqd.compact { padding: 0; }
.eqd.compact .eqd-top { gap: 8px; padding: 4px 0 6px; }
.eqd.compact .eqd-ico { flex: 0 0 46px; width: 46px; height: 46px; font-size: 24px; }
.eqd.compact .eqd-meta { font-size: 12.5px; line-height: 1.75; }
.eqd.compact .eqd-attrs { padding: 6px 0; font-size: 12px; line-height: 1.75; }
.eqd.compact .eqd-btns { padding: 6px 0 0; }
.eqd.compact .eqd-btns button { padding: 7px 0; font-size: 12.5px; }
.ep-main { cursor: pointer; }
/* ================= 场景地图入口右移 + 方位地图 ================= */
.scene-map-link { padding-left: 70px; }
.smap3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.sm-cell { display: flex; }
.sm-node {
flex: 1; padding: 7px 4px; font-size: 12px; color: #d8f0ff; cursor: pointer; text-align: center;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
}
.sm-node i { font-style: normal; color: #9fc6d8; margin-right: 3px; font-size: 11px; }
.sm-node.cur { background: #c8963c; border-color: #ffcf7a; color: var(--text); font-weight: 700; cursor: default; }
.sm-node.off { color: var(--p3); border-style: dashed; background: transparent; cursor: default; }
/* ================= 背包已穿戴标记 ================= */
.b-worn {
display: inline-flex; align-items: center; padding: 3px 8px; font-size: 11px; border-radius: 4px;
color: #9fd6a0; background: #1c4a3a; border: 1px solid #2f8a64; cursor: pointer;
}
.idt-worn { display: block; width: 100%; text-align: center; font-size: 12px; color: #9fd6a0; margin-bottom: 8px; }
/* 装备选择行整行可点 */
.eqpick-row { cursor: pointer; }
.eqpick-row:active { background: var(--p2); }
/* 场景「查看地图传送」与出口/NPC 左对齐 */
.scene-map-link { padding-left: 2px; }
/* 挂机页玩法说明 */
.home-help {
margin: 10px 12px 4px; padding: 8px 10px; border-radius: 6px;
background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(var(--panel-rgb), .55);
}
.home-help .hh-tt { font-size: 12.5px; color: var(--accent); margin-bottom: 4px; text-align: center; }
.home-help .hh-line { font-size: 11.5px; line-height: 1.75; color: #9fc6d8; }
/* 装备详情三按钮 */
.eqd-btns button { min-width: 0; }
/* 「查看地图传送」与出口行/NPC 行左对齐（行内左内边距 14px） */
.scene-map-link { padding-left: 16px; }
/* 微调：「查看地图传送」与出口/NPC 文字精确对齐 */
.scene-map-link { margin-left: 14px; padding-left: 2px; }
/* 二级页：返回场景紧跟内容（消除大段空白） */
.subpage #sub-body { flex: 0 1 auto; }
.subpage .sub-foot { margin-top: 12px; }
/* 聊天页：标题 + 发言框位置 */
.chat-top { display: flex; align-items: center; gap: 8px; }
.chat-tt { flex: 1; text-align: center; font-size: 15px; color: var(--accent); letter-spacing: 2px; }
.chat-channels { margin-top: 6px; }
.chat-send { margin: 8px 10px 6px; }
/* 装备详情再紧凑 */
.eqd-top { padding: 4px 2px 5px; }
.eqd-ico { flex: 0 0 44px; width: 44px; height: 44px; font-size: 24px; }
.eqd-meta { font-size: 12px; line-height: 1.65; }
.eqd-attrs { padding: 6px 2px; font-size: 12px; line-height: 1.65; }
.eqd-btns { padding: 6px 0 0; gap: 5px; }
.eqd-btns button { padding: 6px 0; font-size: 12.5px; }
/* 聊天发言框：与页面风格统一 */
.chat-send { display: flex; gap: 8px; align-items: center; }
.chat-send input {
flex: 1; min-width: 0; height: 34px; padding: 0 10px; font-size: 13px; color: #dff2ff;
background: var(--p1); border: 1px solid var(--p2); border-radius: 6px; outline: none;
}
.chat-send input::placeholder { color: var(--text-sub); }
.chat-send input:focus { border-color: #57a0c8; box-shadow: 0 0 0 2px rgba(var(--panel-rgb), .2); }
.chat-send button {
flex: 0 0 auto; height: 34px; padding: 0 18px; font-size: 13px; color: var(--text); cursor: pointer;
background: linear-gradient(var(--p3), var(--p2)); border: 1px solid #57a0c8; border-radius: 6px;
}
/* 道友资料：紧凑属性列表 + 功能按钮 */
.frv-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin: 6px 2px; }
.frv-srow {
display: flex; align-items: center; justify-content: space-between; gap: 6px;
padding: 6px 4px; border-bottom: 1px solid rgba(var(--panel-rgb), .45);
}
.frv-srow span { font-size: 12px; color: var(--accent); }
.frv-srow b { font-size: 12.5px; color: #eaf6fb; font-weight: 600; }
.frv-tip { margin: 8px 2px 4px; text-align: center; font-size: 11px; color: #8fb6c8; }
.pm-ops { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pm-ops .fr-op {
padding: 4px 10px; font-size: 11.5px; color: #d8f0ff; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
}
.pm-ops .fr-op:active { background: var(--p3); }
/* 求婚私聊按钮 */
.pm-marry { display: inline-flex; gap: 5px; margin-left: 6px; }
.pm-marry button {
padding: 1px 9px; font-size: 11px; color: var(--text); cursor: pointer;
background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px;
}
.pm-marry button.danger { background: #6a2a3a; border-color: #b23a5e; }
/* 他人装备详情标题 */
.eqd-tt { text-align: center; font-size: 14px; color: var(--accent); padding: 2px 0 6px; }
/* 场景第四行按钮 + 实时时钟 */
.scene-btns-4 { margin-top: 2px; }
.scene-clock {
margin: 8px 2px 6px; padding: 5px 8px; font-size: 12.5px; color: #b9d4e0;
background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(var(--panel-rgb), .55); border-radius: 4px;
}
/* 场景时钟：无背景框，与上方按钮行左对齐 */
.scene-clock {
margin: 6px 14px 4px; padding: 0;
background: transparent; border: 0; border-radius: 0;
font-size: 12.5px; color: #b9d4e0;
}
/* ================= 装备详情：竖版窄框 + 按钮上下排列 ================= */
.eqd { max-width: 258px; margin: 0 auto; }
.eqd-btns { flex-direction: column; gap: 6px; }
.eqd-btns button { width: 100%; flex: none; padding: 7px 0; }
.eqd.compact { max-width: 246px; }
.eqd-tt { font-size: 13px; }
/* ================= 场景地图：选中态提示 ================= */
.sm-node.sel { border-color: #ffcf7a; box-shadow: 0 0 0 1px #c8963c inset; }
.sm-node.cur.sel { background: #c8963c; color: var(--text); }
/* ================= 历练地图 / 副本：紧凑一屏 ================= */
.page-title { font-size: 15px; padding: 6px 0 4px; }
.map-select { margin: 4px 0 6px; }
.grp-title { margin: 8px 0 4px; font-size: 11.5px; }
.grid2 { gap: 6px; }
.card-btn { padding: 8px 6px; min-height: 0; border-radius: 4px; }
.card-btn .t { font-size: 12.5px; margin-bottom: 2px; }
.card-btn .d { font-size: 10px; line-height: 1.35; }
.dun-back { padding: 4px 0 6px; font-size: 11.5px; }
.dun-row { padding: 6px 8px; }
.dun-row .bimg { width: 34px; height: 34px; }
.dun-row .bname { font-size: 12.5px; }
.dun-row .bsub, .dun-row .bdesc { font-size: 10px; line-height: 1.35; }
/* 历练地图再压缩：一屏显示更多 */
.grid2 { gap: 4px; }
.card-btn { padding: 5px 4px; }
.card-btn .t { font-size: 12px; margin-bottom: 1px; }
.card-btn .d { font-size: 9.5px; line-height: 1.25; }
.grp-title { margin: 5px 0 3px; font-size: 11px; }
.map-select { margin: 2px 0 4px; }
/* 历练地图卡片：单行描述，进一步压缩高度 */
.card-btn { min-height: 0; padding: 4px 3px; }
.card-btn .t { font-size: 11.5px; line-height: 1.25; margin: 0; }
.card-btn .d { font-size: 9px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid2 { gap: 4px; }
/* 帮派：页签 / 每日操作改为小按钮，并置于成员区下方 */
.gang-nav { justify-content: center; gap: 5px; margin: 10px 0 6px; }
.gang-nav button {
flex: 0 0 auto; padding: 3px 10px; font-size: 11px; border-radius: 3px;
background: var(--p1); border: 1px solid var(--p3); color: #cfe8f5;
}
.gang-nav button.on { background: var(--p3); border-color: #7ec8e0; color: var(--text); font-weight: 600; }
.gang-daily { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }
.gang-daily button { flex: 0 0 auto; padding: 3px 12px; font-size: 11px; border-radius: 3px; }
/* 弹窗关闭：小按钮 */
.modal-close {
display: block; margin: 10px auto 2px; padding: 4px 20px; font-size: 12px; line-height: 1.6;
color: #cfe8f5; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
text-align: center; cursor: pointer;
}
.modal-close:active { background: var(--p3); }
/* 装备详情弹窗：贴合内容 & 内容多可滚动 */
#modal.tight {
width: auto; max-width: 300px; margin: 0 auto; padding: 10px 12px 8px;
max-height: 76%; overflow-y: auto;
}
#modal.tight #modal-body { padding: 0; }
#modal.tight .eqd, #modal.tight .eqd.compact { max-width: 100%; width: 100%; }
/* 坊市 / 机缘 等主页面顶部返回条 */
.page-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 0 8px; }
.page-head .ph-back {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
padding: 4px 12px; font-size: 12px; color: #ffe3ee; cursor: pointer;
background: #7a3a5a; border: 1px solid #a05078; border-radius: 4px;
}
.page-head .ph-title { font-size: 15px; color: var(--accent); letter-spacing: 2px; }
/* 装备详情弹窗：整体协调（文字放大、按钮变矮、框略宽） */
#modal.tight {
width: 236px; max-width: 88%; margin: 0 auto;
padding: 12px 14px 10px; max-height: 76%; overflow-y: auto;
}
#modal.tight .eqd-tt { font-size: 14.5px; padding: 0 0 8px; }
#modal.tight .eqd-top { gap: 10px; padding: 4px 0 8px; }
#modal.tight .eqd-ico { flex: 0 0 48px; width: 48px; height: 48px; font-size: 26px; }
#modal.tight .eqd-meta { font-size: 13px; line-height: 1.8; }
#modal.tight .eqd-attrs { font-size: 13px; line-height: 1.85; padding: 8px 0; }
#modal.tight .eqd-btns { gap: 6px; padding: 8px 0 0; }
#modal.tight .eqd-btns button { padding: 5px 0; font-size: 13px; }
#modal.tight .modal-close { margin: 8px auto 0; padding: 3px 16px; font-size: 12px; }
/* ================= 设置页 ================= */
.set-grp {
margin: 16px 0 6px; padding: 0 0 6px 2px; font-size: 13.5px; color: var(--accent);
letter-spacing: 2px; font-weight: 700;
border-bottom: 1px solid rgba(200, 150, 60, .45);
}
.set-row {
display: flex; align-items: center; gap: 10px; padding: 13px 6px;
border-bottom: 1px solid rgba(var(--panel-rgb), .32);
background: linear-gradient(90deg, rgba(var(--panel-rgb), .30), rgba(var(--panel-rgb), .08));
}
.set-row:active { background: linear-gradient(90deg, rgba(var(--panel-rgb), .45), rgba(var(--panel-rgb), .18)); }
.set-ico { flex: 0 0 22px; text-align: center; font-size: 15px; line-height: 1; }
.set-lb { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #eaf6fb; }
.set-val {
flex: 0 1 auto; max-width: 42%; text-align: right; font-size: 12.5px; color: #8fb6c8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-btn {
flex: 0 0 auto; padding: 6px 15px; font-size: 12.5px; color: #cfe8f5; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 5px;
}
.set-btn:active { filter: brightness(1.25); }
.set-btn.danger { background: #5a2a3a; border-color: #b23a5e; color: #ffd0e0; }
/* ================= 修炼修仙页 ================= */
.xl-sec { margin: 10px 0 6px; text-align: center; font-size: 12.5px; color: #ff9ab5; }
.xl-sec::before, .xl-sec::after { content: "◆"; color: #ff6f9a; margin: 0 5px; font-size: 10px; }
.xl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.xl-card {
display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px;
background: var(--p1); border: 1px solid var(--p2); border-radius: 3px; cursor: pointer;
}
.xl-card:active { background: var(--p2); }
.xl-card .xl-name { font-size: 12.5px; color: #eaf6fb; font-weight: 600; }
.xl-card .xl-name i { font-style: normal; color: var(--accent); font-weight: 400; font-size: 11px; }
.xl-card .xl-sub { font-size: 10px; color: #9fc6d8; }
.xl-attr { text-align: center; font-size: 11.5px; color: var(--accent); margin: 2px 0 6px; }
.xl-tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.xl-tabs button {
padding: 3px 8px; font-size: 11px; color: #cfe8f5; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 3px;
}
.xl-tabs button.on { background: #c74a72; border-color: #ff8fb0; color: var(--text); }
.xl-mons { display: flex; flex-direction: column; gap: 6px; }
.xl-mon {
display: flex; align-items: center; gap: 8px; padding: 6px 8px;
background: var(--p1); border: 1px solid var(--p2); border-radius: 4px;
}
.xl-mon-ico {
flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; overflow: hidden; font-size: 18px;
}
.xl-mon-ico img { width: 100%; height: 100%; object-fit: cover; }
.xl-mon-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xl-mon-main b { font-size: 12.5px; color: var(--accent); }
.xl-mon-main i { font-style: normal; font-size: 10.5px; color: #bfe6ff; }
.xl-mon-main em { font-style: normal; font-size: 10px; color: #8fb6c8; }
.xl-lvbadge {
flex: 0 0 auto; padding: 2px 8px; font-size: 11px; color: #cfe8f5;
background: var(--p1); border: 1px solid var(--p3); border-radius: 3px;
}
/* ================= 场景地图：区域页签 + 地图列表 ================= */
.smap-regions { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
.smap-regions button {
flex: 0 0 auto; padding: 4px 10px; font-size: 12px; color: #cfe8f5; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; white-space: nowrap;
}
.smap-regions button.on { background: #c8963c; border-color: #ffcf7a; color: var(--text); font-weight: 700; }
.smap-regions button i { font-style: normal; font-size: 9px; margin-left: 3px; color: #ffe9a8; }
.smap-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.smap-item {
display: flex; align-items: center; gap: 5px; padding: 8px 8px;
background: var(--p1); border: 1px solid var(--p2); border-radius: 4px; cursor: pointer;
}
.smap-item.cur { border-color: #c8963c; background: #2b5f4a; }
.smap-item .si-name { flex: 1; min-width: 0; font-size: 12.5px; color: #eaf6fb; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smap-item .si-tag { font-size: 10px; padding: 0 4px; border-radius: 2px; }
.smap-item .si-tag.safe { color: #8ff2c0; border: 1px solid #2f8a64; }
.smap-item .si-tag.danger { color: #ff9ab5; border: 1px solid #b23a5e; }
.smap-item .si-here { font-size: 9.5px; color: var(--accent); }
/* 地图方位格子：类型小标 */
.sm-node { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sm-node em { font-style: normal; font-size: 9px; padding: 0 3px; border-radius: 2px; line-height: 1.4; }
.sm-node em.safe { color: #8ff2c0; border: 1px solid #2f8a64; }
.sm-node em.danger { color: #ff9ab5; border: 1px solid #b23a5e; }
.sm-node.cur-here { font-weight: 700; }
/* ================= 场景地图：区域下方「地图」页签 ================= */
.smap-areas { display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 6px; border-top: 1px solid rgba(var(--panel-rgb), .35); margin-top: 2px; }
.smap-areas button {
flex: 0 0 auto; padding: 3px 9px; font-size: 11.5px; color: #cfe8f5; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 3px; white-space: nowrap;
}
.smap-areas button.on { background: var(--p3); border-color: #7ec8e0; color: var(--text); font-weight: 600; }
.smap-areas button i { font-style: normal; font-size: 9px; color: #ffe9a8; margin-left: 3px; }
.smap3 .sm-node { font-size: 11.5px; padding: 6px 2px; }
/* ================= 场景地图：主区域 / 子地图 样式区分 + 自动换行 ================= */
.smap-regions {
flex-wrap: wrap; overflow: visible; gap: 6px;
padding: 2px 0 8px; border-bottom: 1px solid rgba(var(--panel-rgb), .55);
}
.smap-regions button {
flex: 0 0 auto; padding: 5px 11px; font-size: 12px; border-radius: 4px;
background: var(--p1); border: 1px solid var(--p2); color: #9fc6d8;
}
.smap-regions button.on {
background: linear-gradient(#c8963c, #a07020); border-color: #ffcf7a; color: var(--text);
}
.smap-regions button i { color: #ffe9a8; }
.smap-areas {
flex-wrap: wrap; overflow: visible; gap: 5px;
padding: 6px; margin: 6px 0 2px;
background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(var(--panel-rgb), .5); border-radius: 5px;
}
.smap-areas button {
flex: 0 0 auto; padding: 3px 8px; font-size: 11px; border-radius: 3px;
background: var(--p1); border: 1px solid var(--p2); color: #bfe6ff;
}
.smap-areas button.on { background: var(--p3); border-color: #7ec8e0; color: var(--text); }
.smap-areas button i { color: #ffe9a8; }
.smap-regions::-webkit-scrollbar, .smap-areas::-webkit-scrollbar { display: none; }
/* 战斗日志高度减半：避免回合多时把技能按钮挤到下面 */
#fight-log { max-height: 26vh; min-height: 110px; }
/* 战斗日志再收一点，且少量消息时不撑高 */
#fight-log { max-height: 24vh; min-height: 0; }
/* ================= 技能页：职业技能图鉴 ================= */
.skc-box { margin: 6px 0 10px; }
.skc-tt { text-align: center; font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.skc-tabs { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 6px; }
.skc-tabs button { padding: 4px 12px; font-size: 12px; color: #cfe8f5; cursor: pointer; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; }
.skc-tabs button.on { background: #c8963c; border-color: #ffcf7a; color: var(--text); font-weight: 700; }
.skc-list { border: 1px solid rgba(var(--panel-rgb), .5); border-radius: 5px; padding: 2px 9px; background: rgba(0, 0, 0, 0.22); }
.skc-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(var(--panel-rgb), .3); }
.skc-row:last-child { border-bottom: 0; }
.skc-nm { flex: 1; min-width: 0; font-size: 12.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skc-row em { font-style: normal; font-size: 10px; color: #bfe6ff; border: 1px solid var(--p2); border-radius: 3px; padding: 0 4px; }
.skc-up { flex: 0 0 auto; font-size: 10.5px; color: #8fb6c8; }
.skc-note { margin-top: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.85; color: #9fc6d8; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(var(--panel-rgb), .45); border-radius: 5px; }
.skc-note b { color: var(--accent); }
/* 职业技能：学习/升级按钮 */
.skc-learn {
flex: 0 0 auto; padding: 2px 7px; font-size: 10.5px; color: var(--text); cursor: pointer;
background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px;
}
.skc-learn:active { background: #3aa85c; }
.skc-lv { font-style: normal; font-size: 10px; color: #7ef29a; margin-left: 4px; }
.skc-setrow { text-align: center; margin: 0 0 6px; }
.skc-set {
padding: 4px 12px; font-size: 12px; color: var(--text); cursor: pointer;
background: var(--p3); border: 1px solid #7ec8e0; border-radius: 4px;
}
/* ================= 修炼修仙：雷劫 ================= */
.xl-thunder { display: flex; flex-direction: column; gap: 4px; }
.xl-th-row {
display: flex; align-items: center; gap: 6px; padding: 5px 8px;
background: var(--p1); border: 1px solid var(--p2); border-radius: 4px;
}
.xl-th-row b { flex: 0 0 46px; font-size: 12.5px; color: var(--accent); }
.xl-th-set { flex: 0 0 auto; font-size: 10px; color: #bfe6ff; border: 1px solid var(--p2); border-radius: 3px; padding: 0 3px; }
.xl-th-st { flex: 1; font-style: normal; font-size: 11px; color: #8fb6c8; }
.xl-th-st.done { color: #7ef29a; }
.xl-th-btn {
flex: 0 0 auto; padding: 2px 10px; font-size: 11px; color: var(--text); cursor: pointer;
background: #7a3a2a; border: 1px solid #c06a4a; border-radius: 3px;
}
/* ================= 灵宠面板 ================= */
.pet-cur { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--p2); border-radius: 6px; background: rgba(0, 0, 0, 0.25); }
.pet-ico { width: 52px; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--p1); border: 1px solid var(--p3); border-radius: 6px; }
.pet-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #cfe8f2; }
.pet-info b { font-size: 14px; }
.pet-info i { font-style: normal; font-size: 11px; color: #9fc6d8; }
.pet-stat { color: var(--accent); font-size: 12px; }
.pet-skill { color: #bfe6ff; font-size: 11.5px; }
.pet-btns { display: flex; gap: 8px; margin: 8px 0; }
.pet-btns button { flex: 1; padding: 7px 0; font-size: 12.5px; color: #eaf6fb; cursor: pointer; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; }
.pet-box-tt { margin: 6px 0; font-size: 11.5px; color: #8fb6c8; text-align: center; }
.pet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 190px; overflow-y: auto; }
.pet-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; font-size: 14px; color: #9fc6d8; cursor: pointer; background: var(--p1); border: 1px solid var(--p2); border-radius: 4px; }
.pet-cell span { font-size: 9.5px; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-cell.own { color: #eaf6fb; border-color: var(--p3); }
.pet-cell.on { background: #c8963c; border-color: #ffcf7a; color: var(--text); }
.pet-cell[disabled] { opacity: .45; }
/* ================= 修炼修仙：称号 ================= */
.xl-titles { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.xl-ti-row {
display: flex; align-items: center; gap: 6px; padding: 5px 8px;
background: var(--p1); border: 1px solid var(--p2); border-radius: 4px;
}
.xl-ti-row b { flex: 0 0 auto; font-size: 12.5px; color: var(--accent); }
.xl-ti-row span { flex: 1; min-width: 0; font-size: 10.5px; color: #9fc6d8; }
.xl-ti-done { font-style: normal; font-size: 11px; color: #7ef29a; }
.xl-ti-btn {
flex: 0 0 auto; padding: 2px 9px; font-size: 11px; color: var(--text); cursor: pointer;
background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px;
}
.xl-ti-btn[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* ================= 限时活动 ================= */
.act-row { padding: 8px; margin-bottom: 8px; background: var(--p1); border: 1px solid var(--p2); border-radius: 5px; }
.act-hd { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 3px; }
.act-hd b { font-size: 13px; color: var(--accent); }
.act-hd span { font-size: 10px; color: #9fc6d8; text-align: right; }
.act-desc { font-size: 11px; line-height: 1.7; color: #cfe8f2; }
.act-ops { display: flex; gap: 8px; margin-top: 6px; }
.act-ops button { flex: 1; padding: 5px 0; font-size: 12px; color: var(--text); cursor: pointer; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; }
/* ================= 帮派日常 / 俸禄 ================= */
.gang-quest { margin: 8px 0 4px; padding: 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(var(--panel-rgb), .5); border-radius: 5px; }
.gq-tt { text-align: center; font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.gq-row { display: flex; align-items: center; gap: 6px; padding: 4px 2px; border-bottom: 1px solid rgba(var(--panel-rgb), .3); }
.gq-row:last-child { border-bottom: 0; }
.gq-lb { flex: 0 0 64px; font-size: 12px; color: #bfe6ff; }
.gq-val { flex: 1; min-width: 0; font-size: 11px; color: #9fc6d8; }
.gq-btn { flex: 0 0 auto; padding: 2px 10px; font-size: 11px; color: var(--text); cursor: pointer; background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px; }
.gq-btn[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
.gq-done { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #7ef29a; }
/* ================= 帮派商店 / 帮派BOSS ================= */
.gang-shop-row { display: flex; gap: 6px; margin: 8px 0 2px; }
.gang-shop-row button { flex: 1; padding: 6px 0; font-size: 12px; color: var(--text); cursor: pointer; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; }
.gshop-list { margin: 4px 0; }
.gshop-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(var(--panel-rgb), .4); }
.gs-nm { flex: 1; min-width: 0; font-size: 12.5px; color: #eaf6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-price { flex: 0 0 auto; font-size: 11px; color: var(--accent); }
.gshop-row button { flex: 0 0 auto; padding: 3px 12px; font-size: 11.5px; color: var(--text); cursor: pointer; background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px; }
.gboss { text-align: center; }
.gb-name { font-size: 13px; color: var(--accent); margin: 4px 0; }
.gb-bar { height: 12px; border-radius: 6px; overflow: hidden; background: #2a1a1a; border: 1px solid #6a3a3a; margin: 6px 4px; }
.gb-bar i { display: block; height: 100%; background: linear-gradient(#ff6a6a, #a02020); }
.gb-hp { font-size: 11.5px; color: #ffb0b0; }
.gb-tip { margin: 8px 2px; font-size: 10.5px; line-height: 1.6; }
.gb-ops { margin: 8px 0 2px; }
.gb-ops button { padding: 7px 32px; font-size: 13px; color: var(--text); cursor: pointer; background: #7a3a2a; border: 1px solid #c06a4a; border-radius: 4px; }
.gb-ops button[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* ================= 帮战（统万城） ================= */
.war-tip { margin: 2px 4px 8px; text-align: center; font-size: 10.5px; line-height: 1.7; }
.war-my { margin: 4px 2px 8px; font-size: 12.5px; color: #cfe8f2; text-align: center; }
.war-top { margin: 0 2px 8px; border-top: 1px solid rgba(var(--panel-rgb), .5); }
.war-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); }
.wr-no { flex: 0 0 18px; text-align: center; font-size: 12px; color: #8fb6c8; }
.wr-no.wr-1 { color: var(--accent); font-weight: 700; }
.wr-no.wr-2 { color: #d8e6ee; font-weight: 700; }
.wr-no.wr-3 { color: #e0a878; font-weight: 700; }
.wr-nm { flex: 1; min-width: 0; font-size: 12.5px; color: #eaf6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-sc { flex: 0 0 auto; font-size: 12px; color: var(--accent); }
.war-ops { display: flex; gap: 8px; margin: 4px 0; }
.war-ops button { flex: 1; padding: 6px 0; font-size: 12px; color: var(--text); cursor: pointer; background: #7a3a2a; border: 1px solid #c06a4a; border-radius: 4px; }
/* ================= 宝石 / 勋章 ================= */
.xl-gems { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.xl-gm-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--p1); border: 1px solid var(--p2); border-radius: 4px; }
.xl-gm-ico { font-size: 14px; }
.xl-gm-nm { flex: 0 0 auto; font-size: 12px; color: var(--accent); }
.xl-gm-nm i { font-style: normal; color: #7ef29a; font-size: 10px; }
.xl-gm-eff { flex: 1; min-width: 0; font-size: 10px; color: #9fc6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-gm-btn { flex: 0 0 auto; padding: 2px 8px; font-size: 10.5px; color: var(--text); cursor: pointer; background: var(--p3); border: 1px solid #7ec8e0; border-radius: 3px; }
.xl-gm-full { font-size: 10.5px; color: #7ef29a; }
/* 连续签到提示 */
.sign-streak { margin: 4px 2px 8px; text-align: center; font-size: 12px; color: #9fc6d8; }
/* ================= 交易行 ================= */
.mk-tabs { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.mk-tabs span {
padding: 3px 12px; font-size: 12px; color: #cfe8f5; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 3px;
}
.mk-tabs span.on { background: var(--p3); border-color: #7ec8e0; color: var(--text); }
.mk-tabs .mk-sell {
margin-left: auto; padding: 3px 12px; font-size: 12px; color: var(--text); cursor: pointer;
background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px;
}
.mk-tip { margin: 0 2px 6px; font-size: 10.5px; }
.mk-list { max-height: 240px; overflow-y: auto; }
.mk-row { display: flex; align-items: center; gap: 6px; padding: 6px 2px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); }
.mk-nm { flex: 1; min-width: 0; font-size: 12px; color: #eaf6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-price { flex: 0 0 auto; font-size: 11.5px; color: var(--accent); }
.mk-seller { flex: 0 0 auto; font-size: 10px; max-width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-btn { flex: 0 0 auto; padding: 2px 10px; font-size: 11px; color: var(--text); cursor: pointer; background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px; }
.mk-btn.danger { background: #6a2a3a; border-color: #b23a5e; }
/* ================= 成就 ================= */
.ach-head { margin: 2px 2px 8px; text-align: center; font-size: 12.5px; color: #cfe8f2; }
.ach-head .sub { margin-top: 2px; font-size: 10px; color: #8fb6c8; }
.ach-grp { margin: 8px 0 3px; font-size: 12px; color: var(--accent); }
.ach-row { display: flex; align-items: center; gap: 6px; padding: 6px 2px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); }
.ach-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ach-main b { font-size: 12.5px; color: #eaf6fb; }
.ach-main i { font-style: normal; font-size: 10px; color: #8fb6c8; line-height: 1.6; }
.ach-btn { flex: 0 0 auto; padding: 2px 10px; font-size: 11px; color: var(--text); cursor: pointer; background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px; }
.ach-btn[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
.ach-done { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #7ef29a; }
/* ================= 师徒 / 答题 / 周常 ================= */
.ms-card { margin: 4px 2px 8px; padding: 8px; font-size: 12.5px; color: #eaf6fb; background: var(--p1); border: 1px solid var(--p2); border-radius: 5px; text-align: center; }
.ms-list { margin-bottom: 6px; }
.ms-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); }
.ms-nm { flex: 1; min-width: 0; font-size: 12.5px; color: var(--accent); }
.ms-nm i { font-style: normal; font-size: 10px; color: #9fc6d8; }
.ms-btn { flex: 0 0 auto; padding: 2px 10px; font-size: 11px; color: var(--text); cursor: pointer; background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 3px; }
.ms-tip { margin: 6px 2px; font-size: 10.5px; line-height: 1.7; }
.quiz-tip { margin: 2px 2px 8px; text-align: center; font-size: 10.5px; }
.quiz-q { padding: 10px 6px; font-size: 13px; color: var(--accent); text-align: center; line-height: 1.7; }
.quiz-opts { display: flex; flex-direction: column; gap: 6px; }
.quiz-opts button { padding: 8px 0; font-size: 12.5px; color: #eaf6fb; cursor: pointer; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; }
.quiz-close { margin-top: 10px; text-align: center; font-size: 11.5px; color: #8fb6c8; cursor: pointer; }
.wk-bar { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(var(--panel-rgb), .5); border-radius: 4px; font-size: 11.5px; color: #9fc6d8; }
.wk-bar span { flex: 1; }
.wk-btn { flex: 0 0 auto; padding: 3px 10px; font-size: 11px; color: var(--text); cursor: pointer; background: #7a5a2a; border: 1px solid #c09a4a; border-radius: 3px; }
.wk-btn[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* 邮件 */
.mail-tip { margin: 2px 2px 8px; text-align: center; font-size: 10.5px; }
.mail-list { max-height: 240px; overflow-y: auto; }
.mail-row { display: flex; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); font-size: 11.5px; line-height: 1.6; }
.mail-tt { flex: 0 0 44px; color: #8fb6c8; }
.mail-tx { flex: 1; color: #dff2ff; }
/* 活动开放状态 */
.act-st { font-size: 10.5px; margin: 2px 0 3px; }
.act-st.open { color: #7ef29a; }
.act-st.closed { color: #d08a8a; }
.act-ops button[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* 新手七日 */
.nb-tip { margin: 2px 2px 8px; text-align: center; font-size: 10.5px; }
.nb-list { margin-bottom: 6px; }
.nb-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); font-size: 11.5px; }
.nb-row.can { background: rgba(200,150,60,.12); }
.nb-day { flex: 0 0 44px; color: var(--accent); }
.nb-rw { flex: 1; min-width: 0; color: #eaf6fb; }
.nb-done { flex: 0 0 auto; font-style: normal; color: #7ef29a; }
.nb-now { flex: 0 0 auto; color: var(--accent); }
/* 转生渡劫面板 */
.zr-list { margin: 6px 2px; }
.zr-row { display: flex; align-items: center; gap: 6px; padding: 5px 4px; font-size: 12px; color: #dff2ff; border-bottom: 1px solid rgba(var(--panel-rgb), .3); }
.zr-ok { color: #7ef29a; font-weight: 700; }
.zr-no { color: #d08a8a; font-weight: 700; }
.zr-tip { margin: 8px 2px; text-align: center; font-size: 10.5px; line-height: 1.7; }
/* 新手引导 */
.gd-step { display: flex; gap: 8px; padding: 7px 2px; border-bottom: 1px solid rgba(var(--panel-rgb), .3); font-size: 12px; line-height: 1.65; }
.gd-step b { flex: 0 0 70px; color: var(--accent); }
.gd-step span { flex: 1; color: #dff2ff; }
/* 场景新手提示条 */
.gd-tip { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; padding: 6px 8px; font-size: 11.5px; color: #ffe9a8; background: rgba(200,150,60,.15); border: 1px solid rgba(200,150,60,.5); border-radius: 4px; }
.gd-tip button { flex: 0 0 auto; margin-left: auto; padding: 2px 9px; font-size: 11px; color: var(--text); cursor: pointer; background: #c8963c; border: 1px solid #ffcf7a; border-radius: 3px; }
/* 任务分类 / 交易行排序 */
.tk-kinds { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 6px; }
.tk-kinds span { padding: 2px 9px; font-size: 11px; color: #cfe8f5; cursor: pointer; background: var(--p1); border: 1px solid var(--p3); border-radius: 3px; }
.tk-kinds span.on { background: #c8963c; border-color: #ffcf7a; color: var(--text); }
.mk-sorts { display: flex; gap: 5px; margin: 2px 0 4px; }
.mk-sorts span { padding: 1px 8px; font-size: 10.5px; color: #9fc6d8; cursor: pointer; border: 1px solid var(--p2); border-radius: 3px; }
.mk-sorts span.on { color: var(--text); background: var(--p3); border-color: #7ec8e0; }
/* 装备详情 5 按钮 */
.eqd-btns5 { flex-wrap: wrap; gap: 4px; }
.eqd-btns5 button { flex: 1 1 18%; padding: 6px 2px; font-size: 11.5px; }
/* 转生页面 */
.zr-head { margin: 6px 2px 10px; text-align: center; font-size: 13px; color: #dff2ff; }
.zr-head .sub { font-size: 10.5px; color: #8fb6c8; margin-top: 3px; }
.zr-ops { margin: 12px 8px 4px; }
.zr-btn { width: 100%; padding: 9px 0; font-size: 13.5px; color: var(--text); cursor: pointer; background: var(--p3); border: 1px solid #7ec8e0; border-radius: 5px; }
.zr-btn[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* 婚姻页面 */
.mrg-card { margin: 4px 2px 10px; padding: 12px; text-align: center; background: linear-gradient(#2a1e3a, var(--p2)); border: 1px solid #7a5a9a; border-radius: 8px; }
.mrg-card.empty { background: var(--p1); border-color: var(--p2); }
.mrg-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mrg-ico { font-size: 26px; }
.mrg-nm { font-size: 15px; color: var(--accent); }
.mrg-st { font-size: 10.5px; color: #9fc6d8; border: 1px solid var(--p3); border-radius: 3px; padding: 0 4px; }
.mrg-st.on { color: #7ef29a; border-color: #2f8a64; }
.mrg-sub { margin-top: 6px; font-size: 10.5px; line-height: 1.7; color: #bfe6ff; }
.mrg-rows { margin: 0 2px; }
.mrg-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid rgba(var(--panel-rgb), .35); font-size: 12px; color: #eaf6fb; }
.mrg-row > span:first-child { flex: 0 0 70px; color: var(--accent); }
.mrg-row .sub { flex: 1; min-width: 0; font-size: 10.5px; }
.mrg-tip { margin: 8px 2px; font-size: 10.5px; line-height: 1.7; }
/* 腾云：搜索 + 翻页 */
.ty-search { display: flex; gap: 6px; margin: 2px 0 8px; }
.ty-search input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12px; color: #eaf6fb; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; }
.ty-search button { flex: 0 0 auto; padding: 6px 10px; font-size: 11.5px; color: var(--text); cursor: pointer; background: var(--p3); border: 1px solid #7ec8e0; border-radius: 4px; }
.ty-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 4px; font-size: 12px; color: #9fc6d8; }
.ty-pager button { padding: 4px 12px; font-size: 11.5px; color: var(--text); cursor: pointer; background: var(--p1); border: 1px solid var(--p3); border-radius: 4px; }
.ty-pager button[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* 场景地图：红框区域重排 */
.smap-regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px 0 8px; border-bottom: 1px solid rgba(var(--panel-rgb), .55); }
.smap-regions button { padding: 6px 2px; font-size: 11.5px; text-align: center; border-radius: 4px; }
.smap-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px; margin: 8px 0 4px; background: rgba(0, 0, 0, 0.31); border: 1px solid rgba(var(--panel-rgb), .55); border-radius: 6px; }
.smap-areas button { padding: 6px 2px; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smap3 { margin: 10px 4px 4px; }
.sm-node { min-height: 34px; }
/* ================= 修复：装备详情按钮单行 ================= */
.eqd .eqd-btns, .eqd.compact .eqd-btns { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px; }
.eqd .eqd-btns button, .eqd.compact .eqd-btns button {
flex: 1 1 0 !important; width: auto !important; min-width: 0; padding: 8px 2px;
font-size: 11px; line-height: 1.2; white-space: nowrap; border-radius: 4px;
}
/* ================= 场景：仙侣宴席入口（聊天上方） ================= */
.scene-banquet {
display: flex; align-items: center; gap: 8px; margin: 6px 0;
padding: 7px 10px; border-radius: 6px;
background: linear-gradient(90deg, rgba(120, 60, 40, .55), rgba(60, 30, 50, .55));
border: 1px solid rgba(200, 150, 90, .6);
}
.scene-banquet .sb-txt { flex: 1; min-width: 0; font-size: 12px; color: #ffe9a8; }
.scene-banquet button {
flex: 0 0 auto; padding: 4px 12px; font-size: 11.5px; color: var(--text); cursor: pointer;
background: linear-gradient(#c8963c, #a07020); border: 1px solid #ffcf7a; border-radius: 4px;
}
/* ================= 场景地图：区域/子地图统一风格 ================= */
.smap-regions { gap: 6px; }
.smap-regions button {
position: relative; padding: 8px 2px; font-size: 11.5px; letter-spacing: .5px;
color: #a9cfe0; border-radius: 5px;
background: linear-gradient(180deg, var(--p1), var(--p1));
border: 1px solid rgba(var(--panel-rgb), .55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35);
transition: all .15s;
}
.smap-regions button:active { transform: translateY(1px); }
.smap-regions button.on {
color: var(--text); font-weight: 700;
background: linear-gradient(180deg, #e2b45a, #a8701f);
border-color: #ffd98a;
box-shadow: 0 0 10px rgba(255, 190, 90, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.smap-regions button i { font-style: normal; font-size: 9px; margin-left: 3px; color: var(--accent); }
.smap-areas {
gap: 6px; padding: 10px; border-radius: 8px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50));
border: 1px solid rgba(var(--panel-rgb), .55);
box-shadow: inset 0 0 14px rgba(0, 0, 0, .35);
}
.smap-areas button {
padding: 7px 2px; font-size: 11px; border-radius: 4px; color: #b7dbe9;
background: linear-gradient(180deg, var(--p1), var(--p1));
border: 1px solid rgba(var(--panel-rgb), .5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.smap-areas button.on {
color: var(--text); font-weight: 700;
background: linear-gradient(180deg, var(--p3), var(--p2));
border-color: #8fe0ff;
box-shadow: 0 0 8px rgba(var(--panel-rgb), .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.smap-areas button i { font-style: normal; font-size: 9px; color: #ffe9a8; margin-left: 2px; }
/* ================= 场景地图：主区域彩色按钮 / 子地图纯文字 ================= */
.smap-regions button { color: var(--text) !important; text-shadow: 0 1px 1px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.28) !important; }
.smap-regions button:nth-child(1) { background: linear-gradient(180deg, #e0605a, #a8342f) !important; }
.smap-regions button:nth-child(2) { background: linear-gradient(180deg, var(--p3), var(--p2)) !important; }
.smap-regions button:nth-child(3) { background: linear-gradient(180deg, #8fae3c, #5c7a1e) !important; }
.smap-regions button:nth-child(4) { background: linear-gradient(180deg, #9a6cc0, #6a3f92) !important; }
.smap-regions button:nth-child(5) { background: linear-gradient(180deg, #d19a3c, #92651a) !important; }
.smap-regions button:nth-child(6) { background: linear-gradient(180deg, var(--accent), var(--p3)) !important; }
.smap-regions button.on {
background: linear-gradient(180deg, #ffd97a, #b57c1e) !important;
border-color: var(--accent) !important; color: var(--text) !important;
box-shadow: 0 0 10px rgba(255,200,90,.55) !important;
}
.smap-areas { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 6px 0 2px !important; }
.smap-areas button {
background: transparent !important; border: 0 !important; box-shadow: none !important;
color: #a9cfe0 !important; font-size: 12px !important; padding: 7px 2px !important;
border-bottom: 1px solid rgba(var(--panel-rgb), .25) !important; border-radius: 0 !important;
}
.smap-areas button.on {
color: var(--accent) !important; font-weight: 700;
border-bottom: 2px solid var(--accent) !important;
}
.smap-areas button i { color: var(--accent) !important; }
/* ================= 人物属性：去掉背景框，只留文字与分隔线 ================= */
.hero-stats .stat-item {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgba(var(--panel-rgb), .22) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 6px 4px !important;
}
/* 场景描述：旗子下拉效果 */
.scene-desc-line {
position: relative;
padding: 12px 14px 18px !important;
background: linear-gradient(180deg, var(--p1), var(--p1)) !important;
border: 1px solid rgba(var(--panel-rgb), .45) !important;
border-radius: 8px 8px 4px 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.35);
color: #cfe8f2;
}
.scene-desc-line::after {
content: '';
position: absolute;
left: 50%;
bottom: -9px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 9px solid var(--p1);
}
/* 队伍列表 */
.team-row {
display: flex; align-items: center; gap: 8px;
margin: 6px 0; padding: 8px 10px;
background: linear-gradient(180deg, rgba(var(--panel-rgb), .9), rgba(0, 0, 0, 0.56));
border: 1px solid rgba(var(--panel-rgb), .5); border-radius: 6px;
}
.team-main { flex: 1; min-width: 0; }
.team-hd { display: flex; align-items: center; gap: 8px; }
.team-nm { font-size: 14px; color: var(--accent); letter-spacing: .5px; }
.team-cnt { font-size: 10.5px; color: #9fc6d8; border: 1px solid rgba(var(--panel-rgb), .5); border-radius: 3px; padding: 0 4px; }
.team-sub { margin-top: 3px; font-size: 11px; color: #9fc6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-apply { flex: 0 0 auto; padding: 5px 12px; font-size: 11.5px; color: var(--text); cursor: pointer; background: #2f8a4a; border: 1px solid #5fc07a; border-radius: 4px; }
/* 场景介绍框内嵌场景图 */
.scene-desc-pic { display: flex; gap: 10px; align-items: flex-start; }
.sdp-img {
flex: 0 0 56px; width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
display: flex; align-items: center; justify-content: center; font-size: 26px;
background: var(--p1); border: 1px solid rgba(var(--panel-rgb), .55);
}
.sdp-img img { width: 100%; height: 100%; object-fit: cover; }
.sdp-txt { flex: 1; min-width: 0; line-height: 1.75; font-size: 12px; color: #cfe8f2; }
/* 场景 NPC 行高亮 */
.scene-row[data-act="scene-npc"] .sr-info b { color: var(--accent); }
/* ================= 种族技能页 ================= */
.sk-kind-tabs { display: flex; gap: 8px; margin: 8px 4px; }
.sk-kind-tabs button {
flex: 1; padding: 8px 0; font-size: 12.5px; color: #b7dbe9; cursor: pointer;
background: linear-gradient(180deg, var(--p1), var(--p1)); border: 1px solid rgba(var(--panel-rgb), .55); border-radius: 5px;
}
.sk-kind-tabs button.on { color: var(--text); font-weight: 700; background: linear-gradient(180deg, var(--p3), var(--p2)); border-color: #8fe0ff; }
.sk-card {
margin: 6px 4px; padding: 9px 10px; border-radius: 6px;
background: linear-gradient(180deg, rgba(var(--panel-rgb), .92), rgba(0, 0, 0, 0.57));
border: 1px solid rgba(var(--panel-rgb), .5);
}
.sk-card-hd { display: flex; align-items: center; gap: 6px; }
.sk-card-nm { flex: 0 0 auto; font-size: 13.5px; color: var(--accent); }
.sk-type { flex: 0 0 auto; font-size: 9.5px; padding: 1px 5px; border-radius: 3px; }
.sk-type.act { color: var(--text); background: #b5542f; border: 1px solid #e08a5a; }
.sk-type.pas { color: #dff2ff; background: var(--p2); border: 1px solid #6fbcd6; }
.sk-lv { margin-left: auto; font-size: 10.5px; color: #7ef29a; }
.sk-card-desc { margin-top: 4px; font-size: 11.5px; line-height: 1.7; color: #cfe8f2; }
.sk-card-eff { margin-top: 3px; font-size: 10.5px; line-height: 1.6; color: #9fd8ee; }
.sk-card-ft { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.sk-card-ft .sub { flex: 1; font-size: 10px; }
.sk-learn-btn {
flex: 0 0 auto; padding: 5px 12px; font-size: 11.5px; color: var(--text); cursor: pointer;
background: linear-gradient(180deg, var(--p3), var(--p2)); border: 1px solid #7fe0cc; border-radius: 4px;
}
.sk-learn-btn[disabled] { background: var(--p1); border-color: var(--p2); color: var(--text-sub); }
/* 场景页住宅入口 */
.scene-house-row {
display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 7px 10px;
background: linear-gradient(90deg, rgba(40,80,60,.55), rgba(0, 0, 0, 0.34));
border: 1px solid rgba(var(--panel-rgb), .5); border-radius: 6px;
}
.scene-house-row .shr-txt { flex: 1; min-width: 0; font-size: 12px; color: #c8f0d8; }
.scene-house-row button {
flex: 0 0 auto; padding: 4px 12px; font-size: 11.5px; color: var(--text); cursor: pointer;
background: linear-gradient(var(--p3), var(--p2)); border: 1px solid #7fe0cc; border-radius: 4px;
}
/* ================= 场景地图：方向格去框，仅文字；当前格浅色 ================= */
.smap3 .sm-node {
background: transparent !important; border: 0 !important; box-shadow: none !important;
color: #a9cfe0 !important; font-size: 12px !important; padding: 6px 2px !important;
}
.smap3 .sm-node.off { background: transparent !important; border: 0 !important; color: var(--p3) !important; }
.smap3 .sm-node.cur-here {
background: rgba(255, 215, 110, .16) !important;
border: 1px solid rgba(255, 215, 110, .5) !important;
border-radius: 6px; color: #ffe9a8 !important;
}
.smap3 .sm-node.sel { box-shadow: none !important; border-color: rgba(255,215,110,.35) !important; }
/* ================= 灵宠页面 ================= */
.pet-page { padding: 2px 2px 12px; }
.pp-top { display: flex; align-items: center; gap: 6px; margin: 4px 2px 8px; }
.pp-st { flex: 1; font-size: 12px; color: #cfe8f2; }
.pp-top button {
padding: 4px 10px; font-size: 11px; color: var(--text); cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
}
.pp-name { margin: 4px 2px 8px; font-size: 15px; color: var(--accent); text-align: center; }
.pp-name i { font-style: normal; font-size: 11px; color: #9fc6d8; }
.pp-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 2px 10px; }
.pp-links button {
padding: 7px 0; font-size: 11.5px; color: #dff2ff; cursor: pointer;
background: linear-gradient(180deg, var(--p1), var(--p1)); border: 1px solid rgba(var(--panel-rgb), .55); border-radius: 5px;
}
.pp-stats { margin: 0 2px; border-top: 1px solid rgba(var(--panel-rgb), .25); }
.pp-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(var(--panel-rgb), .18); font-size: 12px; }
.pp-row span { flex: 0 0 64px; color: #8fb6c8; }
.pp-row b { flex: 1; min-width: 0; color: #eaf6fb; font-weight: 600; }
.pp-mini { flex: 0 0 auto; padding: 2px 8px; font-size: 10.5px; color: var(--text); background: var(--p3); border: 1px solid #7ec8e0; border-radius: 3px; }
.pp-up { margin: 12px 4px 8px; }
.pp-up button { width: 100%; padding: 9px 0; font-size: 13px; color: var(--text); cursor: pointer; background: linear-gradient(180deg,var(--p3),var(--p2)); border: 1px solid #7fe0cc; border-radius: 5px; }
.pp-box-tt { margin: 10px 4px 6px; font-size: 11.5px; color: #9fc6d8; text-align: center; }
.pp-tip { margin: 8px 4px 0; font-size: 10.5px; line-height: 1.7; }
/* ================= 交易行（独立整页：在售 / 求购 / 我的） ================= */
.mk-chips { justify-content: flex-start; padding: 4px 0 8px; }
.mk-chips .btab { min-width: 62px; text-align: center; }
.mk-ops { display: flex; gap: 8px; margin: 0 0 8px; }
.mk-op {
flex: 1; padding: 8px 0; font-size: 13px; color: var(--text); cursor: pointer;
background: linear-gradient(#2f8a4a, #1f6a36); border: 1px solid #5fc07a; border-radius: 6px;
}
.mk-op.want { background: linear-gradient(var(--p3), var(--p2)); border-color: #7ec8e0; }
.mk-op:active { filter: brightness(1.15); }
.mk-line { margin: 6px 0; }
.mk-line .bico { width: 40px; height: 40px; }
.mk-sec {
margin: 14px 0 6px; padding-left: 8px; font-size: 13px; color: var(--accent); font-weight: 700;
border-left: 3px solid #c8963c;
}
.mk-btn { padding: 5px 12px; font-size: 12px; border-radius: 4px; white-space: nowrap; }
.mk-sorts { margin: 0 0 6px; }
.mk-bal { margin: 0 2px 8px; font-size: 12px; color: #9fc4d4; }
.mk-bal b { color: var(--accent); font-size: 13px; font-weight: 700; }
.mk-form {
margin: 4px 0 10px; padding: 10px 12px;
background: rgba(0, 0, 0, 0.46); border: 1px solid var(--p2); border-radius: 8px;
}
.mk-frow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mk-fw { flex: 0 0 82px; font-size: 12px; color: #9fc4d4; }
.mk-frow select, .mk-frow input {
flex: 1; min-width: 0; padding: 7px 8px; font-size: 13px; color: var(--text);
background: var(--p1); border: 1px solid var(--p2); border-radius: 5px;
}
.mk-frow input:disabled { opacity: .55; }
.mk-fi { flex: 0 0 auto; font-style: normal; font-size: 10px; color: #7a9cb0; }
.mk-qres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px 90px; }
.mk-qitem {
padding: 4px 10px; font-size: 12px; color: #cfe8f2; cursor: pointer;
background: var(--p1); border: 1px solid var(--p2); border-radius: 12px;
}
.mk-qitem:active { background: var(--p3); }
@media (max-width: 480px) {
.mk-fw { flex: 0 0 66px; font-size: 11.5px; }
.mk-qres { margin-left: 74px; }
.mk-op { padding: 7px 0; font-size: 12px; }
}
/* ================= 分区列表 / 角色页（书签页） ================= */
.bm-box { text-align: left; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bm-hello { font-size: 13px; color: var(--accent); margin: 4px 0 10px; line-height: 1.7; }
.bm-hello b { color: var(--text); }
.bm-tip { font-size: 11px; line-height: 1.75; color: #9fc4d4; margin-bottom: 10px; word-break: break-all; }
.bm-tip b { color: #7ef29a; font-weight: 600; }
.bm-warn { color: #ff9ab5; }
.bm-sec { margin: 10px 0 6px; font-size: 12.5px; color: var(--accent); font-weight: 700; }
.bm-line { font-size: 12px; color: #cfe8f5; line-height: 2; }
.bm-join { color: #7ee0ff; margin-left: 6px; }
.bm-zones { display: flex; flex-direction: column; gap: 6px; }
.bm-zone {
display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer;
background: rgba(0, 0, 0, 0.50); border: 1px solid var(--p2); border-radius: 8px;
}
.bm-zone:active { background: rgba(var(--panel-rgb), .9); }
.bm-zone.cur { border-color: #c8963c; box-shadow: 0 0 0 1px rgba(200, 150, 60, .35) inset; }
.bm-zone .bz-name {
flex: 1; min-width: 0; font-size: 13.5px; color: var(--accent);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-zone .bz-arrow { flex: 0 0 auto; color: #7ee0ff; font-size: 15px; }
.zi-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; flex: 0 0 auto; }
.zi-hot { background: #c8963c; color: #251a05; }
.zi-new { background: #2f8a4a; color: var(--text); }
.zi-off { background: #5a2a3a; color: #ffb9c8; }
.bm-foot { margin-top: 10px; font-size: 10.5px; color: #7a9cb0; text-align: center; }
/* 角色页卡片 */
.char-card {
margin: 4px 0 12px; padding: 12px; text-align: center;
background: rgba(0, 0, 0, 0.50); border: 1px solid var(--p2); border-radius: 8px;
}
.char-card .cc-nm { font-size: 15px; color: var(--accent); font-weight: 700; }
.char-card .cc-sub { margin-top: 5px; font-size: 11.5px; color: #9fc4d4; }
.char-card .cc-zone { margin-top: 3px; font-size: 11px; color: #7a9cb0; }
.char-card .cc-empty { font-size: 13px; color: #9fc4d4; line-height: 1.9; }
/* ================= 场景 NPC 单行 ================= */
.npc-line {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
margin: 0 14px; padding: 7px 4px; border-bottom: 1px dashed rgba(var(--panel-rgb), .35);
}
.npc-line .nl-label { flex: 0 0 auto; font-size: 12px; color: #8fb6c8; }
.npc-line .npc-item { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.npc-line .npc-item:active { opacity: .72; }
.nl-img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--p3); }
.nl-ico { font-style: normal; font-size: 16px; }
.nl-nm { font-size: 12.5px; color: #7ee0ff; font-weight: 700; }
/* ================= 场景怪物行（与 NPC 同款 / 红名） ================= */
.nl-nm.mob-nm { color: #ff8a8a; }
.npc-line.mob-line .nl-label { color: #ff8a8a; }
.npc-line.mob-line { margin-top: -1px; }
.mob-item:active .mob-nm { text-decoration: underline; }
/* 查看地图链接：位于场景描述上方 */
.scene-map-link { cursor: pointer; }
/* ================= 聊天日期分隔 ================= */
.chat-date {
margin: 8px 0 4px; text-align: center; font-size: 10.5px; color: #7a9cb0;
letter-spacing: 1px;
}
/* ================= 人物页：境界|经验 / 道行|种族（两行两列，与上方属性对齐） ================= */
.hero-stats .stat-row-2 { display: flex; width: 100%; flex-basis: 100%; border-top: 1px solid rgba(var(--panel-rgb), .8); }
.hero-stats .stat-row-2 .stat-item { flex: 1 1 0; min-width: 0; padding: 8px 8px; border-left: 0; }
.hero-stats .stat-row-2 .stat-item + .stat-item { border-left: 1px solid rgba(var(--panel-rgb), .8); }
.hero-stats .stat-row-2 .stat-item .sv {
font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-stats .stat-row-2 .lv-badge { margin-left: 4px; }
.hero-stats .stat-row-2 .mini-btn { padding: 1px 7px; font-size: 10.5px; margin-left: 5px; }
.hero-stats .stat-race .sv { color: #7ee0ff; }
.hero-stats .stat-days .sv { color: #7ee0ff; }
/* ================= 分区列表 · 角色页头像 ================= */
.char-card .cc-av {
width: 68px; height: 68px; margin: 2px auto 8px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; overflow: hidden;
font-size: 34px; border: 2px solid var(--accent); background: rgba(0, 0, 0, 0.41);
}
.char-card .cc-av img, .char-card .cc-av .av-img { width: 100%; height: 100%; object-fit: cover; }
/* ================= 手机端 HUD：紧凑不裁切 ================= */
@media (max-width: 480px) {
/* 单行稳定布局：货币+区服在左，加群/签到靠右；在线-次要信息隐藏，防整组换行错位 */
.hud-res { gap: 6px; row-gap: 3px; padding: 3px 8px; font-size: 12px; flex-wrap: nowrap; overflow: hidden; }
.hud-res .res { flex: 0 0 auto; white-space: nowrap; }
.hud-res .online { display: none; }
.hud-res .res-lab { display: none; }
.hud-res .zone {
position: static; left: auto; top: auto; transform: none;
margin-left: 0; font-size: 11px; max-width: 92px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 0 1 auto; min-width: 0;
}
.hud-res .joinqq { margin-left: auto; padding: 1px 8px; font-size: 11.5px; flex: 0 0 auto; }
.hud-res .sign { padding: 1px 8px; font-size: 11.5px; flex: 0 0 auto; }
.cur-ico { width: 14px; height: 14px; vertical-align: -2px; }
.hud-main { gap: 6px; padding: 5px 8px 7px; }
.hud-info .nm { font-size: 13.5px; }
.hud-info .uid, .hud-info .pw { font-size: 11px; }
.round-btn { width: 40px; height: 40px; }
.hud-side { gap: 5px; }
}
/* ================= 手机端：场景页整体紧凑适配 ================= */
@media (max-width: 480px) {
#tabbar button { font-size: 12.5px; padding: 11px 0; }
/* 手机端按钮区整体缩到约 3.6 列宽（72%），高度保持不变；
* 右侧留白避开悬浮按钮，按钮本身字号 11px、上下 5px、圆角 4px */
.scene-btns {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px;
width: 72%;
margin: 5px 0 3px 10px;
align-items: stretch;
}
.scene-btns button, .scene-btns a {
padding: 5px 0;
font-size: 11px;
line-height: 1.45;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
justify-content: center;
border-radius: 4px;
letter-spacing: 0;
}
.scene-head { gap: 6px; margin: 8px 10px 2px; flex-wrap: wrap; }
.scene-head-name { font-size: 15px; }
.scene-head .head-refresh, .scene-head .head-idle { padding: 3px 9px; font-size: 11.5px; margin-left: 0; }
.scene-head .head-gm { padding: 3px 8px; font-size: 11px; }
.scene-desc-line, .home-chat .hc-line, .exit-row { margin-left: 10px; margin-right: 10px; }
.npc-line { margin: 0 10px; }
.scene-map-link { margin: 6px 10px 2px; font-size: 12.5px; }
#guide-bar { margin: 5px 8px; padding: 6px 8px; font-size: 12px; }
.sub-bar .sub-title { font-size: 13.5px; }
}
/* 场景按钮组已回到 .scene-btns（4 行 × 5 列），此处不再需要独立面板样式 */
/* ================= 手机端：顶栏不溢出 ================= */
@media (max-width: 480px) {
.hud-main { gap: 5px; padding: 5px 6px 6px; }
.hud-side { gap: 4px; flex: 0 1 auto; min-width: 0; }
.round-btn { width: 34px; height: 34px; flex: 0 0 34px; }
.round-btn .rb-lb { font-size: 9px; }
.hud-res { gap: 6px; padding: 3px 6px; }
.hud-res .joinqq { margin-left: auto; padding: 1px 6px; font-size: 11.5px; }
.hud-res .sign { padding: 1px 6px; font-size: 11.5px; }
.hud-info .nm { font-size: 13px; }
.hud-info .uid, .hud-info .pw { font-size: 11px; }
}
/* 手机端按钮防溢出 */
@media (max-width: 480px) {
.scene-btns button, .scene-btns a {
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
}
}
/* ================= 道友资料：操作按钮行（位于气血上方） ================= */
.frv-ops {
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
margin: 10px 0 6px;
}
.frv-ops .fr-op {
padding: 4px 11px; font-size: 12px; color: #cfe8f5; cursor: pointer;
background: var(--p1); border: 1px solid var(--p3); border-radius: 4px;
}
.frv-ops .fr-op:active { filter: brightness(1.25); }
@media (max-width: 480px) {
.frv-ops { gap: 5px; margin: 8px 0 4px; }
.frv-ops .fr-op { padding: 4px 9px; font-size: 11.5px; }
}
/* ================= 书签旧令牌提示 ================= */
.bm-token-tip {
margin: 8px 0 10px; padding: 7px 10px; border-radius: 5px;
font-size: 11.5px; line-height: 1.6;
color: var(--accent); background: rgba(200, 150, 60, .16);
border: 1px solid rgba(200, 150, 60, .45);
}
/* ================= 场景正文放大（聊天/出口/NPC/怪物/玩家） ================= */
.scene-desc-line { font-size: 15.5px !important; line-height: 1.9 !important; }
.home-chat .hc-line { font-size: 15px !important; line-height: 1.95 !important; }
.home-chat .hc-nm { font-size: 15px !important; }
.exit-row { font-size: 15.5px !important; padding: 8px 2px !important; }
.exit-row .exit-dir { font-size: 15px !important; }
.exit-row .exit-name { font-size: 15.5px !important; }
.exit-row .exit-go { font-size: 13.5px !important; }
.npc-line .nl-label { font-size: 15px !important; }
.npc-line .npc-item { font-size: 15.5px !important; }
.npc-line .npc-nm { font-size: 15.5px !important; }
.mp-label, .mp-name, .mp-sep { font-size: 15.5px !important; }
.scene-map-link { font-size: 14.5px !important; }
.scene-clock { font-size: 14px !important; }
/* 手机上略小一点，避免挤成一团 */
@media (max-width: 480px) {
/* 手机端也放大：和电脑基本一致，只略小 0.5px 防溢出 */
.scene-desc-line { font-size: 15px !important; line-height: 1.9 !important; }
.home-chat .hc-line, .home-chat .hc-nm { font-size: 15px !important; line-height: 1.95 !important; }
.exit-row { font-size: 15px !important; padding: 8px 2px !important; }
.exit-row .exit-dir, .exit-row .exit-name { font-size: 15px !important; }
.exit-row .exit-go { font-size: 13px !important; }
.npc-line .nl-label, .npc-line .npc-item, .npc-line .npc-nm { font-size: 15px !important; }
.mp-label, .mp-name, .mp-sep { font-size: 15px !important; }
.scene-map-link { font-size: 14px !important; }
.scene-clock { font-size: 13.5px !important; }
}
/* ================= 战斗布局重构（人物左/怪物右 并排顶部 + 技能药品上移 + 血条缩短） ================= */
#fight-area {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
flex-direction: row !important;
justify-content: center !important;
}
#fight-area .fight-unit.me-unit { order: 1 !important; flex: 0 0 48% !important; max-width: none !important; width: 48% !important; margin: 4px !important; }
#fight-area .fight-unit.mon-unit { order: 2 !important; flex: 0 0 48% !important; max-width: none !important; width: 48% !important; margin: 4px !important; }
#fight-area .dun-manual { order: 3 !important; flex: 0 0 100% !important; width: 100% !important; justify-content: center !important; margin-top: 4px !important; }
#fight-area .fight-tip { order: 4 !important; flex: 0 0 100% !important; width: 100% !important; }
#fight-area #fight-log { order: 5 !important; flex: 0 0 100% !important; width: 100% !important; }
/* 血条/蓝条缩短：两侧战斗卡各占半行，条随之收窄 */
#fight-area .fight-unit .fu-bars { max-width: 130px !important; width: 100% !important; margin: 0 auto !important; }
#fight-area .fight-unit .fbar { height: 11px !important; }
#fight-area .fight-unit .fbar.mp { height: 9px !important; }
#fight-area .fight-unit .fbar span { font-size: 8px !important; line-height: 9px !important; }
#fight-area .me-unit .fu-name, #fight-area .mon-unit .fu-name { font-size: 12px !important; }
#fight-area .fight-unit .fu-ico, #fight-area .fight-unit .fu-avwrap img { width: 60px !important; height: 60px !important; }
/* ================= 场景 NPC/怪物/掉落/玩家 信息区：文字统一 15 号 ================= */
.scene-wrap .npc-line .nl-label,
.scene-wrap .npc-line .npc-item,
.scene-wrap .npc-line .nl-nm,
.scene-wrap .scene-row .sr-label,
.scene-wrap .scene-row .sr-info b,
.scene-wrap .drop-list .sub,
.scene-wrap .map-players .mp-label,
.scene-wrap .map-players .mp-name,
.scene-wrap .map-players .sub {
font-size: 15px !important;
}
/* ================= 整体提亮（明亮风格 v2） ================= */
/* 主背景：中蓝，比上一版再亮一档 */
body:not(.text-mode), body:not(.text-mode) #app {
background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%) !important;
}
/* 场景页背景透明，露出整体渐变 */
body:not(.text-mode) .scene-wrap { background: transparent !important; }
body:not(.text-mode) #page { background: transparent !important; }
/* 顶栏 / 底栏 */
#hud {
background: var(--bar) !important;
border-bottom: 1px solid var(--bd) !important;
}
#tabbar {
background: var(--bar2) !important;
border-top: 1px solid var(--bd) !important;
}
#tabbar button { color: #c2e2f2 !important; }
#tabbar button.on { color: var(--accent) !important; }
/* 卡片 / 面板 / 弹窗 */
.scene-desc-line, .card, .panel, .modal-box, .sub-wrap, .hero-panel, .bag-panel,
.mk-card, .rank-row, .gang-row, .task-row, .pet-row, .house-row, .pi-row {
background: rgba(var(--panel-rgb), .58) !important;
border-color: var(--bd) !important;
}
.modal-box { background: var(--p3) !important; }
#modal-mask { background: rgba(0, 0, 0, 0.43) !important; }
/* 文字：正文用纯白，辅助文字用浅白（灰白），保证在提亮后的底上依然清晰 */
body { color: var(--text) !important; }
.scene-desc-line, .card, .panel, .modal-box { color: var(--text) !important; }
.sub, .tip, .desc, .nc-sub { color: var(--text) !important; }
.scene-desc-line .sl, .stat-item .sl { color: var(--accent) !important; }
.stat-item .sv { color: var(--text) !important; }
/* 分页/翻页：按钮文字亮、页码计数浅白 */
.chat-page button { color: var(--text) !important; }
.chat-page .cp-info { color: var(--text) !important; font-weight: 600; }
/* 物品/列表辅助文字：描述、数量、子信息提亮为浅白 */
.bdesc, .bnum, .bsub { color: var(--text) !important; }
.bnum { font-weight: 600; }
/* 出口 / NPC / 怪物分隔线 */
.exit-row { border-bottom: 1px dashed var(--bd) !important; }
/* 引导条：半透明淡金，进一步提亮底色 */
#guide-bar {
background: rgba(255, 224, 150, .14) !important;
border-color: rgba(220, 185, 110, .42) !important;
}
/* 按钮：整体提亮一档，避免在亮底上显得脏 */
.scene-btns button, .mini-btn, .set-btn, .pot-btn {
background: rgba(var(--btn-rgb), .55) !important;
border-color: var(--bd) !important;
color: var(--text) !important;
}
.scene-btns button:active, .scene-btns a:active, .mini-btn:active { background: rgba(var(--btn-rgb), .72) !important; }
/* ===== 手机端：屏幕偏暗，再额外提亮一档 ===== */
@media (max-width: 480px) {
body:not(.text-mode), body:not(.text-mode) #app {
background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%) !important;
}
#hud { background: var(--bar) !important; }
#tabbar { background: var(--bar2) !important; }
.scene-desc-line, .card, .panel, .modal-box, .sub-wrap {
background: rgba(var(--panel-rgb), .62) !important;
}
.modal-box { background: var(--p3) !important; }
}
/* ================= 手机端再提亮（子页面/弹窗） ================= */
@media (max-width: 480px) {
.chat-page, .bag-row, .bag-item, .hero-slot, #modal, .card,
.skill-card, .task-item, .map-item, .pi-row, .rank-row {
background-color: rgba(var(--panel-rgb), .52) !important;
}
.chat-input input, .login-box input, #pane input {
background-color: rgba(var(--panel-rgb), .70) !important;
color: var(--text) !important;
}
.chat-top .filters button, #tabbar button {
background-color: rgba(var(--panel-rgb), .60) !important;
color: var(--text) !important;
}
}
/* 主题选择器（设置页色块） */
.theme-chips { display: inline-flex; gap: 6px; align-items: center; }
.theme-chips .tc {
display: inline-block; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .55); cursor: pointer;
}
.theme-chips .tc.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 215, 110, .45); }
/* ================= 纸墨主题文字兜底（浅底必须深字） ================= */
body.theme-paper, body.theme-paper .card, body.theme-paper .panel,
body.theme-paper .scene-desc-line, body.theme-paper .home-chat .hc-line,
body.theme-paper .exit-row, body.theme-paper .npc-line, body.theme-paper .map-players,
body.theme-paper .chat-row, body.theme-paper .bag-row, body.theme-paper .bag-item,
body.theme-paper .sk-card, body.theme-paper .task-row, body.theme-paper .rank-row,
body.theme-paper .pi-row, body.theme-paper .sub-wrap, body.theme-paper #modal,
body.theme-paper .modal-box, body.theme-paper #page {
color: var(--text) !important;
}
/* 浅底上的浅色文字统一转深（避免看不清） */
body.theme-paper .sub, body.theme-paper .tip, body.theme-paper .desc,
body.theme-paper .nc-sub, body.theme-paper .stat-item .sv,
body.theme-paper .exit-name, body.theme-paper .exit-dir,
body.theme-paper .mp-name, body.theme-paper .mp-label,
body.theme-paper .npc-item, body.theme-paper .nl-label,
body.theme-paper .sk-desc, body.theme-paper .sk-cost {
color: var(--text) !important;
}
body.theme-paper .stat-item .sl, body.theme-paper .scene-desc-line .sl,
body.theme-paper .gb-tag { color: var(--accent) !important; }
body.theme-paper .chat-nm, body.theme-paper .hc-nm { color: var(--p3) !important; }
body.theme-paper .tag { background: #e8e2d0 !important; color: #5a4a2a !important; }
body.theme-paper #hud, body.theme-paper #hud b,
body.theme-paper .hud-info .nm, body.theme-paper .hud-info .uid { color: #1a1a1a !important; }
body.theme-paper #tabbar button { color: #4a4a4a !important; }
body.theme-paper #tabbar button.on { color: var(--accent) !important; font-weight: 700; }
/* ================= 历史浏览模式横幅 ================= */
.hist-bar {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 99999;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 14px;
font-size: 13.5px;
line-height: 1.4;
background: linear-gradient(180deg, rgba(255, 220, 130, .98), rgba(230, 172, 52, .98));
color: #43300a;
box-shadow: 0 3px 14px rgba(0, 0, 0, .38);
border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.hist-bar.show { display: flex; }
.hist-bar .hb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-bar .hb-t1 { font-weight: 700; font-size: 13.5px; }
.hist-bar .hb-t2 { font-size: 11.5px; opacity: .78; }
.hist-bar button {
flex: 0 0 auto;
padding: 8px 16px;
border: 1px solid #9a6a12;
border-radius: 6px;
background: #fffdf4;
color: #6d4405;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}
.hist-bar button:active { background: #ffe9b0; transform: translateY(1px); }
/* 历史模式下页面整体压暗一点，视觉上提示「不可操作」 */
body.hist-mode { padding-top: 56px; }
body.hist-mode #app { opacity: .86; }
body.hist-mode #page { pointer-events: none; }
body.hist-mode #hud, body.hist-mode #tabbar { pointer-events: none; }
/* 弹窗也禁用点击，但保留可读 */
body.hist-mode #mask { pointer-events: none; }
@media (max-width: 480px) {
.hist-bar { padding: 8px 10px; font-size: 12.5px; }
.hist-bar .hb-t1 { font-size: 12.5px; }
.hist-bar .hb-t2 { font-size: 11px; }
.hist-bar button { padding: 7px 12px; font-size: 12.5px; }
body.hist-mode { padding-top: 52px; }
}
/* ================= 顶部栏统一风格 ================= */
/* 容器：深蓝底、居中排版、底部细线 */
.hero-modal-head, .sub-bar, .chat-top, .page-head {
background: var(--p2) !important;
border-bottom: 1px solid var(--bd) !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 46px;
padding: 7px 10px !important;
margin: 0 !important;
}
/* 返回按钮：红色小块，贴左侧 */
.back-btn, .sub-back, .ch-btn, .ph-back {
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translateY(-50%);
margin: 0 !important;
background: #a5382f !important;
color: #fff !important;
border: 1px solid #c9564a !important;
border-radius: 4px !important;
padding: 5px 14px !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, .25) !important;
}
.back-btn:active, .sub-back:active, .ch-btn:active, .ph-back:active {
background: #8c2d26 !important;
}
/* 标题：金色、居中、字距拉开 */
.hero-title, .sub-title, .chat-tt, .ph-title {
color: var(--accent) !important;
font-size: 15px !important;
letter-spacing: 3px !important;
font-weight: 700 !important;
text-align: center !important;
margin: 0 !important;
text-shadow: none !important;
}
/* 包裹页顶栏：保留页签布局，只统一底色和返回按钮 */
.bag-tabs {
background: var(--p2) !important;
border-bottom: 1px solid var(--bd) !important;
}
.bag-back2 {
background: #a5382f !important;
color: #fff !important;
border: 1px solid #c9564a !important;
border-radius: 4px !important;
padding: 5px 12px !important;
font-size: 12.5px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, .25) !important;
}
/* 独立标题（历练地图等）：加一条顶部栏样式 */
.page-title {
color: var(--accent) !important;
font-size: 15px !important;
letter-spacing: 3px !important;
font-weight: 700 !important;
text-align: center !important;
background: var(--p2) !important;
border-bottom: 1px solid var(--bd) !important;
padding: 12px 10px !important;
margin: 0 !important;
position: relative;
}
/* 底部返回场景：统一金色胶囊（已有 .sub-home 的页面自动生效） */
.sub-foot {
padding: 20px 10px 90px !important;
text-align: center !important;
}
.sub-foot .sub-home, .sub-foot a.sub-home {
display: inline-block;
padding: 11px 46px !important;
border-radius: 8px !important;
border: 1px solid rgba(224, 180, 92, .9) !important;
background: linear-gradient(180deg, #d8a44a, #a5761f) !important;
color: #fffaf0 !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 1px;
box-shadow: 0 3px 10px rgba(0, 0, 0, .28) !important;
}
.sub-foot .sub-home:active { filter: brightness(1.12); }
@media (max-width: 480px) {
.hero-modal-head, .sub-bar, .chat-top, .page-head { min-height: 42px; padding: 6px 8px !important; }
.back-btn, .sub-back, .ch-btn, .ph-back { padding: 4px 12px !important; font-size: 12.5px !important; left: 8px !important; }
.hero-title, .sub-title, .chat-tt, .ph-title { font-size: 14px !important; letter-spacing: 2px !important; }
.sub-foot { padding: 16px 10px 84px !important; }
.sub-foot .sub-home, .sub-foot a.sub-home { padding: 10px 38px !important; font-size: 14.5px !important; }
}
/* ================= 战斗双方并排 + 缩小 ================= */
#fight-area {
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
/* 两个战斗单位各占一半，并排一行 */
#fight-area .fight-unit {
flex: 0 0 calc(50% - 10px) !important;
margin: 5px !important;
}
/* 其余元素独占整行 */
#fight-area #fight-log,
#fight-area .fight-tip,
#fight-area .dun-manual,
#fight-area .tower-info,
#fight-area .fight-me,
#fight-area .dun-manual {
flex: 0 0 100% !important;
}
/* ================= 战斗结果页 ================= */
.fres {
padding: 24px 12px 100px;
text-align: center;
}
.fres-title {
font-size: 26px;
font-weight: 700;
letter-spacing: 8px;
margin: 8px 0 22px;
}
.fres-title.win { color: #ffd76e; text-shadow: 0 0 16px rgba(255, 215, 110, .55); }
.fres-title.lose { color: #ff8f8f; text-shadow: 0 0 14px rgba(255, 120, 120, .40); }
.fres-mon {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.fres-ico {
width: 78px; height: 78px;
border-radius: 10px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 42px;
background: rgba(0, 0, 0, .28);
border: 1px solid var(--bd);
}
.fres-ico img { width: 100%; height: 100%; object-fit: cover; }
.fres-nm { font-size: 14.5px; color: var(--text); }
.fres-list {
max-width: 440px;
margin: 0 auto 22px;
text-align: left;
padding: 12px 16px;
border-radius: 8px;
background: rgba(0, 0, 0, .16);
border: 1px solid var(--bd);
}
.fres-list p { margin: 6px 0; font-size: 14px; color: #dcf2ff; line-height: 1.6; }
.fres-tip { color: var(--text-sub); font-size: 13.5px; margin-bottom: 24px; }
.fres-btns {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.fres-btns button, .fres-btns a {
padding: 12px 34px;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
border: 1px solid rgba(224, 180, 92, .9);
background: linear-gradient(180deg, #d8a44a, #a5761f);
color: #fffaf0;
box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
cursor: pointer;
}
.fres-btns button.fres-back {
background: rgba(var(--panel-rgb), .78);
border-color: var(--bd);
color: var(--text);
}
.fres-btns button:active { filter: brightness(1.12); }
@media (max-width: 480px) {
#fight-area .fight-unit { flex: 0 0 calc(50% - 8px) !important; margin: 4px !important; padding: 6px 5px !important; }
.fu-ico { width: 44px !important; height: 44px !important; font-size: 24px !important; }
.fu-name { font-size: 11.5px !important; margin: 2px 0 3px !important; }
.fu-name b { font-size: 11.5px !important; }
.fu-name .fu-lv, .fu-name .fu-boss { font-size: 9px !important; padding: 0 3px !important; }
.fres { padding: 18px 8px 92px; }
.fres-title { font-size: 21px; letter-spacing: 5px; }
.fres-ico { width: 64px; height: 64px; font-size: 34px; }
.fres-list p { font-size: 13px; }
.fres-btns button, .fres-btns a { padding: 10px 26px; font-size: 14px; }
}
/* ================= 战斗结果页：战利品行对齐 ================= */
/* 每行左侧留出固定宽度给图标，正文统一从同一位置开始 */
.fres-list p {
margin: 7px 0 !important;
line-height: 1.75 !important;
padding-left: 24px !important;
position: relative;
text-align: left;
}
.fres-list p > * { vertical-align: middle; }
/* 没有图标的行：用透明占位块撑出与图标列同宽 */
.fres-list p::before {
content: '';
display: inline-block;
width: 20px;
margin-left: -24px;
margin-right: 4px;
}
/* 只保留一个按钮时居中 */
.fres-btns { justify-content: center !important; }
/* ================= 药品设置：返回上级按钮（居中醒目） ================= */
.qp-back {
text-align: center !important;
margin: 26px 0 40px !important;
padding: 0 !important;
}
.qp-back button {
display: inline-block !important;
padding: 11px 44px !important;
font-size: 15.5px !important;
font-weight: 700 !important;
letter-spacing: 1px;
color: #fffaf0 !important;
background: linear-gradient(180deg, #d8a44a, #a5761f) !important;
border: 1px solid rgba(224, 180, 92, .9) !important;
border-radius: 8px !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, .28) !important;
cursor: pointer;
}
.qp-back button:active { filter: brightness(1.12); transform: translateY(1px); }
@media (max-width: 480px) {
.qp-back { margin: 20px 0 32px !important; }
.qp-back button { padding: 10px 36px !important; font-size: 14.5px !important; }
}
/* ================= 底部导航 样式对齐（A 版真链接） ================= */
#tabbar a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: #bfe6ff;
font-size: 14px;
padding: 13px 0;
cursor: pointer;
position: relative;
font-family: inherit;
text-decoration: none !important;
-webkit-tap-highlight-color: transparent;
}
#tabbar a.on {
background: var(--p2);
color: #ffe9a8;
font-weight: 700;
}
/* 叠加主题变量 */
#tabbar a { color: #c2e2f2 !important; }
#tabbar a.on { color: var(--accent) !important; background: var(--p2) !important; }
/* 文字版：底部导航也走蓝色链接风格 */
body.text-mode #tabbar a {
background: transparent !important;
color: #0000cc !important;
font-size: 15px !important;
padding: 10px 0 !important;
}
body.text-mode #tabbar a.on {
color: #a52020 !important;
font-weight: 700 !important;
text-decoration: underline !important;
}
/* ================= 真链接 基础重置（A 版） ================= */
/* 所有用 实现的按钮：去掉下划线、蓝字，继承父级样式 */
#page a[href^="#/"],
#tabbar a,
.sub-foot a,
.page-head a {
text-decoration: none !important;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
#page a[href^="#/"] { color: inherit; }
/* 场景功能按钮（ 版）外观与原来完全一致 */
#page .scene-btns a {
display: flex;
align-items: center;
justify-content: center;
padding: 9px 0;
border-radius: 7px;
border: 1px solid var(--bd);
background: rgba(var(--btn-rgb), .55);
color: var(--text);
font-size: 13px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
}
#page .scene-btns a:active { background: rgba(var(--btn-rgb), .72); }
/* 底部「返回场景」 版 */
#page .sub-foot a.sub-home {
display: inline-block;
padding: 11px 46px;
border-radius: 8px;
border: 1px solid rgba(224, 180, 92, .9);
background: linear-gradient(180deg, #d8a44a, #a5761f);
color: #fffaf0;
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
}
/* 顶部返回按钮 版 */
#page .page-head a.ph-back {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
padding: 5px 14px;
border-radius: 4px;
background: #a5382f;
color: #fff;
border: 1px solid #c9564a;
font-size: 13px;
line-height: 1.4;
}
@media (max-width: 480px) {
#page .scene-btns a { padding: 5px 0; font-size: 11px; border-radius: 4px; }
#page .sub-foot a.sub-home { padding: 10px 38px; font-size: 14.5px; }
#page .page-head a.ph-back { padding: 4px 12px; font-size: 12.5px; left: 8px; }
}
/* ================= 离线 / 掉线提示遮罩 ================= */
#offline-mask {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(4, 18, 27, .86);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: omFade .22s ease;
}
@keyframes omFade { from { opacity: 0; } to { opacity: 1; } }
#offline-mask .om-box {
width: min(86vw, 340px);
padding: 26px 22px 22px;
text-align: center;
border-radius: 12px;
background: linear-gradient(180deg, #356f90, #2b5b78);
border: 1px solid rgba(150, 205, 235, .42);
box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
#offline-mask .om-ico { font-size: 40px; line-height: 1; margin-bottom: 12px; }
#offline-mask .om-title {
font-size: 17px;
font-weight: 700;
color: #fff3d0;
margin-bottom: 10px;
letter-spacing: 1px;
}
#offline-mask .om-sub {
font-size: 13.5px;
color: #cfe8f2;
margin-bottom: 18px;
line-height: 1.7;
}
#offline-mask .om-sub b { color: #ffd76e; font-size: 16px; margin: 0 2px; }
#offline-mask button {
padding: 9px 30px;
border-radius: 7px;
border: 1px solid rgba(224, 180, 92, .9);
background: linear-gradient(180deg, #d8a44a, #a5761f);
color: #fffaf0;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
#offline-mask button:active { filter: brightness(1.12); }
/* 文字版：白底黑字 */
body.text-mode #offline-mask { background: rgba(255, 255, 255, .92); }
body.text-mode #offline-mask .om-box {
background: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
body.text-mode #offline-mask .om-title { color: #a52020; }
body.text-mode #offline-mask .om-sub { color: #333; }
body.text-mode #offline-mask button {
background: none;
border: 1px solid #c3bda9;
color: #0000cc;
text-decoration: underline;
}