/* === jhfyl 主样式 — 古籍水墨风（融合 test2 + test1 设计语言）=== */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=ZCOOL+QingKe+HuangYou&family=Noto+Serif+SC:wght@400;500;600;700&family=Long+Cang&display=swap');
/* ============= 主题变量 · 4 套切换 ============= */
:root, [data-theme="default"] {
/* 古籍 — 米黄宣纸 */
--paper: #ede0c2;
--paper-2: #e3d3ad;
--paper-3: #d8c596;
--paper-edge: #b89c63;
--ink: #2a1d0f;
--ink-2: #4a3522;
--ink-soft: #6a4f33;
--vermilion: #a82a1f;
--vermilion-2:#8b1f15;
--gold: #b8893c;
--gold-2: #8c6422;
--jade: #4a6b4a;
--azure: #2a3a5a;
--hp: #b04030;
--mp: #3a6a8a;
--xp: #a87a2a;
--frame: var(--paper-edge);
--frame-dark: #6e562d;
--grid: #b89c6320;
--shadow: 0 2px 12px #2a1d0f22, 0 0 0 1px #00000010;
/* log 语义色（深色文字 on 米黄底）*/
--log-text: var(--ink-2);
--log-room: var(--vermilion-2);
--log-desc: var(--ink-soft);
--log-npc: var(--gold-2);
--log-item: var(--gold);
--log-mob: var(--vermilion);
--log-you: var(--jade);
--log-ok: var(--jade);
--log-warn: #b8702a;
--log-bad: var(--vermilion);
--log-gold: var(--gold-2);
--log-info: var(--azure);
--log-sys: var(--ink-soft);
--log-echo: #94774a;
}
[data-theme="night"] {
/* 夜战 — 黑底金墨 */
--paper: #161310;
--paper-2: #1f1a14;
--paper-3: #261f17;
--paper-edge: #5a4a30;
--ink: #e8d9b8;
--ink-2: #c8b78f;
--ink-soft: #9c8a64;
--vermilion: #c84030;
--vermilion-2:#b03020;
--gold: #d4a847;
--gold-2: #b8893c;
--jade: #6a8a6a;
--azure: #4a8aaa;
--hp: #d04838;
--mp: #4a8aaa;
--xp: #d4a847;
--frame: #6e562d;
--frame-dark: #8c6422;
--grid: #d4a84718;
--shadow: 0 4px 20px #00000080, 0 0 0 1px #00000040;
--log-text: #d8c898;
--log-room: var(--gold);
--log-desc: #b8a878;
--log-npc: #f0c060;
--log-item: #f0d878;
--log-mob: #e07060;
--log-you: #80c8a0;
--log-ok: #80d090;
--log-warn: #e0a040;
--log-bad: #ff6b5e;
--log-gold: #d4a850;
--log-info: #6cb8ff;
--log-sys: #786858;
--log-echo: #98886e;
}
[data-theme="indigo"] {
/* 夜行 — 藏蓝 */
--paper: #0e1626;
--paper-2: #131e34;
--paper-3: #1a2742;
--paper-edge: #3a5288;
--ink: #e0d6ba;
--ink-2: #b8c4d8;
--ink-soft: #7a8aa6;
--vermilion: #d4625a;
--vermilion-2:#b8443c;
--gold: #d8b870;
--gold-2: #b8893c;
--jade: #6a9a8a;
--azure: #6aa8d4;
--hp: #d06858;
--mp: #6aa8d4;
--xp: #d8b870;
--frame: #4a6294;
--frame-dark: #2a3a5a;
--grid: #d8b87018;
--shadow: 0 4px 24px #00000099, 0 0 0 1px #00000040;
--log-text: #d8d4c0;
--log-room: #d8b870;
--log-desc: #a8b8c8;
--log-npc: #d8b870;
--log-item: #f0d878;
--log-mob: #d4625a;
--log-you: #6a9a8a;
--log-ok: #80c8a0;
--log-warn: #e8a060;
--log-bad: #d4625a;
--log-gold: #d8b870;
--log-info: #6aa8d4;
--log-sys: #7a8aa6;
--log-echo: #94a4b8;
}
[data-theme="blood"] {
/* 血战 — 暗红 */
--paper: #1a0e0c;
--paper-2: #241412;
--paper-3: #2c1816;
--paper-edge: #6a2a22;
--ink: #ebd9b8;
--ink-2: #c8a888;
--ink-soft: #946854;
--vermilion: #e04830;
--vermilion-2:#c8302a;
--gold: #d4a847;
--gold-2: #b8893c;
--jade: #8a6a4a;
--azure: #8a6a4a;
--hp: #e04030;
--mp: #6a4a3a;
--xp: #d4a847;
--frame: #7a3a2a;
--frame-dark: #4a1a14;
--grid: #d4a84720;
--shadow: 0 4px 24px #00000099, 0 0 0 1px #00000040;
--log-text: #d8c098;
--log-room: #e04830;
--log-desc: #b89880;
--log-npc: #d4a847;
--log-item: #e8b860;
--log-mob: #e04830;
--log-you: #c8a888;
--log-ok: #a8c890;
--log-warn: #e8a060;
--log-bad: #e04830;
--log-gold: #d4a847;
--log-info: #8aa0c0;
--log-sys: #946854;
--log-echo: #98886e;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
body {
font-family: "Noto Serif SC", "Songti SC", "STSong", "STKaiti", "KaiTi", serif;
color: var(--ink);
background: var(--paper);
font-feature-settings: "palt";
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
font-size: 14px;
}
/* ============= 纸张底纹 + 山水墨痕 ============= */
.paper-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 40% at 18% 92%, color-mix(in srgb, var(--ink) 14%, transparent), transparent 70%),
radial-gradient(ellipse 50% 28% at 82% 96%, color-mix(in srgb, var(--ink) 10%, transparent), transparent 70%),
radial-gradient(ellipse 40% 25% at 60% 8%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%),
radial-gradient(ellipse 30% 20% at 8% 12%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 70%),
repeating-linear-gradient(92deg, transparent 0 3px, color-mix(in srgb, var(--ink) 3%, transparent) 3px 4px),
repeating-linear-gradient(2deg, transparent 0 5px, color-mix(in srgb, var(--ink) 2%, transparent) 5px 6px),
var(--paper);
}
.mountains {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
width: 100vw; height: 100vh;
opacity: 0.55;
mix-blend-mode: multiply;
}
[data-theme="night"] .mountains,
[data-theme="indigo"] .mountains,
[data-theme="blood"] .mountains { mix-blend-mode: screen; opacity: 0.18; }
.vignette {
position: fixed; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%,
color-mix(in srgb, var(--ink) 18%, transparent) 100%);
}
/* ============= 头部 · 印章标题 ============= */
header {
position: relative; z-index: 5;
display: flex; align-items: center; gap: 14px;
padding: 8px 18px;
border-bottom: 1px double var(--frame);
background: color-mix(in srgb, var(--paper) 80%, transparent);
backdrop-filter: blur(2px);
}
.title-block { display: flex; align-items: center; gap: 14px; }
.seal {
width: 50px; height: 50px;
background: var(--vermilion);
color: #fff5e6;
border-radius: 4px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
place-items: center;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 19px;
line-height: 1;
transform: rotate(-3deg);
box-shadow:
inset 0 0 0 2px #fff5e640,
inset 0 0 0 4px var(--vermilion-2),
0 1px 4px #00000040;
position: relative;
flex-shrink: 0;
}
.seal::before {
content: ""; position: absolute; inset: 0; border-radius: 4px;
background:
repeating-linear-gradient(45deg, transparent 0 3px, #00000018 3px 4px),
radial-gradient(circle at 30% 40%, transparent 60%, #00000022 100%);
pointer-events: none;
}
.seal span { z-index: 1; }
.title-text h1 {
margin: 0;
font-family: "Ma Shan Zheng", "ZCOOL QingKe HuangYou", "Noto Serif SC", serif;
font-weight: 400;
font-size: 28px;
letter-spacing: 0.15em;
color: var(--ink);
line-height: 1;
text-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 80%, transparent);
}
.title-text .sub {
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.18em;
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
margin-left: 4px;
}
header .actions { margin-left: auto; display: flex; gap: 8px; }
header button, .tool-btn {
background: transparent;
border: 1px solid var(--frame);
color: var(--ink-2);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 15px;
padding: 7px 16px;
cursor: pointer;
letter-spacing: 0.18em;
transition: all .15s;
border-radius: 0;
}
header button:hover {
background: color-mix(in srgb, var(--gold) 18%, transparent);
color: var(--ink);
border-color: var(--gold);
}
#btn-theme {
color: var(--vermilion);
border-color: var(--vermilion);
}
#btn-theme:hover {
background: color-mix(in srgb, var(--vermilion) 14%, transparent);
}
/* ============= 主布局 · 三栏 ============= */
.layout {
position: relative; z-index: 2;
height: calc(100vh - 56px);
display: grid;
grid-template-columns: 1fr 300px;
grid-template-rows: 1fr 36vh;
grid-template-areas: "map side" "log side";
gap: 10px;
padding: 10px 14px 12px;
}
/* ============= 雕花木框 panel 系统 ============= */
.panel {
position: relative;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper) 92%, var(--ink)) 0%,
var(--paper) 8%,
var(--paper) 92%,
color-mix(in srgb, var(--paper) 92%, var(--ink)) 100%);
border: 1px solid var(--frame);
box-shadow: var(--shadow);
display: flex; flex-direction: column;
min-height: 0;
}
/* 内框双线 */
.panel::before {
content: "";
position: absolute; inset: 4px;
border: 1px solid color-mix(in srgb, var(--frame) 60%, transparent);
pointer-events: none;
z-index: 1;
}
/* 四角云纹（CSS 实现）*/
.panel > .corner {
position: absolute;
width: 22px; height: 22px;
z-index: 3;
pointer-events: none;
border-color: var(--frame-dark);
border-style: solid;
border-width: 0;
}
.panel > .corner.tl { top: 2px; left: 2px; border-top-width: 2px; border-left-width: 2px; }
.panel > .corner.tr { top: 2px; right: 2px; border-top-width: 2px; border-right-width: 2px; }
.panel > .corner.bl { bottom: 2px; left: 2px; border-bottom-width: 2px; border-left-width: 2px; }
.panel > .corner.br { bottom: 2px; right: 2px; border-bottom-width: 2px; border-right-width: 2px; }
.panel > .corner::before {
content: ""; position: absolute;
width: 6px; height: 6px;
background: var(--vermilion);
opacity: 0.7;
}
.panel > .corner.tl::before { top: 2px; left: 2px; }
.panel > .corner.tr::before { top: 2px; right: 2px; }
.panel > .corner.bl::before { bottom: 2px; left: 2px; }
.panel > .corner.br::before { bottom: 2px; right: 2px; }
/* ============= 地图面板 ============= */
.map-pane {
grid-area: map;
overflow: hidden;
background:
radial-gradient(ellipse 60% 60% at 50% 50%, color-mix(in srgb, var(--paper-3) 50%, transparent), transparent),
var(--paper-2);
/* 网格 */
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 40px 40px;
}
.map-pane svg#map {
width: 100%; height: 100%;
display: block;
cursor: grab;
position: relative;
z-index: 2;
}
.map-pane svg#map:active { cursor: grabbing; }
/* 罗盘 · 左上 */
.map-compass {
position: absolute;
left: 14px; top: 14px;
width: 52px; height: 52px;
color: var(--ink-soft);
z-index: 5;
opacity: 0.85;
pointer-events: none;
}
/* 图例 · 左下 */
.map-legend {
position: absolute;
left: 14px; bottom: 14px;
display: flex;
gap: 12px;
flex-wrap: wrap;
font-size: 11px;
color: var(--ink-soft);
background: color-mix(in srgb, var(--paper) 78%, transparent);
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
backdrop-filter: blur(2px);
z-index: 5;
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
letter-spacing: 0.1em;
}
.legend-dot {
display: inline-flex;
align-items: center;
gap: 5px;
}
.legend-dot::before {
content: "";
width: 9px; height: 9px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
}
.legend-dot.city::before { background: var(--node-safe); }
.legend-dot.wild::before { background: var(--node-wild); }
.legend-dot.battle::before { background: var(--node-battle); }
.legend-dot.hq::before { background: var(--node-hq); }
.legend-dot.dungeon::before { background: var(--node-dungeon); }
/* 缩放按钮 — test2 风 */
.map-zoom {
position: absolute;
top: 14px; right: 14px;
display: flex; flex-direction: column; gap: 4px;
z-index: 5;
}
.map-zoom button {
width: 30px; height: 30px;
background: color-mix(in srgb, var(--paper) 90%, transparent);
border: 1px solid var(--frame);
color: var(--ink);
cursor: pointer;
font-family: "Noto Serif SC", serif;
font-size: 15px;
font-weight: normal;
display: grid; place-items: center;
backdrop-filter: blur(2px);
transition: all .15s;
}
.map-zoom button:hover {
background: var(--paper);
border-color: var(--vermilion);
color: var(--vermilion);
}
/* ============= 侧栏 ============= */
.side-pane {
grid-area: side;
overflow-y: auto;
padding: 14px 16px;
position: relative; z-index: 2;
}
.side-pane h2 {
font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 15px;
letter-spacing: 0.25em;
font-weight: 400;
color: var(--vermilion);
margin: 14px 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid color-mix(in srgb, var(--vermilion) 30%, transparent);
display: flex; align-items: center; gap: 8px;
}
.side-pane h2:first-child { margin-top: 6px; }
.side-pane h2::before {
content: ""; width: 7px; height: 7px;
background: var(--vermilion);
transform: rotate(45deg);
}
.stat-row {
display: flex; justify-content: space-between;
font-size: 13px; padding: 3px 2px;
border-bottom: 1px dotted color-mix(in srgb, var(--frame) 50%, transparent);
}
.stat-row .k { color: var(--ink-soft); letter-spacing: 0.08em; }
.stat-row .v { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }
/* ============= 毛笔晕染血条 ============= */
.bar {
position: relative;
height: 14px;
margin: 2px 0 8px;
background:
repeating-linear-gradient(90deg,
color-mix(in srgb, var(--ink) 6%, transparent) 0 2px,
transparent 2px 5px),
var(--paper-3);
border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
overflow: hidden;
}
.bar > span {
display: block; height: 100%;
position: relative;
transition: width .4s cubic-bezier(.5, 0, .3, 1);
-webkit-mask-image: linear-gradient(90deg, #000 60%,
color-mix(in srgb, #000 60%, transparent) 85%, transparent 100%);
mask-image: linear-gradient(90deg, #000 60%,
color-mix(in srgb, #000 60%, transparent) 85%, transparent 100%);
box-shadow: inset 0 0 8px color-mix(in srgb, var(--ink) 30%, transparent);
}
.bar > span::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 30% 60% at 20% 50%, #00000020, transparent 70%),
radial-gradient(ellipse 25% 50% at 60% 40%, #00000018, transparent 70%),
radial-gradient(ellipse 20% 50% at 90% 60%, #00000022, transparent 70%);
}
.bar.hp > span { background: var(--hp); }
.bar.mp > span { background: var(--mp); }
.bar.exp > span { background: var(--xp); }
.bar.ap > span { background: var(--gold); }
.bar.sta > span { background: linear-gradient(90deg, #8a6428, #d4a847); }
.equipline {
font-size: 13px;
color: var(--ink-2);
padding: 2px 2px;
letter-spacing: 0.5px;
}
.equipline b { color: var(--vermilion); font-weight: 500; }
.invlist, .factlist {
font-size: 13px;
color: var(--ink-2);
}
.invlist > div, .factlist > div {
padding: 2px 6px;
cursor: pointer;
border-radius: 2px;
transition: all .15s;
border-bottom: 1px dotted color-mix(in srgb, var(--frame) 30%, transparent);
}
.invlist > div:hover, .factlist > div:hover {
background: color-mix(in srgb, var(--gold) 18%, transparent);
color: var(--ink);
}
/* ============= 日志面板 ============= */
.log-pane {
grid-area: log;
overflow: hidden;
position: relative; z-index: 2;
}
/* 频道分页 */
.log-tabs {
display: flex;
gap: 0;
padding: 4px 12px 0;
background: var(--paper-2);
border-bottom: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
position: relative;
z-index: 3;
}
.log-tabs .ltab {
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 13px;
color: var(--ink-soft);
background: transparent;
border: none;
padding: 6px 14px;
cursor: pointer;
letter-spacing: 0.18em;
position: relative;
transition: color .15s;
}
.log-tabs .ltab::after {
content: "";
position: absolute;
left: 50%; right: 50%; bottom: -1px;
height: 2px;
background: var(--vermilion);
transition: all .25s;
}
.log-tabs .ltab:hover { color: var(--ink); }
.log-tabs .ltab.active {
color: var(--vermilion);
font-weight: 500;
}
.log-tabs .ltab.active::after { left: 8px; right: 8px; }
.log-tabs .ltab .badge {
display: inline-block;
background: var(--vermilion);
color: #fff5e6;
border-radius: 8px;
padding: 0 6px;
font-size: 11px;
margin-left: 4px;
font-family: "Noto Serif SC", serif;
letter-spacing: 0;
}
/* 过滤逻辑：根据 #screen[data-filter] 隐藏不匹配的行 */
#screen[data-filter="jh"] .line[data-ch="chat"] { display: none; }
#screen[data-filter="jh"] .line[data-ch="sys"] { display: none; }
#screen[data-filter="chat"] .line:not([data-ch="chat"]) { display: none; }
#screen[data-filter="sys"] .line:not([data-ch="sys"]) { display: none; }
#screen {
flex: 1;
overflow-y: auto;
padding: 14px 18px;
font-family: "Noto Serif SC", "Microsoft YaHei", serif;
font-size: 14px;
line-height: 1.85;
color: var(--log-text);
}
#screen .line { margin: 2px 0; word-wrap: break-word; }
#screen .room-name {
color: var(--log-room);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 17px;
letter-spacing: 0.15em;
font-weight: 400;
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 8px;
}
#screen .room-name::before {
content: "❖";
color: var(--vermilion);
font-size: 13px;
}
#screen .desc { color: var(--log-desc); text-indent: 2em; }
#screen .npc { color: var(--log-npc); }
#screen .item { color: var(--log-item); }
#screen .mob { color: var(--log-mob); }
#screen .you { color: var(--log-you); }
#screen .sys { color: var(--log-sys); font-style: italic; }
#screen .ok { color: var(--log-ok); }
#screen .warn { color: var(--log-warn); }
#screen .bad { color: var(--log-bad); }
#screen .gold { color: var(--log-gold); font-weight: 500; }
#screen .info { color: var(--log-info); }
#screen .hr { color: color-mix(in srgb, var(--frame) 60%, transparent); }
#screen .echo { color: var(--log-echo); }
#screen .echo::before { content: "› "; color: var(--vermilion); }
#screen .clickable {
color: var(--vermilion);
cursor: pointer;
border-bottom: 1px dashed color-mix(in srgb, var(--vermilion) 40%, transparent);
text-decoration: none;
padding: 0 2px;
margin: 0 2px;
transition: all .15s;
}
#screen .clickable:hover {
background: color-mix(in srgb, var(--vermilion) 12%, transparent);
border-bottom-color: var(--vermilion);
}
#screen .mob-link {
color: var(--log-mob);
cursor: pointer;
border-bottom: 1px dashed color-mix(in srgb, var(--log-mob) 40%, transparent);
padding: 0 2px;
}
#screen .mob-link:hover { background: color-mix(in srgb, var(--log-mob) 14%, transparent); }
#screen .item-link {
color: var(--log-item);
cursor: pointer;
border-bottom: 1px dashed color-mix(in srgb, var(--log-item) 40%, transparent);
padding: 0 2px;
}
#screen .npc-link {
color: var(--log-npc);
cursor: pointer;
border-bottom: 1px dashed color-mix(in srgb, var(--log-npc) 40%, transparent);
padding: 0 2px;
}
/* ============= 命令行 · 竹简风 ============= */
.cmd-row {
border-top: 1px solid var(--frame);
padding: 7px 12px;
display: flex; gap: 10px; align-items: center;
background: var(--paper-2);
position: relative;
box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 14%, transparent);
}
#prompt {
color: var(--vermilion);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 20px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
#cmd {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--ink);
font-family: "Noto Serif SC", "Microsoft YaHei", serif;
font-size: 14px;
letter-spacing: 0.05em;
padding: 5px 0;
caret-color: var(--vermilion);
}
#cmd::placeholder { color: var(--ink-soft); font-style: italic; }
#cmd-send {
background: var(--vermilion);
color: #fff5e6;
border: none;
padding: 4px 14px;
cursor: pointer;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 15px;
letter-spacing: 0.2em;
transition: background .15s;
flex-shrink: 0;
}
#cmd-send:hover { background: var(--vermilion-2); }
/* 快捷键栏 — 竹简刻线 */
.quickbar {
padding: 8px 12px;
border-top: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
display: flex; flex-wrap: wrap; gap: 5px;
background:
repeating-linear-gradient(180deg,
var(--paper-3) 0 28px,
color-mix(in srgb, var(--paper-3) 90%, var(--ink)) 28px 29px);
align-items: center;
}
.quickbar button {
background: color-mix(in srgb, var(--paper) 85%, transparent);
border: 1px solid color-mix(in srgb, var(--frame) 60%, transparent);
color: var(--ink-2);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 14px;
padding: 6px 13px;
cursor: pointer;
letter-spacing: 0.12em;
transition: all .12s;
}
.quickbar button:hover {
background: var(--paper);
color: var(--ink);
border-color: var(--gold);
}
/* 玩法面板入口（武学 / 派系 / 任务 / 线索 / 活动 / 大事 / 身份 / 神兵）*/
.quickbar button.qb-menu {
background: color-mix(in srgb, var(--gold) 8%, var(--paper) 92%);
border-color: color-mix(in srgb, var(--gold) 35%, var(--frame) 65%);
color: var(--ink);
}
.quickbar button.qb-menu:hover {
background: color-mix(in srgb, var(--gold) 22%, var(--paper) 78%);
border-color: var(--vermilion);
}
/* ============= SVG 地图节点 · 多层墨晕 ============= */
svg .edge {
stroke: color-mix(in srgb, var(--ink-soft) 55%, transparent);
stroke-width: 1.4;
stroke-dasharray: 4 3;
fill: none;
opacity: 0.55;
}
svg .edge.adj {
stroke: var(--vermilion);
stroke-width: 2.4;
stroke-dasharray: none;
opacity: 1;
filter: drop-shadow(0 0 2px color-mix(in srgb, var(--vermilion) 60%, transparent));
}
svg .region {
stroke: color-mix(in srgb, var(--ink) 40%, transparent);
stroke-width: 1.2;
fill: rgba(255, 255, 255, 0.0);
}
svg .region.safe { fill: color-mix(in srgb, var(--jade) 22%, transparent); }
svg .region.wild { fill: color-mix(in srgb, var(--vermilion) 18%, transparent); }
svg .region.battle { fill: color-mix(in srgb, var(--azure) 18%, transparent); }
svg .region.hq { fill: color-mix(in srgb, var(--gold) 25%, transparent); }
/* 区域大字水印（test2 风 — 大灰字浮在底纹上）*/
svg .region-watermark {
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 38px;
letter-spacing: 0.3em;
fill: var(--ink-soft);
opacity: 0.18;
text-anchor: middle;
pointer-events: none;
user-select: none;
}
/* 区域墨晕（大椭圆透明色斑）*/
svg .region-blot {
opacity: 0.20;
filter: url(#ink-blur);
pointer-events: none;
}
/* 节点配色（亮一些，确保米黄底上可见）*/
:root, [data-theme="default"] {
--node-safe: #5a8a3a; /* 比 --jade 更鲜的草绿 */
--node-wild: #c8302a; /* 比 --vermilion 更亮的朱砂 */
--node-battle: #5a3a8a; /* 紫 — 副本 */
--node-hq: #d4a847; /* 亮金 — 门派 */
--node-dungeon: #4a4a8a; /* 暗紫蓝 — 地下/秘境，避免纯黑 */
}
[data-theme="night"] {
--node-safe: #80c8a0;
--node-wild: #e07060;
--node-battle: #a070d0;
--node-hq: #f0c060;
--node-dungeon: #6a8ad4;
}
[data-theme="indigo"] {
--node-safe: #80c8a0;
--node-wild: #d4625a;
--node-battle: #c890e0;
--node-hq: #d8b870;
--node-dungeon: #6aa8d4;
}
[data-theme="blood"] {
--node-safe: #a8c890;
--node-wild: #e8503a;
--node-battle: #c87060;
--node-hq: #d4a847;
--node-dungeon: #8a6a5a;
}
/* 节点 · 三层墨晕（n-glow 外发散 / n-ring 中圈 / n-core 内核）*/
svg .node { cursor: pointer; transition: filter .15s; }
svg .node:hover { filter: brightness(1.15); }
svg .node .n-glow { opacity: 0.32; pointer-events: none; }
svg .node .n-ring {
fill: none;
stroke-width: 1.6;
opacity: 0.75;
pointer-events: none;
}
svg .node .n-core {
stroke: var(--paper);
stroke-width: 1.6;
filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ink) 50%, transparent));
transition: r 0.2s;
}
svg .node .n-mark {
fill: var(--paper);
opacity: 0.9;
pointer-events: none;
}
/* 各 type 上色 — glow/core 用 fill，ring 用 stroke */
svg .node.safe .n-glow, svg .node.safe .n-core { fill: var(--node-safe); }
svg .node.safe .n-ring { stroke: var(--node-safe); }
svg .node.wild .n-glow, svg .node.wild .n-core { fill: var(--node-wild); }
svg .node.wild .n-ring { stroke: var(--node-wild); }
svg .node.battle .n-glow, svg .node.battle .n-core { fill: var(--node-battle); }
svg .node.battle .n-ring { stroke: var(--node-battle); }
svg .node.hq .n-glow, svg .node.hq .n-core { fill: var(--node-hq); }
svg .node.hq .n-ring { stroke: var(--node-hq); }
svg .node.dungeon .n-glow, svg .node.dungeon .n-core { fill: var(--node-dungeon); }
svg .node.dungeon .n-ring { stroke: var(--node-dungeon); }
/* 城内子节点 · 按"功能"上色（覆盖 type 色，让出口一眼分得清）*/
:root, [data-theme="default"] {
--fn-shop: #c98b35; /* 商店 — 金 */
--fn-inn: #4a8a8a; /* 客栈 — 青 */
--fn-academy: #8a4aaa; /* 武馆 — 紫 */
--fn-faction: #b8232a; /* 门派门面 — 朱砂 */
--fn-orgs: #4a6b8a; /* 组织 — 蓝 */
--fn-gather: #5a8a3a; /* 采集 — 草绿 */
}
[data-theme="night"] {
--fn-shop: #f0c060;
--fn-inn: #6acccc;
--fn-academy: #c890e0;
--fn-faction: #e07060;
--fn-orgs: #6aa8d4;
--fn-gather: #80c8a0;
}
[data-theme="indigo"] {
--fn-shop: #d8b870;
--fn-inn: #6acccc;
--fn-academy: #c890e0;
--fn-faction: #d4625a;
--fn-orgs: #6aa8d4;
--fn-gather: #8acca0;
}
[data-theme="blood"] {
--fn-shop: #d4a847;
--fn-inn: #8aa890;
--fn-academy: #c87060;
--fn-faction: #e8503a;
--fn-orgs: #c8a888;
--fn-gather: #a8c890;
}
svg .node.fn-shop .n-glow, svg .node.fn-shop .n-core { fill: var(--fn-shop); }
svg .node.fn-shop .n-ring { stroke: var(--fn-shop); }
svg .node.fn-inn .n-glow, svg .node.fn-inn .n-core { fill: var(--fn-inn); }
svg .node.fn-inn .n-ring { stroke: var(--fn-inn); }
svg .node.fn-academy .n-glow, svg .node.fn-academy .n-core { fill: var(--fn-academy); }
svg .node.fn-academy .n-ring { stroke: var(--fn-academy); }
svg .node.fn-faction .n-glow, svg .node.fn-faction .n-core { fill: var(--fn-faction); }
svg .node.fn-faction .n-ring { stroke: var(--fn-faction); }
svg .node.fn-orgs .n-glow, svg .node.fn-orgs .n-core { fill: var(--fn-orgs); }
svg .node.fn-orgs .n-ring { stroke: var(--fn-orgs); }
svg .node.fn-gather .n-glow, svg .node.fn-gather .n-core { fill: var(--fn-gather); }
svg .node.fn-gather .n-ring { stroke: var(--fn-gather); }
/* 城内地图图例 · 6 类功能色 */
.legend-dot.fn-shop::before { background: var(--fn-shop); }
.legend-dot.fn-inn::before { background: var(--fn-inn); }
.legend-dot.fn-academy::before { background: var(--fn-academy); }
.legend-dot.fn-faction::before { background: var(--fn-faction); }
.legend-dot.fn-orgs::before { background: var(--fn-orgs); }
.legend-dot.fn-gather::before { background: var(--fn-gather); }
/* 后兼：旧版的纯 circle 节点（无 n-* 子类）也用基色 */
svg .node circle:not(.n-glow):not(.n-ring):not(.n-core):not(.n-mark) {
stroke: var(--ink);
stroke-width: 1.5;
}
svg .node text {
fill: var(--ink);
font-size: 12px;
text-anchor: middle;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
pointer-events: none;
user-select: none;
font-weight: 500;
letter-spacing: 1px;
paint-order: stroke;
stroke: var(--paper);
stroke-width: 3px;
stroke-linejoin: round;
}
svg .node.current .n-core {
stroke: var(--vermilion);
stroke-width: 2.5;
filter: drop-shadow(0 0 8px var(--vermilion));
}
svg .node.current .n-ring {
opacity: 0.85;
animation: nodeCurrentPulse 2.4s ease-in-out infinite;
}
@keyframes nodeCurrentPulse {
0%, 100% { stroke-width: 1.5; opacity: 0.7; }
50% { stroke-width: 3.5; opacity: 0.4; }
}
svg .here-ring {
fill: none;
stroke: var(--vermilion);
stroke-width: 2.5;
transform-origin: center center;
animation: hereRing 2s ease-in-out infinite;
}
svg .here-label {
fill: var(--vermilion);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-weight: bold;
font-size: 13px;
text-anchor: middle;
animation: hereLabel 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes hereRing {
0% { stroke-opacity: 1; r: 16; stroke-width: 2.5; }
50% { stroke-opacity: 0.4; r: 26; stroke-width: 1; }
100% { stroke-opacity: 1; r: 16; stroke-width: 2.5; }
}
@keyframes hereLabel {
0%, 100% { fill-opacity: 1; }
50% { fill-opacity: 0.5; }
}
svg .node.adj:hover circle { r: 13; }
svg .legend rect {
stroke: var(--frame);
stroke-width: 1;
fill: color-mix(in srgb, var(--paper) 80%, transparent);
}
svg .legend text {
fill: var(--ink);
font-size: 11px;
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
}
svg .compass { fill: var(--ink-soft); font-size: 10px; opacity: 0.65; }
/* ============= 弹窗 · 古卷卡片 ============= */
#modal-root {
position: fixed; inset: 0;
pointer-events: none;
z-index: 300;
}
.modal {
position: absolute; inset: 0;
background: color-mix(in srgb, var(--ink) 60%, transparent);
backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
pointer-events: auto;
}
.modal .panel {
background:
radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 30%),
linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 100%);
color: var(--ink);
border: 1px solid var(--frame);
border-radius: 0;
padding: 22px 26px;
min-width: 340px;
max-width: 580px;
max-height: 84vh;
/* 用户钦点 2026-05-09：防内容横向溢出右边框（包裹长物品名 / 长 desc 时 row 撑出 panel） */
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
.modal.panel-modal .panel {
max-width: 760px;
width: 90vw;
box-shadow:
0 0 0 1px var(--paper-edge),
0 0 0 4px var(--frame-dark),
0 12px 32px color-mix(in srgb, var(--ink) 60%, transparent);
position: relative;
}
.modal .panel::after {
content: "";
position: absolute;
inset: 6px;
border: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
pointer-events: none;
z-index: 1;
}
.modal.bigmap .panel {
max-width: 96vw;
width: min(96vw, 1500px);
max-height: 92vh;
padding: 14px 16px;
}
.modal.bigmap svg {
width: 100%; height: auto;
max-height: 82vh;
display: block;
}
.modal h3 {
margin: 0 0 12px;
color: var(--vermilion);
border-bottom: 1px solid color-mix(in srgb, var(--vermilion) 35%, transparent);
padding-bottom: 8px;
letter-spacing: 0.25em;
font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-weight: 400;
font-size: 22px;
text-shadow: 1px 1px 0 color-mix(in srgb, var(--vermilion) 14%, transparent);
}
.modal p {
margin: 6px 0;
color: var(--ink-2);
font-size: 14px;
line-height: 1.7;
}
.modal .row { display: flex; gap: 10px; margin: 10px 0; box-sizing: border-box; }
.modal .row.cols { flex-wrap: wrap; }
/* 用户钦点 2026-05-09：panel-modal 内（如包裹/装备/状态）flex item 默认 min-width:auto
长 desc / 物品名会撑宽 row → 整 row 超出 panel 右边框。强制 0 让长文本可换行/截断。
范围限定 panel-modal 防影响其他 modal（faction-card 等依赖 width）的现有布局。 */
.modal.panel-modal .row { min-width: 0; }
.modal.panel-modal .row > * { min-width: 0; }
.modal input, .modal select {
flex: 1;
padding: 7px 10px;
font-family: "Noto Serif SC", serif;
font-size: 14px;
border: 1px solid var(--paper-edge);
background: color-mix(in srgb, var(--paper) 60%, var(--paper-2));
color: var(--ink);
transition: all .2s;
}
.modal input:focus, .modal select:focus {
outline: none;
border-color: var(--vermilion);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--vermilion) 20%, transparent);
}
.modal button {
padding: 7px 16px;
border: 1px solid var(--frame);
background: var(--paper-2);
color: var(--ink);
cursor: pointer;
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 14px;
letter-spacing: 0.15em;
transition: all .2s;
}
.modal button:hover {
background: var(--vermilion);
color: #fff5e6;
border-color: var(--vermilion-2);
}
.modal button.primary {
background: var(--vermilion);
color: #fff5e6;
border-color: var(--vermilion-2);
font-weight: 500;
}
.modal button.primary:hover {
background: var(--vermilion-2);
}
.modal .choices {
display: flex; flex-direction: column;
gap: 6px; margin-top: 12px;
}
.modal .choices button { text-align: left; }
.modal .faction-card {
border: 1px solid var(--paper-edge);
padding: 10px;
cursor: pointer;
background: color-mix(in srgb, var(--paper) 60%, var(--paper-2));
width: calc(50% - 4px);
transition: all .2s;
}
.modal .faction-card:hover {
background: var(--paper);
border-color: var(--frame-dark);
}
.modal .faction-card.sel {
border: 2px solid var(--vermilion);
background: var(--paper);
box-shadow: 0 0 0 1px var(--vermilion);
}
.modal .faction-card .nm {
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-weight: 400;
font-size: 17px;
letter-spacing: 0.1em;
color: var(--vermilion);
}
.modal .faction-card .al { font-size: 11px; color: var(--ink-soft); margin-top: 3px; font-style: italic; }
.modal .faction-card .sk { font-size: 12px; margin-top: 4px; color: var(--ink-2); }
.gender-btn {
padding: 7px 22px;
border: 2px solid var(--paper-edge);
background: var(--paper);
color: var(--ink);
cursor: pointer;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 16px;
letter-spacing: 0.18em;
transition: all .2s;
}
.gender-btn:hover { background: var(--paper-2); }
.gender-btn.sel {
border-color: var(--vermilion);
background: var(--paper-2);
color: var(--vermilion);
}
/* ============= 战斗弹窗 ============= */
.combat .panel { min-width: 480px; max-width: 660px; }
.combat .lineup { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.combat .side { flex: 1; }
.combat .side h4 {
margin: 4px 0; font-size: 15px;
color: var(--vermilion);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
letter-spacing: 0.2em;
font-weight: 400;
}
.combat .fighter {
background: color-mix(in srgb, var(--paper) 50%, var(--paper-2));
border: 1px solid var(--paper-edge);
padding: 7px 10px; margin-bottom: 7px;
}
.combat .fighter .nm { font-weight: 600; }
.combat .fighter .ap-bar {
height: 4px;
background: var(--paper-3);
overflow: hidden;
}
.combat .fighter .ap-bar > span {
display: block; height: 100%;
background: var(--vermilion);
}
.combat .fighter .hp-bar {
height: 8px;
background: var(--paper-3);
overflow: hidden;
margin: 3px 0;
}
.combat .fighter .hp-bar > span {
display: block; height: 100%;
background: var(--hp);
}
.combat .fighter.target { box-shadow: 0 0 0 2px var(--vermilion); }
.combat .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.combat .log {
background: color-mix(in srgb, var(--ink) 78%, transparent);
color: var(--paper-2);
padding: 9px;
max-height: 150px;
overflow-y: auto;
font-family: "Noto Serif SC", "Microsoft YaHei", monospace;
font-size: 12px;
line-height: 1.6;
}
/* ============= 落款印章（右下）============= */
/* ============= 26d · UI polish v1 · 头部 status pill + 侧栏 char-header + combat 3-grid + weapon card + 年份水印 ============= */
/* —— TopBar 状态 pill（在线 + 时辰）—— */
header .status-pills {
display: flex; gap: 6px; align-items: center;
margin-left: 4px;
}
header .status-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
background: color-mix(in srgb, var(--paper) 88%, transparent);
border: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
border-radius: 11px;
font-family: "Noto Serif SC", serif;
font-size: 11px;
color: var(--ink);
letter-spacing: 0.08em;
white-space: nowrap;
backdrop-filter: blur(1px);
line-height: 1.2;
}
header .status-pill:empty { display: none; }
/* —— 侧栏 char-header（avatar + 名字 + 派系徽章 + lv+境界）—— */
.side-pane .char-header {
display: flex; align-items: center; gap: 12px;
padding: 10px 0 12px;
margin-bottom: 4px;
border-bottom: 1px dashed color-mix(in srgb, var(--frame) 50%, transparent);
}
.side-pane .char-header #avatar-slot {
flex-shrink: 0;
width: 64px; height: 64px;
border-radius: 50%;
border: 2px solid var(--gold);
outline: 1px solid var(--vermilion);
outline-offset: 2px;
background:
radial-gradient(circle at 35% 30%, var(--paper) 0%, var(--paper-2) 60%, var(--paper-3) 130%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
box-shadow: 0 2px 8px var(--shadow), inset 0 0 8px color-mix(in srgb, var(--ink) 14%, transparent);
}
.side-pane .char-header #avatar-slot > * {
max-width: 100%; max-height: 100%;
}
.side-pane .char-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.side-pane .char-info .char-name-row {
display: flex; align-items: baseline; gap: 4px;
}
.side-pane .char-info .char-name {
font-family: "Noto Serif SC", serif;
font-size: 18px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.08em;
line-height: 1.2;
}
.side-pane .char-info .char-sect-pill {
display: inline-block;
align-self: flex-start;
padding: 2px 8px;
background: var(--vermilion);
color: #fff5e6;
font-family: "Noto Serif SC", serif;
font-size: 10px;
letter-spacing: 0.1em;
border-radius: 1px;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-pane .char-info .char-lv-realm {
display: flex; align-items: center; gap: 6px;
font-size: 12px;
color: var(--ink-soft);
}
.side-pane .char-info .char-lv-realm b {
color: var(--vermilion);
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.side-pane .char-info .char-lv-realm .sep { color: var(--gold); }
.side-pane .char-info .char-lv-realm .realm {
color: var(--azure);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
letter-spacing: 0.1em;
}
/* —— 战斗三维 3-grid（攻/防/身法 横向 3 卡）—— */
.side-pane .combat-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 8px 0 10px;
margin: 4px 0;
border-top: 1px dashed color-mix(in srgb, var(--frame) 50%, transparent);
border-bottom: 1px dashed color-mix(in srgb, var(--frame) 50%, transparent);
}
.side-pane .combat-grid .combat-cell {
text-align: center;
padding: 4px 2px;
}
.side-pane .combat-grid .combat-cell .k {
display: block;
font-size: 10px;
color: var(--ink-soft);
letter-spacing: 0.18em;
line-height: 1.2;
}
.side-pane .combat-grid .combat-cell .v {
display: block;
margin-top: 3px;
font-family: "Noto Serif SC", serif;
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.side-pane .combat-grid .combat-cell .v.atk { color: var(--vermilion); }
.side-pane .combat-grid .combat-cell .v.def { color: var(--azure); }
.side-pane .combat-grid .combat-cell .v.spd { color: var(--jade); }
/* —— 主兵 weapon card（带 SVG 剑）—— */
.side-pane .weapon-card {
position: relative;
margin: 6px 0 4px;
padding: 10px 12px;
background: linear-gradient(135deg, var(--paper) 0%, var(--paper-3) 100%);
border: 1px solid var(--gold);
border-radius: 2px;
display: flex; align-items: center; gap: 10px;
box-shadow: 0 1px 3px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 80%, white);
}
.side-pane .weapon-card .weapon-icon {
flex-shrink: 0;
width: 36px; height: 36px;
}
.side-pane .weapon-card .weapon-body {
flex: 1; min-width: 0;
}
.side-pane .weapon-card .weapon-tag {
font-size: 9px;
color: var(--gold);
letter-spacing: 0.2em;
margin-bottom: 2px;
}
.side-pane .weapon-card .weapon-name {
font-size: 13px;
line-height: 1.4;
color: var(--ink);
word-wrap: break-word;
}
.side-pane .weapon-card .weapon-name b {
color: var(--vermilion);
font-weight: 600;
letter-spacing: 0.05em;
}
/* —— 侧栏右下年份水印 —— */
.side-pane .year-watermark {
position: absolute;
bottom: 12px; right: 14px;
font-family: "Long Cang", "Ma Shan Zheng", serif;
font-size: 11px;
color: var(--vermilion);
opacity: 0.55;
letter-spacing: 0.3em;
pointer-events: none;
transform: rotate(-2deg);
z-index: 4;
}
/* ============= 26e UI v2 · 主体 7 处美化 · 头部按钮 + 底部 cmd/quickbar + 侧栏 h2 + 装备行 + map 节点 + 战斗 modal + 滚动条 ============= */
/* —— 头部 action 按钮重做（古卷 · 烫金边 + 内嵌纸纹）—— */
header .actions {
margin-left: auto;
display: flex; gap: 6px;
align-items: center;
}
header .actions button,
header .actions .tool-btn {
position: relative;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-hi, #fbf3da) 80%, transparent) 0%,
color-mix(in srgb, var(--paper) 90%, transparent) 100%);
border: 1px solid var(--frame);
outline: 1px solid color-mix(in srgb, var(--frame) 30%, transparent);
outline-offset: 1px;
color: var(--ink);
font-family: "Noto Serif SC", "ZCOOL XiaoWei", serif;
font-size: 13px; font-weight: 600;
padding: 6px 13px;
cursor: pointer;
letter-spacing: 0.18em;
border-radius: 2px;
transition: all .15s;
box-shadow:
0 1px 2px var(--shadow),
inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, white);
line-height: 1.3;
}
header .actions button:hover {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--gold) 18%, var(--paper)) 0%,
color-mix(in srgb, var(--gold) 8%, var(--paper)) 100%);
border-color: var(--gold);
color: var(--ink);
transform: translateY(-1px);
box-shadow:
0 2px 6px color-mix(in srgb, var(--shadow) 80%, transparent),
inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
header .actions #btn-theme {
color: var(--vermilion);
border-color: var(--vermilion);
outline-color: color-mix(in srgb, var(--vermilion) 30%, transparent);
}
header .actions #btn-theme:hover {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--vermilion) 14%, var(--paper)) 0%,
color-mix(in srgb, var(--vermilion) 6%, var(--paper)) 100%);
border-color: var(--vermilion-2);
}
header .actions #btn-home {
background:
linear-gradient(180deg, var(--vermilion) 0%, var(--vermilion-2) 100%) !important;
border-color: var(--vermilion-2) !important;
color: #fff5e6 !important;
font-weight: 700;
outline-color: color-mix(in srgb, var(--vermilion) 50%, transparent);
box-shadow:
0 2px 6px color-mix(in srgb, var(--vermilion-2) 50%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff5e6 30%, transparent) !important;
}
/* —— 侧栏 section header 加 钻石 + 双线 —— */
.side-pane h2 {
position: relative;
display: flex; align-items: center; gap: 8px;
margin: 14px 0 8px;
padding: 6px 0 5px;
font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.3em;
color: var(--vermilion);
border-bottom: 1.5px solid color-mix(in srgb, var(--vermilion) 50%, transparent);
}
.side-pane h2::before {
content: "";
width: 8px; height: 8px;
background: var(--vermilion);
transform: rotate(45deg);
box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--vermilion) 30%, transparent);
}
.side-pane h2::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, color-mix(in srgb, var(--vermilion) 30%, transparent), transparent);
margin-left: 4px;
}
.side-pane h2:first-child { margin-top: 6px; }
/* —— 装备行（护甲/鞋/饰品/秘宝）全部卡片化 · v5 接 prototype RightSidebar 装备段 —— */
/* 每行变 paper 卡片 · 不同 slot 颜色编码 left border + slot icon · 强可见 */
.side-pane .equipline {
display: flex; align-items: center; gap: 8px;
margin: 6px 0;
padding: 8px 10px 8px 12px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-hi, #fbf3da) 70%, transparent) 0%,
color-mix(in srgb, var(--paper) 80%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--paper-edge) 70%, transparent);
border-left: 3px solid var(--paper-edge);
font-size: 13px;
color: var(--ink-2);
letter-spacing: 0.05em;
border-radius: 2px;
position: relative;
box-shadow: 0 1px 2px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
font-family: "Noto Serif SC", serif;
line-height: 1.4;
}
/* 4 slot 颜色编码（接 prototype 设计语言）*/
.side-pane .equipline:nth-of-type(1) { border-left-color: var(--jade); } /* 护甲 jade */
.side-pane .equipline:nth-of-type(2) { border-left-color: #7a5530; } /* 鞋履 brown */
.side-pane .equipline:nth-of-type(3) { border-left-color: var(--gold-2); } /* 饰品 gold */
.side-pane .equipline:nth-of-type(4) { border-left-color: var(--vermilion); } /* 秘宝 朱砂 */
/* slot 标签 (护甲：/鞋履：/饰品：/秘宝：) 加权重 */
.side-pane .equipline {
/* 把"护甲：xxx"分两段 · 标签 ink-soft · 名字 朱砂 */
}
.side-pane .equipline b {
margin-left: auto;
color: var(--vermilion);
font-weight: 600;
letter-spacing: 0.08em;
text-align: right;
word-break: break-all;
}
.side-pane .equipline:hover {
background: linear-gradient(180deg, var(--paper-hi, #fbf3da) 0%, var(--paper) 100%);
box-shadow: 0 2px 4px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
transform: translateY(-1px);
transition: all .15s;
}
/* —— 命令行卡片化 + 命字徽 —— */
.cmd-row {
border-top: 1px solid var(--frame);
padding: 8px 12px;
display: flex; gap: 10px; align-items: center;
background:
linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
position: relative;
box-shadow:
inset 0 2px 4px color-mix(in srgb, var(--ink) 18%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
#prompt {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: var(--ink);
color: var(--paper);
border-radius: 2px;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 17px;
letter-spacing: 0;
flex-shrink: 0;
box-shadow:
inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 60%, transparent),
0 1px 3px var(--shadow);
}
#cmd {
flex: 1;
background: color-mix(in srgb, var(--paper-hi, #fbf3da) 70%, transparent);
border: 1px solid color-mix(in srgb, var(--frame) 60%, transparent);
outline: none;
color: var(--ink);
font-family: "Noto Serif SC", "Microsoft YaHei", serif;
font-size: 14px;
letter-spacing: 0.05em;
padding: 7px 12px;
caret-color: var(--vermilion);
border-radius: 2px;
transition: border-color .15s, background .15s;
}
#cmd:focus {
border-color: var(--vermilion);
background: var(--paper-hi, #fbf3da);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--vermilion) 12%, transparent);
}
#cmd-send {
background:
linear-gradient(180deg, var(--vermilion) 0%, var(--vermilion-2) 100%);
color: #fff5e6;
border: 1px solid var(--vermilion-2);
outline: 1px solid color-mix(in srgb, var(--vermilion) 30%, transparent);
outline-offset: 1px;
padding: 7px 18px;
cursor: pointer;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 14px;
letter-spacing: 0.25em;
transition: all .15s;
flex-shrink: 0;
border-radius: 2px;
font-weight: 700;
box-shadow:
0 2px 6px color-mix(in srgb, var(--vermilion-2) 40%, transparent),
inset 0 1px 0 color-mix(in srgb, #fff5e6 30%, transparent);
}
#cmd-send:hover {
background:
linear-gradient(180deg, color-mix(in srgb, var(--vermilion) 90%, white) 0%, var(--vermilion) 100%);
transform: translateY(-1px);
}
/* —— quickbar 命令按钮卡片化 + 玩法菜单 pill —— */
.quickbar {
padding: 8px 12px;
border-top: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
display: flex; flex-wrap: wrap; gap: 5px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-2) 80%, var(--paper)) 0%,
var(--paper-2) 100%);
align-items: center;
position: relative;
}
.quickbar::before {
content: "";
position: absolute; top: 0; left: 12px; right: 12px;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--frame) 40%, transparent), transparent);
}
.quickbar button {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-hi, #fbf3da) 88%, transparent) 0%,
color-mix(in srgb, var(--paper) 90%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--frame) 55%, transparent);
color: var(--ink-2);
font-family: "Noto Serif SC", "ZCOOL XiaoWei", serif;
font-size: 13px;
font-weight: 500;
padding: 5px 12px;
cursor: pointer;
letter-spacing: 0.12em;
transition: all .12s;
border-radius: 2px;
box-shadow: 0 1px 1px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
.quickbar button:hover {
background:
linear-gradient(180deg, var(--paper-hi, #fbf3da) 0%, var(--paper) 100%);
color: var(--vermilion);
border-color: var(--vermilion);
transform: translateY(-1px);
box-shadow: 0 2px 4px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
.quickbar button.qb-menu {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--gold) 14%, var(--paper)) 0%,
color-mix(in srgb, var(--gold) 5%, var(--paper)) 100%);
border-color: color-mix(in srgb, var(--gold) 50%, var(--frame) 50%);
color: var(--ink);
}
.quickbar button.qb-menu:hover {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--gold) 30%, var(--paper)) 0%,
color-mix(in srgb, var(--gold) 16%, var(--paper)) 100%);
border-color: var(--gold);
color: var(--ink);
}
/* —— 日志区帧 + 区域感 —— */
#screen {
flex: 1;
overflow-y: auto;
padding: 14px 18px;
font-family: "Noto Serif SC", "Microsoft YaHei", serif;
font-size: 14px;
line-height: 1.85;
color: var(--log-text);
background:
radial-gradient(ellipse 200% 100% at 50% -10%,
color-mix(in srgb, var(--paper-hi, #fbf3da) 40%, transparent) 0%,
transparent 50%),
color-mix(in srgb, var(--paper) 30%, transparent);
position: relative;
}
/* —— SVG 地图节点 active 多环墨晕 —— */
svg .here-ring-2 {
fill: none;
stroke: var(--vermilion);
stroke-width: 1;
stroke-dasharray: 3 3;
opacity: 0.55;
animation: hereRing2 3s linear infinite;
transform-origin: center;
}
@keyframes hereRing2 {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 24; }
}
svg .node-level-pill {
fill: var(--paper-hi, #fbf3da);
stroke: var(--vermilion);
stroke-width: 0.6;
}
svg .node-level-text {
fill: var(--vermilion);
font-family: "Noto Serif SC", serif;
font-size: 8px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
}
/* —— 战斗 modal 卷轴风（兼容 .modal · 不破现有 combat.js） —— */
.modal-overlay .modal,
.modal[role="dialog"],
.modal {
position: relative;
}
.modal .modal-title,
.modal .modal-header,
.modal h3:first-child {
font-family: "Ma Shan Zheng", "Noto Serif SC", serif !important;
font-size: 20px !important;
letter-spacing: 0.3em;
color: var(--vermilion) !important;
border-bottom: 1.5px solid color-mix(in srgb, var(--vermilion) 40%, transparent);
padding-bottom: 6px;
margin-bottom: 10px;
}
/* ============= 26f UI v3 · 主体 4 处大改 · 战斗 modal 卷轴 + 地图节点 + 城内 chip + here-ribbon ============= */
/* —— "你在这"红色 ribbon（svg map node 下方·v4 加大）—— */
svg .here-ribbon { pointer-events: none; }
svg .here-ribbon-bg {
fill: var(--vermilion);
stroke: var(--vermilion-2);
stroke-width: 0.8;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
svg .here-ribbon-text {
fill: #fff5e6;
font-family: "Noto Serif SC", serif;
font-size: 10px;
font-weight: 700;
text-anchor: middle;
letter-spacing: 0.18em;
}
/* —— v4 节点 label paper 矩形（prototype 风格）—— */
svg .node-label-bg {
fill: var(--paper-hi, #fbf3da);
stroke: var(--paper-edge);
stroke-width: 0.5;
opacity: 0.92;
}
svg .node-label-text {
fill: var(--ink);
font-family: "Noto Serif SC", serif;
font-size: 10px;
font-weight: 600;
text-anchor: middle;
letter-spacing: 0.06em;
}
svg g.node.current .node-label-bg {
fill: var(--paper-hi, #fbf3da);
stroke: var(--vermilion);
stroke-width: 1.2;
}
svg g.node.current .node-label-text {
fill: var(--vermilion);
font-weight: 700;
}
/* —— 战斗 modal 卷轴风（v4 严格对齐 prototype scene-battle.jsx · 26g UI v4） —— */
.modal-combat {
/* 整 modal-overlay 加战场半透 mask */
}
.modal-combat > .panel {
max-width: 660px;
width: min(660px, 94vw);
background:
linear-gradient(180deg, var(--paper-hi, #fbf3da) 0%, var(--paper) 50%, var(--paper-3) 100%);
border: 1px solid var(--gold);
padding: 18px 24px 20px;
position: relative;
border-radius: 0;
box-shadow:
inset 0 0 40px color-mix(in srgb, var(--paper-3) 70%, transparent),
0 12px 40px var(--shadow);
/* leave room for scroll caps above + below */
margin-top: 18px;
margin-bottom: 18px;
}
/* —— 上下 ScrollCap 装饰：gold 渐变长条 + 朱砂圆头 rod —— */
.modal-combat > .panel::before,
.modal-combat > .panel::after {
content: "";
position: absolute;
left: -10px; right: -10px;
height: 18px;
background:
linear-gradient(180deg, var(--gold) 0%, var(--gold-hi, #d4a847) 50%, var(--gold) 100%);
border-radius: 3px;
box-shadow: 0 4px 8px var(--shadow), inset 0 -2px 4px rgba(0,0,0,0.2);
z-index: 5;
}
.modal-combat > .panel::before {
top: -18px;
border-top: 2px solid var(--vermilion-2);
}
.modal-combat > .panel::after {
bottom: -18px;
border-bottom: 2px solid var(--vermilion-2);
box-shadow: 0 -4px 8px var(--shadow), inset 0 2px 4px rgba(0,0,0,0.2);
}
/* 卷轴四端 rod（红色椭圆） */
.modal-combat > .panel > .panel::before,
.modal-combat > .panel > .panel::after { display: none; } /* 抑制 .panel 的内层 corner 干扰 */
.modal-combat .corner { display: none; }
/* —— 战 seal stamp + 战斗中 大字（接 prototype + title block）—— */
.modal-combat h3 {
margin: 0 0 4px;
display: flex; align-items: center; gap: 12px;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 28px;
letter-spacing: 0.5em;
color: var(--vermilion);
font-weight: 700;
text-shadow: 1px 1px 0 var(--paper-hi, #fbf3da);
line-height: 1;
border-bottom: none;
padding: 0;
}
.modal-combat h3::before {
content: "战";
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
background: var(--vermilion);
color: #fff5dc;
font-size: 20px;
letter-spacing: 0;
border-radius: 3px;
transform: rotate(-6deg);
box-shadow:
inset 0 0 0 1.5px rgba(255,240,220,0.85),
inset 0 0 10px var(--vermilion-2);
flex-shrink: 0;
}
.modal-combat h3::after {
content: "第 一 回 合 · 先手";
margin-left: 4px;
font-family: "Noto Serif SC", serif;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--ink-soft);
font-weight: 400;
text-shadow: none;
}
/* 标题下分隔线 · 朱砂渐变 */
.modal-combat h3 + * {
position: relative;
}
.modal-combat .lineup {
position: relative;
}
.modal-combat .lineup::before {
content: "";
position: absolute;
top: -16px; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vermilion) 70%, transparent) 20%, color-mix(in srgb, var(--vermilion) 70%, transparent) 80%, transparent);
}
/* —— 敌方 / 你 section label · 楷书大字 + 朱砂 left border —— */
.modal-combat h4 {
margin: 12px 0 8px;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 18px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.25em;
display: flex; align-items: baseline; gap: 8px;
position: relative;
}
.modal-combat h4::before {
content: "";
width: 3px; height: 18px;
background: var(--vermilion);
display: inline-block;
flex-shrink: 0;
align-self: center;
}
.modal-combat h4::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, color-mix(in srgb, var(--frame) 40%, transparent), transparent);
margin-left: 4px;
}
.modal-combat .lineup {
display: flex; flex-direction: column;
gap: 12px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-hi, #fbf3da) 40%, transparent) 0%,
transparent 100%);
padding: 10px 12px;
border: 1px dashed color-mix(in srgb, var(--frame) 50%, transparent);
border-radius: 2px;
margin-bottom: 10px;
}
.modal-combat .side {
position: relative;
}
/* fighter 卡片 — 玩家自己 */
.modal-combat .side .fighter {
padding: 8px 12px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-hi, #fbf3da) 80%, transparent) 0%,
var(--paper) 100%);
border: 1px solid var(--gold);
border-radius: 2px;
box-shadow: 0 1px 3px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, white);
}
.modal-combat .side .fighter .nm {
font-family: "Noto Serif SC", serif;
font-size: 14px; font-weight: 600;
color: var(--ink);
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.modal-combat .hp-bar, .modal-combat .ap-bar {
height: 8px;
background: var(--paper-3);
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
border-radius: 1px;
overflow: hidden;
margin: 4px 0;
position: relative;
}
.modal-combat .hp-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--hp), color-mix(in srgb, var(--hp) 70%, var(--vermilion-2)));
transition: width .35s cubic-bezier(.5,0,.3,1);
box-shadow: 0 0 4px color-mix(in srgb, var(--hp) 60%, transparent);
}
.modal-combat .ap-bar { height: 5px; }
.modal-combat .ap-bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-2));
transition: width .35s ease;
}
/* skill / action 按钮 4-col grid（contestant prototype 风格） */
.modal-combat .actions {
margin: 14px 0 8px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 12px 8px;
background: color-mix(in srgb, var(--paper-2) 50%, transparent);
border-top: 1px solid color-mix(in srgb, var(--frame) 40%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--frame) 40%, transparent);
}
.modal-combat .actions button {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-hi, #fbf3da) 92%, transparent) 0%,
color-mix(in srgb, var(--paper) 92%, transparent) 100%);
border: 1px solid var(--frame);
color: var(--ink-2);
font-family: "Noto Serif SC", serif;
font-size: 13px; font-weight: 500;
padding: 7px 14px;
cursor: pointer;
letter-spacing: 0.1em;
border-radius: 2px;
transition: all .12s;
box-shadow: 0 1px 2px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
.modal-combat .actions button:hover:not(:disabled) {
background: linear-gradient(180deg, var(--paper-hi, #fbf3da) 0%, var(--paper) 100%);
border-color: var(--vermilion);
color: var(--vermilion);
transform: translateY(-1px);
}
.modal-combat .actions button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.modal-combat .actions button.primary {
background: linear-gradient(180deg, var(--vermilion) 0%, var(--vermilion-2) 100%);
border: 1.5px solid var(--gold);
outline: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
outline-offset: 2px;
color: #fff5dc !important;
font-weight: 700;
letter-spacing: 0.3em;
font-size: 14px;
padding: 10px 14px;
min-height: 42px;
box-shadow: 0 2px 6px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* primary hover 重复定义已下沉到 v4-fix 段（! important bg override · 防 base 黄底白字隐形）*/
/* 按 data-act 前缀给 skill 按钮颜色：skill: → azure / item → jade / flee → dark */
.modal-combat .actions button[data-act^="skill:"] {
background: linear-gradient(180deg, color-mix(in srgb, var(--azure) 90%, white) 0%, color-mix(in srgb, var(--azure) 80%, var(--ink) 20%) 100%);
border: 1.5px solid var(--azure);
color: #fff5dc !important;
font-weight: 700;
letter-spacing: 0.2em;
font-size: 13px;
padding: 10px 14px;
min-height: 42px;
}
.modal-combat .actions button[data-act^="skill:"]:hover:not(:disabled) {
/* v4-fix: 必须 override base hover 的 paper 黄底 · 否则白字在黄底全隐形 */
background: linear-gradient(180deg, var(--azure) 0%, color-mix(in srgb, var(--azure) 60%, var(--ink) 40%) 100%) !important;
border-color: var(--azure) !important;
color: #fff5dc !important;
filter: brightness(1.15);
transform: translateY(-1px);
}
.modal-combat .actions button[data-act="item"] {
background: linear-gradient(180deg, var(--jade) 0%, color-mix(in srgb, var(--jade) 70%, var(--ink) 30%) 100%);
border: 1.5px solid var(--jade);
color: #fff5dc !important;
font-weight: 700;
letter-spacing: 0.3em;
padding: 10px 14px;
min-height: 42px;
}
.modal-combat .actions button[data-act="item"]:hover:not(:disabled) {
/* v4-fix: 同上 · jade hover override base 黄底 */
background: linear-gradient(180deg, color-mix(in srgb, var(--jade) 110%, white) 0%, var(--jade) 100%) !important;
border-color: var(--jade) !important;
color: #fff5dc !important;
filter: brightness(1.1);
transform: translateY(-1px);
}
.modal-combat .actions button[data-act="flee"] {
background: linear-gradient(180deg, var(--ink-soft) 0%, var(--ink) 100%);
border: 1.5px solid var(--ink-soft);
color: #fff5dc !important;
font-weight: 700;
letter-spacing: 0.3em;
padding: 10px 14px;
min-height: 42px;
}
.modal-combat .actions button[data-act="flee"]:hover:not(:disabled) {
/* v4-fix: 同上 · dark hover override base 黄底 */
background: linear-gradient(180deg, color-mix(in srgb, var(--ink-soft) 120%, white) 0%, var(--ink-soft) 100%) !important;
border-color: var(--ink-soft) !important;
color: #fff5dc !important;
filter: brightness(1.1);
transform: translateY(-1px);
}
.modal-combat .actions button.primary:hover:not(:disabled) {
/* v4-fix: primary hover 也要 override base 黄底 */
background: linear-gradient(180deg, color-mix(in srgb, var(--vermilion) 90%, white) 0%, var(--vermilion) 100%) !important;
border-color: var(--vermilion-2) !important;
color: #fff5dc !important;
transform: translateY(-1px);
}
/* 战斗 log 区域 */
.modal-combat .log {
margin-top: 6px;
padding: 8px 12px;
background:
repeating-linear-gradient(180deg, transparent 0 18px, color-mix(in srgb, var(--ink) 4%, transparent) 18px 19px),
color-mix(in srgb, var(--paper-2) 50%, transparent);
border: 1px solid color-mix(in srgb, var(--frame) 40%, transparent);
font-size: 12px;
color: var(--ink-soft);
line-height: 1.7;
max-height: 140px;
overflow-y: auto;
border-radius: 1px;
font-family: "Noto Serif SC", "Microsoft YaHei", serif;
}
/* —— 城内 chip 美化 —— */
.csm-chip {
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 3px;
padding: 8px 14px;
border: 1px solid var(--ink-soft);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper-hi, #fbf3da) 90%, transparent) 0%,
color-mix(in srgb, var(--paper) 90%, transparent) 100%);
color: var(--ink);
cursor: pointer;
font-family: "Noto Serif SC", serif;
font-size: 13px;
border-radius: 3px;
transition: all .15s ease;
min-width: 76px;
position: relative;
box-shadow: 0 1px 2px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
.csm-chip:hover {
transform: translateY(-1px);
background:
linear-gradient(180deg, var(--paper-hi, #fbf3da) 0%, var(--paper) 100%);
box-shadow: 0 3px 8px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
.csm-chip-name {
font-weight: 600;
letter-spacing: 0.08em;
white-space: nowrap;
font-size: 13px;
line-height: 1.3;
}
.csm-chip-sub {
font-size: 10px;
color: var(--ink-soft);
letter-spacing: 0.15em;
opacity: 0.85;
font-family: "Noto Serif SC", serif;
display: inline-block;
padding: 0px 5px;
background: color-mix(in srgb, var(--paper-3) 60%, transparent);
border-radius: 6px;
}
/* —— 地图节点圆点（svg .node）增强 —— */
svg g.node {
cursor: default;
}
svg g.node.current circle:first-of-type,
svg g.node.current circle:nth-of-type(2) {
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--vermilion) 80%, transparent));
}
/* node generic text · 现已被 .node-label-text 取代 · 留为兜底（旧 here-label 仍用）*/
svg g.node text:not(.node-label-text) {
font-family: "Noto Serif SC", serif;
font-size: 10px;
font-weight: 600;
text-anchor: middle;
}
svg .node-level-pill {
fill: var(--paper-hi, #fbf3da);
stroke: var(--vermilion);
stroke-width: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
svg .node-level-text {
fill: var(--vermilion);
font-family: "Noto Serif SC", serif;
font-size: 8px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: central;
pointer-events: none;
}
/* =================================================================
26g UI v4 · 城内 prototype scene-city.jsx 精确移植
================================================================= */
#city-map { padding: 0; }
#city-map .csm-wrap {
padding: 16px;
background:
radial-gradient(ellipse 1200px 600px at 20% 10%, color-mix(in srgb, var(--paper-hi, #fbf3da) 60%, transparent) 0%, transparent 60%),
radial-gradient(ellipse 900px 600px at 85% 90%, color-mix(in srgb, var(--paper-3) 40%, transparent) 0%, transparent 55%),
repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ink) 4%, transparent) 0px, transparent 1.2px, transparent 3px),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
min-height: 100%;
position: relative;
}
/* Panel wrapper (= prototype ) */
#city-map .csm-panel {
position: relative;
background:
linear-gradient(180deg, var(--paper-hi, #fbf3da) 0%, var(--paper) 50%, var(--paper-3) 100%);
border: 1px solid var(--gold);
outline: 1px solid color-mix(in srgb, var(--frame) 30%, transparent);
outline-offset: 3px;
box-shadow: 0 8px 24px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 80%, white);
border-radius: 2px;
padding: 18px 22px 22px;
min-height: calc(100% - 24px);
}
#city-map .csm-brand {
position: absolute; top: -1px; left: 16px;
background: var(--vermilion);
color: #fff5dc;
padding: 2px 10px 3px;
font-family: "Noto Serif SC", serif;
font-size: 11px; font-weight: 600;
letter-spacing: 0.3em;
box-shadow: 0 2px 4px var(--shadow);
clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%);
z-index: 3;
}
/* —— 城名卡（顶部 Compass + 大字名 + 副标 + 巳时 pill）—— */
#city-map .csm-cityhead {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 6px;
padding-bottom: 12px;
border-bottom: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
margin-bottom: 14px;
}
#city-map .csm-cityhead-left {
display: flex; align-items: center; gap: 12px;
}
#city-map .csm-compass-v2 {
width: 64px; height: 64px;
flex-shrink: 0;
}
#city-map .csm-cityname-block {
display: flex; flex-direction: column;
}
#city-map .csm-cityname {
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 36px;
font-weight: 700;
color: var(--ink);
line-height: 1;
letter-spacing: 0.3em;
text-shadow: 1px 2px 0 var(--paper-hi, #fbf3da);
}
#city-map .csm-citysub {
margin-top: 6px;
font-family: "Noto Serif SC", serif;
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.3em;
}
#city-map .csm-clockpill {
display: flex; align-items: center; gap: 6px;
padding: 6px 14px;
background: linear-gradient(180deg, #fff5d0, #ffe6a0);
border: 1px solid var(--gold);
border-radius: 20px;
font-family: "Noto Serif SC", serif;
font-size: 12px;
color: var(--ink);
font-weight: 600;
letter-spacing: 0.2em;
flex-shrink: 0;
}
#city-map .csm-clockpill-icon {
color: var(--vermilion);
font-size: 14px;
}
/* —— 你在此处 红横幅 —— */
#city-map .csm-herebanner {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
margin-bottom: 14px;
background: linear-gradient(90deg, color-mix(in srgb, var(--vermilion) 13%, transparent) 0%, transparent 100%);
border: 1px solid color-mix(in srgb, var(--vermilion) 40%, transparent);
border-left: 4px solid var(--vermilion);
border-radius: 2px;
}
#city-map .csm-here-pin { font-size: 16px; }
#city-map .csm-here-prefix {
font-family: "Noto Serif SC", serif;
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 0.08em;
}
#city-map .csm-here-name {
font-family: "Noto Serif SC", serif;
font-weight: 700;
font-size: 14px;
color: var(--vermilion);
letter-spacing: 0.15em;
}
#city-map .csm-here-tip {
flex: 1;
text-align: right;
font-family: "Noto Serif SC", serif;
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.02em;
}
/* —— 4 区 grid · prototype 300px 左 + 1fr 右 mkt 大块 —— */
#city-map .csm-groups {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas:
"wu mkt"
"edu mkt"
"gov mkt";
gap: 16px;
margin-bottom: 18px;
}
#city-map .csm-group {
position: relative;
padding: 18px 14px 14px;
border: 1.5px dashed;
border-radius: 2px;
}
#city-map .csm-group[data-area="wu"] { grid-area: wu; }
#city-map .csm-group[data-area="edu"] { grid-area: edu; }
#city-map .csm-group[data-area="gov"] { grid-area: gov; }
#city-map .csm-group[data-area="mkt"] { grid-area: mkt; }
/* 4 区配色 token */
#city-map .csm-group[data-color="jade"] { border-color: color-mix(in srgb, var(--jade) 40%, transparent); background: color-mix(in srgb, var(--jade) 3%, transparent); --gc: var(--jade); }
#city-map .csm-group[data-color="gold"] { border-color: color-mix(in srgb, var(--gold-2) 50%, transparent); background: color-mix(in srgb, var(--gold-2) 3%, transparent); --gc: var(--gold-2); }
#city-map .csm-group[data-color="azure"] { border-color: color-mix(in srgb, var(--azure) 40%, transparent); background: color-mix(in srgb, var(--azure) 3%, transparent); --gc: var(--azure); }
#city-map .csm-group[data-color="azure-dk"] { border-color: color-mix(in srgb, #2a3a5a 45%, transparent); background: color-mix(in srgb, #2a3a5a 3%, transparent); --gc: #2a3a5a; }
/* 区 label tab · 浮在上方 */
#city-map .csm-group-label {
position: absolute; top: -10px; left: 10px;
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px 3px;
background: var(--paper);
border: 1px solid var(--gc, var(--paper-edge));
border-radius: 1px;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 14px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.3em;
}
#city-map .csm-group-label .dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--gc);
border-radius: 50%;
}
#city-map .csm-group-cards {
display: flex; flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
}
/* 单建筑卡（= prototype BuildingCard）*/
#city-map .csm-card {
position: relative;
padding: 10px 12px 8px;
min-width: 110px;
background: linear-gradient(180deg, var(--paper-hi, #fbf3da) 0%, var(--paper) 100%);
border: 1px solid color-mix(in srgb, var(--gc, var(--paper-edge)) 55%, transparent);
border-radius: 2px;
cursor: pointer;
font-family: "Noto Serif SC", serif;
text-align: left;
box-shadow: 0 2px 6px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
#city-map .csm-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
#city-map .csm-card-corner {
position: absolute; top: -1px; left: -1px;
width: 6px; height: 6px;
background: var(--gc, var(--paper-edge));
}
#city-map .csm-card-name {
display: block;
font-family: "Noto Serif SC", serif;
font-size: 13px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.08em;
line-height: 1.2;
}
#city-map .csm-card-tag {
display: block;
margin-top: 3px;
font-family: "Noto Serif SC", serif;
font-size: 10px;
font-weight: 600;
color: var(--gc, var(--ink-soft));
letter-spacing: 0.2em;
}
/* 当前 here · 黄底 + 朱砂边 + 光晕 + 你在这徽 */
#city-map .csm-card.is-here,
#city-map .csm-card[data-cur="1"] {
background: linear-gradient(180deg, #fff5d0 0%, #ffe89a 100%) !important;
border: 2px solid var(--vermilion) !important;
outline: 1px solid color-mix(in srgb, var(--vermilion) 40%, transparent);
outline-offset: 2px;
box-shadow:
0 4px 16px color-mix(in srgb, var(--vermilion) 30%, transparent),
inset 0 1px 0 rgba(255,255,255,0.7) !important;
animation: none !important;
}
#city-map .csm-card.is-here .csm-card-name,
#city-map .csm-card[data-cur="1"] .csm-card-name {
color: var(--ink) !important;
}
#city-map .csm-card-here-badge {
display: inline-block;
margin-top: 6px;
padding: 2px 6px;
background: var(--vermilion);
color: #fff5dc;
font-size: 10px;
letter-spacing: 0.2em;
border-radius: 1px;
font-family: "Noto Serif SC", serif;
}
/* 空区 · "（暂无可入 X）"灰斜体 */
#city-map .csm-empty-card {
font-family: "Noto Serif SC", serif;
font-size: 12px;
color: var(--ink-soft);
font-style: italic;
opacity: 0.55;
padding: 14px 12px;
background: color-mix(in srgb, var(--paper) 30%, transparent);
border: 1px dashed color-mix(in srgb, var(--frame) 30%, transparent);
border-radius: 2px;
min-width: 110px;
text-align: center;
letter-spacing: 0.1em;
}
/* —— 城心入口大金牌 —— */
#city-map .csm-center {
display: flex; justify-content: center;
margin-top: 18px;
}
#city-map .csm-center-chip {
position: relative;
padding: 8px 22px;
background: linear-gradient(180deg, var(--gold) 0%, color-mix(in srgb, var(--gold-2) 80%, transparent) 100%);
border: 1.5px solid var(--gold);
border-radius: 2px;
box-shadow: 0 4px 12px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.4);
cursor: pointer;
text-align: center;
font-family: "Noto Serif SC", serif;
transition: transform .15s, box-shadow .15s;
}
#city-map .csm-center-chip:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.4);
}
#city-map .csm-center-chip[data-cur="1"] {
outline: 2px solid var(--vermilion);
outline-offset: 3px;
}
#city-map .csm-center-name {
display: block;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 18px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.4em;
line-height: 1.1;
}
#city-map .csm-center-sub {
display: block;
margin-top: 2px;
font-family: "Noto Serif SC", serif;
font-size: 9px;
color: var(--ink-soft);
letter-spacing: 0.3em;
}
/* —— 26k · sidebar 背包分类筛选（用户钦点 2026-05-21）—— */
/* 顶部 tab row · 按 13 类 + 全部 + 实例 · 紧凑 wrap */
.side-pane #inv-list .sb-bagtabs {
display: flex; flex-wrap: wrap; gap: 3px;
margin-bottom: 8px;
padding: 6px;
background: color-mix(in srgb, var(--paper-edge) 14%, transparent);
border: 1px dashed color-mix(in srgb, var(--paper-edge) 50%, transparent);
border-radius: 2px;
}
.side-pane #inv-list .sb-bagtab {
display: inline-flex; align-items: center; gap: 2px;
padding: 2px 7px;
background: var(--paper-2);
color: var(--ink-soft);
border: 1px solid color-mix(in srgb, var(--paper-edge) 60%, transparent);
border-radius: 2px;
font-family: "Noto Serif SC", serif;
font-size: 11px;
letter-spacing: 0.05em;
cursor: pointer;
transition: all .12s;
}
.side-pane #inv-list .sb-bagtab small {
font-size: 9px;
opacity: 0.6;
font-weight: 400;
}
.side-pane #inv-list .sb-bagtab:hover {
background: var(--paper-hi, #fbf3da);
color: var(--ink);
border-color: var(--vermilion);
}
.side-pane #inv-list .sb-bagtab.active {
background: var(--vermilion);
color: #fff5dc;
font-weight: 700;
border-color: var(--vermilion-2);
}
.side-pane #inv-list .sb-bagtab.active small {
color: #fff5dc;
opacity: 0.9;
}
/* 分类 header · 朱砂 left bar + 楷书 */
.side-pane #inv-list .sb-bagcat-header {
margin: 8px 0 4px;
padding: 2px 0 2px 7px;
border-left: 2.5px solid var(--vermilion);
font-family: "Noto Serif SC", serif;
font-size: 12px;
font-weight: 600;
color: var(--vermilion);
letter-spacing: 0.15em;
}
.side-pane #inv-list .sb-bagcat-header small {
color: var(--ink-soft);
font-weight: 400;
font-size: 10px;
letter-spacing: 0.1em;
opacity: 0.8;
margin-left: 2px;
}
/* item 行 · 比之前 div 略 prettier */
.side-pane #inv-list .sb-inv-item {
padding: 3px 8px;
margin: 2px 0;
font-size: 12px;
color: var(--ink-2);
cursor: pointer;
border-radius: 2px;
transition: background .12s, color .12s, transform .12s;
border-bottom: 1px dotted color-mix(in srgb, var(--paper-edge) 25%, transparent);
}
.side-pane #inv-list .sb-inv-item:hover {
background: color-mix(in srgb, var(--gold) 12%, transparent);
color: var(--ink);
transform: translateX(2px);
}
.side-pane #inv-list .sb-inv-count {
color: var(--gold-2);
font-weight: 600;
font-size: 11px;
}
/* —— 滚动条加粗一点 + 朱砂 —— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--paper-2) 50%, transparent);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--gold-2), var(--frame-dark));
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--paper-2) 50%, transparent);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--vermilion-2), var(--vermilion));
}
.footer-seal {
position: fixed;
right: 18px; bottom: 12px;
z-index: 3;
pointer-events: none;
opacity: 0.55;
font-family: "Long Cang", "Ma Shan Zheng", serif;
font-size: 13px;
color: var(--vermilion);
transform: rotate(-2deg);
text-align: right;
line-height: 1.4;
}
.footer-seal .stamp {
display: inline-block;
margin-top: 4px;
padding: 3px 7px;
border: 2px solid var(--vermilion);
color: var(--vermilion);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 11px;
letter-spacing: 0.2em;
transform: rotate(-1deg);
}
/* ============= 移动端 ============= */
@media (max-width: 900px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: 38vh 1fr 200px;
grid-template-areas: "map" "log" "side";
gap: 8px;
padding: 6px 8px;
}
.footer-seal { display: none; }
.title-text h1 { font-size: 22px; letter-spacing: 0.1em; }
.title-text .sub { display: none; }
header { padding: 6px 10px; }
}
/* ============= 滚动条 ============= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--frame) 60%, transparent);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--frame);
}
/* ============= 成就提示 ============= */
#achievement-toast {
position: fixed;
bottom: 60px;
left: 50%;
transform: translateX(-50%) translateY(40px);
background: linear-gradient(180deg, var(--paper), var(--paper-2));
color: var(--vermilion);
border: 2px solid var(--vermilion);
padding: 12px 22px;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--vermilion) 30%, transparent),
0 8px 24px color-mix(in srgb, var(--ink) 50%, transparent);
z-index: 60;
font-family: "Noto Serif SC", serif;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition: transform 0.4s ease, opacity 0.4s ease;
text-align: center;
}
#achievement-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
#achievement-toast .title {
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-weight: 400;
letter-spacing: 0.3em;
font-size: 16px;
}
#achievement-toast .name { color: var(--ink); margin-top: 3px; }
#achievement-toast .desc { color: var(--ink-soft); font-size: 12px; margin-top: 3px; }
/* ============= 聊天面板 ============= */
#chat-widget {
position: fixed;
right: 12px; bottom: 56px;
width: 340px; height: 340px;
background: var(--paper);
border: 1px solid var(--frame);
box-shadow:
0 0 0 1px var(--paper-edge),
0 6px 20px color-mix(in srgb, var(--ink) 50%, transparent);
color: var(--ink);
display: none;
flex-direction: column;
z-index: 50;
font-family: "Noto Serif SC", serif;
font-size: 13px;
}
#chat-widget.show { display: flex; }
#chat-tabs {
display: flex;
border-bottom: 1px solid var(--frame);
background: var(--paper-2);
}
#chat-tabs .tab {
flex: 1;
padding: 7px 10px;
text-align: center;
cursor: pointer;
color: var(--ink-soft);
border-right: 1px solid color-mix(in srgb, var(--frame) 50%, transparent);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
letter-spacing: 0.15em;
transition: all .2s;
}
#chat-tabs .tab:last-child { border-right: none; }
#chat-tabs .tab:hover { color: var(--ink); }
#chat-tabs .tab.active {
background: var(--paper);
color: var(--vermilion);
border-bottom: 2px solid var(--vermilion);
}
#chat-tabs .tab .badge {
display: inline-block;
background: var(--vermilion); color: #fff5e6;
border-radius: 8px;
padding: 0 6px;
font-size: 11px;
margin-left: 4px;
}
#chat-list {
flex: 1;
overflow-y: auto;
padding: 10px 12px;
font-family: "Noto Serif SC", "Microsoft YaHei", serif;
line-height: 1.7;
background: var(--paper);
}
#chat-list .msg { margin: 3px 0; color: var(--ink-2); }
#chat-list .msg .from { color: var(--vermilion); font-weight: 500; }
#chat-list .msg .ts { color: var(--ink-soft); font-size: 11px; margin-right: 4px; }
#chat-list .msg.world .from { color: var(--gold-2); }
#chat-list .msg.pm .from { color: var(--azure); }
#chat-form {
display: flex;
gap: 6px;
padding: 7px;
border-top: 1px solid var(--frame);
background: var(--paper-2);
}
#chat-form input {
flex: 1;
background: var(--paper);
border: 1px solid var(--paper-edge);
color: var(--ink);
padding: 5px 8px;
font-family: "Noto Serif SC", serif;
font-size: 13px;
outline: none;
transition: border-color .2s;
}
#chat-form input:focus { border-color: var(--vermilion); }
#chat-form button {
background: var(--vermilion);
color: #fff5e6;
border: none;
padding: 5px 14px;
cursor: pointer;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.15em;
transition: background .2s;
}
#chat-form button:hover { background: var(--vermilion-2); }
#chat-toggle {
position: fixed;
right: 12px; bottom: 12px;
background: var(--vermilion);
color: #fff5e6;
border: 1px solid var(--vermilion-2);
padding: 7px 16px;
cursor: pointer;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.15em;
z-index: 49;
display: none;
box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 60%, transparent);
transition: background .2s;
border-radius: 0;
}
#chat-toggle:hover { background: var(--vermilion-2); }
#chat-toggle.show { display: block; }
#chat-toggle .badge {
display: inline-block;
background: #fff5e6; color: var(--vermilion);
border-radius: 8px;
padding: 0 6px;
font-size: 11px;
margin-left: 6px;
}
/* 五维右侧"加点"按钮（unspent>0 时显示）*/
.unspent-btn {
display: inline-block;
padding: 3px 12px;
margin-left: 8px;
background: var(--vermilion);
color: #fff5e6;
border: 1px solid var(--vermilion-2);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.15em;
cursor: pointer;
border-radius: 0;
vertical-align: middle;
transition: transform .15s, box-shadow .15s;
animation: unspent-pulse 1.6s ease-in-out infinite;
}
.unspent-btn:hover {
transform: scale(1.05);
background: var(--vermilion-2);
}
@keyframes unspent-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vermilion) 70%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--vermilion) 0%, transparent); }
}
/* =====================================================================
26g UI v4 · 城内街道俯视视图 · 严格对齐用户上传 prototype scene-city.jsx
--------------------------------------------------------------------
Panel + brand + Compass + 城名卡 + 时辰 pill + 你在此处 红横幅 +
4 区 asymmetric grid（300px 左 wu/edu/gov 竖排 + 1fr 右 mkt 大块）+
2-line BuildingCard + GroupBox dashed border + label tab + 城心金牌
===================================================================== */
#city-map {
width: 100%; height: 100%;
overflow: auto;
position: relative;
z-index: 2;
font-family: "Noto Serif SC", "Ma Shan Zheng", serif;
color: var(--ink);
}
.csm-wrap {
padding: 14px 16px 18px;
display: flex; flex-direction: column;
min-height: 100%;
box-sizing: border-box;
}
.csm-header {
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px dashed var(--paper-edge);
padding-bottom: 6px;
margin-bottom: 6px;
}
.csm-header h3 {
margin: 0;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 22px;
letter-spacing: 0.3em;
color: var(--ink);
}
.csm-region {
font-size: 12px; color: var(--ink-soft);
letter-spacing: 0.2em;
}
.csm-desc {
margin: 0 0 12px;
font-size: 12px;
color: var(--ink-soft);
font-style: italic;
}
/* 4 坊网格 + 黄十字大街（背景渐变模拟） */
.csm-grid {
position: relative;
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
/* 街道：竖横各一条黄带，正交于中心 */
background-image:
/* 横街 */
linear-gradient(to bottom,
transparent calc(50% - 14px),
color-mix(in srgb, #d8af62 75%, transparent) calc(50% - 14px),
color-mix(in srgb, #d8af62 75%, transparent) calc(50% + 14px),
transparent calc(50% + 14px)),
/* 竖街 */
linear-gradient(to right,
transparent calc(50% - 14px),
color-mix(in srgb, #d8af62 75%, transparent) calc(50% - 14px),
color-mix(in srgb, #d8af62 75%, transparent) calc(50% + 14px),
transparent calc(50% + 14px));
background-color: color-mix(in srgb, var(--paper) 50%, transparent);
border: 1px dashed var(--paper-edge);
min-height: 360px;
padding: 0;
}
.csm-quad {
padding: 10px 14px;
display: flex; flex-direction: column;
position: relative;
}
.csm-quad.q-wu { grid-column: 1; grid-row: 1; }
.csm-quad.q-shi { grid-column: 2; grid-row: 1; }
.csm-quad.q-xue { grid-column: 1; grid-row: 2; }
.csm-quad.q-guan { grid-column: 2; grid-row: 2; }
.csm-quad-label {
font-family: "Ma Shan Zheng", serif;
font-size: 14px;
color: var(--ink-soft);
margin-bottom: 6px;
letter-spacing: 0.2em;
border-left: 3px solid var(--ink-soft);
padding-left: 6px;
align-self: flex-start;
}
.csm-quad.q-wu .csm-quad-label { border-left-color: #5a8a3a; color: #4a7030; }
.csm-quad.q-shi .csm-quad-label { border-left-color: #a83232; color: #8a2828; }
.csm-quad.q-xue .csm-quad-label { border-left-color: #3a5a8a; color: #2a4070; }
.csm-quad.q-guan .csm-quad-label { border-left-color: #5a3a7a; color: #422a60; }
.csm-quad-chips {
display: flex; flex-wrap: wrap;
gap: 6px 8px;
align-content: flex-start;
}
.csm-empty {
font-size: 11px; color: var(--ink-soft);
font-style: italic; opacity: 0.7;
}
/* 建筑 chip */
.csm-chip {
display: inline-flex; flex-direction: column;
align-items: center; gap: 2px;
padding: 5px 10px;
border: 1px solid var(--ink-soft);
background: color-mix(in srgb, var(--paper) 92%, transparent);
color: var(--ink);
cursor: pointer;
font-family: "Noto Serif SC", serif;
font-size: 12px;
border-radius: 3px;
transition: transform .12s, background .12s, border-color .12s, box-shadow .12s;
min-width: 64px;
position: relative;
}
.csm-chip:hover {
transform: translateY(-1px);
background: color-mix(in srgb, var(--paper) 100%, white 8%);
}
.csm-chip-name {
font-weight: 600;
letter-spacing: 0.06em;
white-space: nowrap;
}
.csm-chip-sub {
font-size: 10px;
color: var(--ink-soft);
letter-spacing: 0.1em;
opacity: 0.8;
}
/* 区色 */
.csm-chip[data-d="wu"] { border-color: #5a8a3a; background: color-mix(in srgb, #d8eac0 70%, var(--paper)); }
.csm-chip[data-d="shi"] { border-color: #a83232; background: color-mix(in srgb, #f3d4d4 65%, var(--paper)); }
.csm-chip[data-d="xue"] { border-color: #3a5a8a; background: color-mix(in srgb, #d4dff0 65%, var(--paper)); }
.csm-chip[data-d="guan"] { border-color: #5a3a7a; background: color-mix(in srgb, #e0d4ee 65%, var(--paper)); }
.csm-chip[data-d="misc"] { border-color: #7a5a3a; background: color-mix(in srgb, #eee2d0 70%, var(--paper)); }
/* 当前位置 chip — 强化高亮（用户反馈 highlight 不明显）*/
.csm-chip[data-cur="1"] {
background: #f7d873 !important;
border: 3px solid #a83232 !important;
box-shadow: 0 0 0 1px #a83232 inset, 0 0 14px color-mix(in srgb, #a83232 60%, transparent),
0 0 0 4px color-mix(in srgb, #f7d873 80%, transparent);
color: #4a3520;
font-weight: bold;
animation: csm-here-pulse 1.5s ease-in-out infinite;
}
@keyframes csm-here-pulse {
0%, 100% { box-shadow: 0 0 0 1px #a83232 inset, 0 0 14px color-mix(in srgb, #a83232 60%, transparent), 0 0 0 4px color-mix(in srgb, #f7d873 80%, transparent); }
50% { box-shadow: 0 0 0 1px #a83232 inset, 0 0 22px color-mix(in srgb, #a83232 80%, transparent), 0 0 0 6px color-mix(in srgb, #f7d873 90%, transparent); }
}
.csm-chip[data-cur="1"] .csm-chip-name::before { content: "📍 "; }
.csm-chip[data-cur="1"] .csm-chip-name::after { content: " ★（你在这）"; font-size: 11px; color: #a83232; }
.csm-chip[data-cur="1"] .csm-chip-sub { color: #6a4a20; opacity: 1; }
/* 顶部"你在此处"banner */
.csm-here {
margin: 6px 0;
padding: 8px 12px;
background: color-mix(in srgb, #f7d873 60%, var(--paper));
border-left: 4px solid #a83232;
font-size: 14px;
font-weight: bold;
color: #4a3520;
}
.csm-here b { color: #a83232; }
.csm-rootchip-sub {
display: block;
font-size: 10px;
color: var(--ink-soft);
letter-spacing: 0.1em;
margin-top: 2px;
}
/* 相邻 chip 提示（细微）*/
.csm-chip[data-adj="1"][data-cur="0"] {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent) inset;
}
/* mob 红点 */
.csm-mobdot {
display: inline-block;
width: 6px; height: 6px;
background: var(--vermilion);
border-radius: 50%;
margin-left: 4px;
vertical-align: middle;
border: 1px solid var(--paper);
}
/* 中心 root chip — 浮在十字交点 */
.csm-rootchip {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
background: var(--paper);
border: 2px solid var(--vermilion);
color: var(--vermilion-2);
padding: 6px 14px;
font-family: "Ma Shan Zheng", serif;
font-size: 14px;
letter-spacing: 0.2em;
cursor: pointer;
border-radius: 3px;
box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 35%, transparent);
transition: background .12s, transform .12s;
}
.csm-rootchip:hover {
background: color-mix(in srgb, var(--paper) 100%, white 5%);
transform: translate(-50%, -50%) translateY(-1px);
}
.csm-rootchip[data-cur="1"] {
background: #f7d873;
color: #4a3520;
box-shadow: 0 0 0 2px #c98b35 inset, 0 0 12px color-mix(in srgb, #c98b35 60%, transparent);
}
.csm-rootchip[data-cur="1"]::after { content: " ★"; }
/* 山门外 / 城外 行（HQ 的 wild 子节点） */
.csm-wild {
display: flex; flex-wrap: wrap; align-items: center;
gap: 6px 8px;
margin-top: 10px;
padding: 6px 0 4px;
border-top: 1px dotted color-mix(in srgb, var(--paper-edge) 60%, transparent);
}
.csm-wild-label {
font-family: "Ma Shan Zheng", serif;
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.2em;
border-left: 3px solid #5a7a4a;
padding: 0 6px;
margin-right: 4px;
}
.csm-wild-chip {
display: inline-flex;
padding: 5px 10px;
border: 1px solid #5a7a4a;
background: color-mix(in srgb, #d6e4c0 50%, var(--paper));
color: var(--ink);
cursor: pointer;
font-size: 12px;
border-radius: 3px;
font-family: "Noto Serif SC", serif;
transition: transform .12s, background .12s;
}
.csm-wild-chip:hover {
transform: translateY(-1px);
background: color-mix(in srgb, #d6e4c0 75%, var(--paper));
}
.csm-wild-chip[data-cur="1"] {
background: #f7d873;
border-color: #c98b35;
box-shadow: 0 0 0 2px #c98b35 inset;
}
.csm-wild-chip[data-cur="1"] .csm-chip-name::after { content: " ★"; }
/* 出入口带 · 26d UI 城门美化（4 方位 5 行配色 · 拱门 SVG + 方位字 + 目标地） */
.csm-exits {
display: flex; flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--paper-edge);
position: relative;
}
.csm-exits::before {
content: "出入 · 城门";
position: absolute; top: -8px; left: 12px;
padding: 0 8px;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.25em;
background:
linear-gradient(180deg, var(--paper) 0%, var(--paper) 50%, transparent 50%, transparent 100%);
}
.csm-exit-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px 8px 10px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper) 96%, transparent) 0%,
color-mix(in srgb, var(--paper-2) 92%, transparent) 100%);
border: 1px solid var(--paper-edge);
border-radius: 2px;
cursor: pointer;
font-family: "Noto Serif SC", serif;
letter-spacing: 0.08em;
transition: all .15s;
box-shadow: 0 1px 3px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, white);
position: relative;
}
.csm-exit-chip::after {
content: "";
position: absolute; left: 8px; right: 8px; bottom: 2px;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.25;
}
.csm-exit-chip:hover {
transform: translateY(-1px);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper) 88%, white) 0%,
var(--paper) 100%);
box-shadow: 0 3px 8px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--paper) 50%, white);
}
.csm-exit-chip .gate-arch {
width: 22px; height: 16px;
flex-shrink: 0;
opacity: 0.85;
}
.csm-exit-chip .gate-label {
display: inline-flex; align-items: baseline;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
}
.csm-exit-chip .gate-dir {
font-size: 17px; line-height: 1;
color: currentColor;
font-weight: 600;
}
.csm-exit-chip .gate-men {
font-size: 12px; line-height: 1;
color: currentColor;
opacity: 0.7;
margin-left: 1px;
}
.csm-exit-chip .gate-target {
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.06em;
border-left: 1px dashed color-mix(in srgb, var(--frame) 40%, transparent);
padding-left: 7px;
margin-left: 2px;
}
/* 4 方位古风配色（东青/西白/南赤/北玄）+ 兜底 dir-x */
.csm-exit-chip.dir-e { color: var(--azure); border-color: color-mix(in srgb, var(--azure) 55%, transparent); }
.csm-exit-chip.dir-w { color: var(--gold-2); border-color: color-mix(in srgb, var(--gold-2) 55%, transparent); }
.csm-exit-chip.dir-s { color: var(--vermilion); border-color: color-mix(in srgb, var(--vermilion) 55%, transparent); }
.csm-exit-chip.dir-n { color: var(--ink-2); border-color: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.csm-exit-chip.dir-x { color: var(--jade); border-color: color-mix(in srgb, var(--jade) 55%, transparent); }
.csm-exit-chip.dir-e:hover { background: color-mix(in srgb, var(--azure) 8%, var(--paper)); }
.csm-exit-chip.dir-w:hover { background: color-mix(in srgb, var(--gold-2) 8%, var(--paper)); }
.csm-exit-chip.dir-s:hover { background: color-mix(in srgb, var(--vermilion) 8%, var(--paper)); }
.csm-exit-chip.dir-n:hover { background: color-mix(in srgb, var(--ink-soft) 8%, var(--paper)); }
.csm-exit-chip.dir-x:hover { background: color-mix(in srgb, var(--jade) 8%, var(--paper)); }
/* =====================================================================
登录 splash — 古卷入江湖
===================================================================== */
.login-splash {
position: fixed; inset: 0;
z-index: 200;
overflow: auto;
background:
radial-gradient(ellipse 480px 360px at 18% 30%,
color-mix(in srgb, var(--vermilion) 22%, transparent) 0%,
transparent 70%),
radial-gradient(ellipse 900px 600px at 50% 110%,
color-mix(in srgb, var(--paper-edge) 30%, transparent) 0%,
transparent 60%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 24px 24px;
font-family: "Noto Serif SC", "Songti SC", serif;
color: var(--ink);
}
.login-splash::before,
.login-splash::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
/* 远山墨痕 */
.login-splash::before {
inset: auto 0 0 0;
height: 38vh;
background:
linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ink) 6%, transparent) 100%),
repeating-linear-gradient(135deg,
transparent 0 30px,
color-mix(in srgb, var(--ink) 4%, transparent) 30px 60px);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%);
mask-image: linear-gradient(180deg, transparent 0%, #000 50%);
opacity: .55;
}
/* 落款竖排 */
.login-splash > .splash-side-verse {
position: absolute;
right: 28px;
bottom: 26px;
writing-mode: vertical-rl;
font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 14px;
letter-spacing: 0.6em;
color: color-mix(in srgb, var(--ink) 35%, transparent);
z-index: 1;
}
.login-splash > .splash-corner-date {
position: absolute;
left: 28px;
top: 22px;
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.45em;
color: color-mix(in srgb, var(--ink) 45%, transparent);
z-index: 1;
}
.login-splash > .splash-corner-date::before,
.login-splash > .splash-corner-date::after {
content: "—";
margin: 0 6px;
color: color-mix(in srgb, var(--ink) 30%, transparent);
}
/* 卷轴主体 */
.login-scroll {
position: relative;
z-index: 2;
width: min(560px, 100%);
margin: 30px 0;
background:
radial-gradient(ellipse at 8% 4%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 35%),
linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper-2) 90%, var(--paper)) 100%);
border: 1px solid var(--paper-edge);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--frame-dark) 50%, transparent),
0 18px 48px color-mix(in srgb, var(--ink) 35%, transparent);
padding: 56px 50px 28px;
}
/* 卷轴上下木轴 */
.login-scroll::before,
.login-scroll::after {
content: "";
position: absolute;
left: -14px; right: -14px;
height: 14px;
background:
linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 50%, var(--gold-2) 100%);
border: 1px solid var(--frame-dark);
border-radius: 8px;
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
inset 0 -2px 4px color-mix(in srgb, var(--ink) 50%, transparent);
}
.login-scroll::before { top: -7px; }
.login-scroll::after { bottom: -7px; }
/* 江湖令牌 印章 */
.login-token-seal {
position: absolute;
top: 14px; right: 18px;
width: 56px; height: 68px;
background: linear-gradient(135deg, var(--vermilion) 0%, var(--vermilion-2) 100%);
color: #f7e7c8;
display: flex; align-items: center; justify-content: center;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 17px;
letter-spacing: 0.05em;
line-height: 1.05;
writing-mode: vertical-rl;
transform: rotate(6deg);
border: 2px solid color-mix(in srgb, var(--vermilion-2) 70%, #000);
box-shadow:
0 2px 8px color-mix(in srgb, var(--ink) 40%, transparent),
inset 0 0 0 3px color-mix(in srgb, var(--vermilion-2) 60%, transparent);
z-index: 3;
}
/* 标题区 */
.login-title {
text-align: center;
font-family: "Ma Shan Zheng", "ZCOOL QingKe HuangYou", "Noto Serif SC", serif;
font-size: clamp(38px, 7vw, 60px);
margin: 0 0 6px;
color: var(--ink);
letter-spacing: 0.18em;
text-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.login-subtitle {
text-align: center;
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 14px;
letter-spacing: 0.5em;
color: var(--ink-soft);
margin: 0 0 18px;
}
.login-divider {
display: flex; align-items: center; gap: 12px;
margin: 0 auto 22px;
width: 60%;
color: var(--vermilion);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 14px;
letter-spacing: 0.4em;
white-space: nowrap;
}
.login-divider::before,
.login-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--vermilion) 60%, transparent),
transparent);
}
/* 古诗题字 */
.login-poem {
text-align: center;
font-family: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
color: var(--ink-2);
font-size: 18px;
line-height: 2.1;
letter-spacing: 0.18em;
margin: 4px 0 6px;
}
.login-poem .pcite {
display: block;
margin-top: 8px;
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 12px;
letter-spacing: 0.4em;
color: var(--vermilion);
}
.login-poem .pcite::before { content: "— "; }
/* 表单 */
.login-form {
display: flex; flex-direction: column;
gap: 12px;
margin: 22px 0 12px;
}
.login-field {
display: flex; align-items: stretch;
border: 1px solid var(--paper-edge);
background: color-mix(in srgb, var(--paper) 70%, var(--paper-2));
transition: all .2s;
}
.login-field:focus-within {
border-color: var(--vermilion);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--vermilion) 18%, transparent);
}
.login-field .lbl {
width: 44px;
display: flex; align-items: center; justify-content: center;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
color: var(--vermilion);
font-size: 18px;
border-right: 1px solid color-mix(in srgb, var(--paper-edge) 60%, transparent);
}
.login-field input {
flex: 1;
border: none; outline: none;
background: transparent;
padding: 11px 12px;
font-family: "Noto Serif SC", serif;
font-size: 14px;
color: var(--ink);
letter-spacing: 0.08em;
}
.login-field input::placeholder {
color: color-mix(in srgb, var(--ink) 35%, transparent);
letter-spacing: 0.15em;
}
.login-field .toggle-pw {
width: 44px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--ink-soft);
background: transparent;
border: none;
font-size: 16px;
user-select: none;
}
.login-field .toggle-pw:hover { color: var(--vermilion); }
.login-row {
display: flex; align-items: center; justify-content: space-between;
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 0.1em;
margin-bottom: 10px;
}
.login-remember {
display: flex; align-items: center; gap: 6px;
cursor: pointer;
user-select: none;
}
.login-remember input { display: none; }
.login-remember .box {
width: 14px; height: 14px;
border: 1px solid var(--paper-edge);
background: var(--paper);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
color: var(--vermilion);
line-height: 1;
}
.login-remember input:checked + .box::after { content: "✓"; }
.login-actions {
display: flex; gap: 14px;
margin: 6px 0 22px;
}
.login-actions button {
flex: 1;
padding: 14px 0;
border: 1px solid var(--frame-dark);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 22px;
letter-spacing: 0.5em;
text-indent: 0.5em;
cursor: pointer;
transition: all .15s;
}
.login-btn-primary {
background: linear-gradient(180deg, var(--vermilion) 0%, var(--vermilion-2) 100%);
color: #fff5e6;
border-color: var(--vermilion-2);
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent),
0 2px 6px color-mix(in srgb, var(--vermilion) 35%, transparent);
}
.login-btn-primary:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.login-btn-secondary {
background: linear-gradient(180deg,
color-mix(in srgb, var(--gold) 35%, var(--paper)) 0%,
color-mix(in srgb, var(--gold) 22%, var(--paper-2)) 100%);
color: var(--ink);
border-color: var(--frame-dark);
}
.login-btn-secondary:hover {
background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
color: #fff5e6;
}
.login-actions button:disabled {
opacity: .55;
cursor: wait;
}
.login-error {
margin: -2px 0 12px;
padding: 8px 12px;
background: color-mix(in srgb, var(--vermilion) 10%, var(--paper));
border-left: 3px solid var(--vermilion);
color: var(--vermilion-2);
font-size: 13px;
letter-spacing: 0.05em;
}
/* 底部落款印 + 版本 */
.login-footer {
display: flex; align-items: center; justify-content: center;
gap: 14px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed color-mix(in srgb, var(--paper-edge) 70%, transparent);
color: var(--ink-soft);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 12px;
letter-spacing: 0.3em;
}
.login-footer .seal {
display: inline-block;
padding: 3px 8px;
border: 1px solid var(--vermilion);
color: var(--vermilion);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.15em;
}
.login-server {
text-align: center;
font-size: 11px;
color: color-mix(in srgb, var(--ink) 35%, transparent);
letter-spacing: 0.15em;
margin-top: 6px;
word-break: break-all;
}
/* 选角 / 创角 — 卷轴宽幅 */
.login-scroll.wide { width: min(760px, 100%); padding: 56px 56px 28px; }
/* 卷轴小节标题（朱印 + 横线） */
.cc-section { margin: 18px 0 10px; }
.cc-section-title {
display: flex; align-items: center; gap: 12px;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
color: var(--vermilion);
font-size: 17px;
letter-spacing: 0.3em;
margin: 0 0 10px;
}
.cc-section-title::before {
content: "";
width: 10px; height: 10px;
border: 1px solid var(--vermilion);
background: color-mix(in srgb, var(--vermilion) 18%, transparent);
flex: none;
}
.cc-section-title::after {
content: "";
flex: 1; height: 1px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--vermilion) 50%, transparent),
transparent);
}
.cc-section-hint {
color: var(--ink-soft);
font-size: 12px;
letter-spacing: 0.15em;
margin: -4px 0 8px;
}
/* 创角内 .faction-card 复用 modal 同款样式 */
.login-splash .faction-card {
border: 1px solid var(--paper-edge);
padding: 10px 12px;
cursor: pointer;
background: color-mix(in srgb, var(--paper) 60%, var(--paper-2));
width: calc(50% - 4px);
transition: all .2s;
box-sizing: border-box;
}
.login-splash .faction-card:hover {
background: var(--paper);
border-color: var(--frame-dark);
}
.login-splash .faction-card.sel {
border: 2px solid var(--vermilion);
background: var(--paper);
box-shadow: 0 0 0 1px var(--vermilion);
}
.login-splash .faction-card .nm {
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-weight: 400;
font-size: 17px;
letter-spacing: 0.1em;
color: var(--vermilion);
}
.login-splash .faction-card .sk { font-size: 12px; margin-top: 4px; color: var(--ink-2); line-height: 1.6; }
.cc-grid { display: flex; flex-wrap: wrap; gap: 8px; }
/* 创角 — 名号 / 头像 / 性别 行 */
.cc-name-input {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--paper-edge);
background: color-mix(in srgb, var(--paper) 70%, var(--paper-2));
color: var(--ink);
font-family: "Noto Serif SC", serif;
font-size: 15px;
letter-spacing: 0.15em;
outline: none;
transition: all .2s;
box-sizing: border-box;
}
.cc-name-input:focus {
border-color: var(--vermilion);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--vermilion) 18%, transparent);
}
.cc-avatar-row {
display: flex; align-items: center; gap: 10px;
}
.cc-avatar-prev {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
flex: none;
}
.cc-avatar-prev img,
.cc-avatar-prev > span {
width: 56px !important; height: 56px !important;
border-radius: 50% !important; border: 2px solid var(--vermilion) !important;
object-fit: cover;
text-align: center; line-height: 52px;
color: var(--vermilion);
font-family: "Ma Shan Zheng", serif;
font-size: 22px;
}
.cc-avatar-prev > span {
border-style: dashed !important;
background: color-mix(in srgb, var(--paper) 60%, transparent);
}
.cc-avatar-input { flex: 1; }
.cc-pick-btn {
padding: 9px 14px;
border: 1px solid var(--frame-dark);
background: linear-gradient(180deg,
color-mix(in srgb, var(--gold) 30%, var(--paper)) 0%,
color-mix(in srgb, var(--gold) 18%, var(--paper-2)) 100%);
color: var(--ink);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.2em;
cursor: pointer;
transition: all .15s;
}
.cc-pick-btn:hover {
background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
color: #fff5e6;
}
/* 创角 — 资质榜 */
.cc-stats {
border: 1px solid var(--paper-edge);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--paper) 60%, transparent) 0%,
color-mix(in srgb, var(--gold) 6%, transparent) 100%);
padding: 14px 18px;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 2;
color: var(--ink-2);
position: relative;
}
.cc-stats::before {
content: "資";
position: absolute;
top: -10px; left: 14px;
background: var(--paper);
padding: 0 8px;
color: var(--vermilion);
font-family: "Ma Shan Zheng", serif;
font-size: 14px;
letter-spacing: 0;
}
.cc-stats .lbl {
display: inline-block; width: 52px;
color: var(--ink-soft);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
letter-spacing: 0.05em;
}
.cc-stats .lbl.charm { color: var(--vermilion); }
.cc-stats .total { color: var(--ink); }
.cc-reroll {
margin-top: 8px;
padding: 7px 18px;
border: 1px dashed var(--paper-edge);
background: transparent;
color: var(--ink-soft);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.3em;
cursor: pointer;
transition: all .15s;
}
.cc-reroll:hover {
border-style: solid;
border-color: var(--vermilion);
color: var(--vermilion);
}
.cc-note {
margin: 14px 0 6px;
padding: 10px 14px;
border-left: 3px solid var(--gold);
background: color-mix(in srgb, var(--gold) 8%, transparent);
color: var(--ink-2);
font-size: 13px;
letter-spacing: 0.05em;
line-height: 1.7;
}
/* 选角列表 */
.cs-list {
display: flex; flex-direction: column;
gap: 10px;
margin: 6px 0 18px;
}
.cs-card {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
border: 1px solid var(--paper-edge);
background: color-mix(in srgb, var(--paper) 65%, var(--paper-2));
cursor: pointer;
transition: all .2s;
}
.cs-card:hover {
background: var(--paper);
border-color: var(--vermilion);
transform: translateX(2px);
}
.cs-card-body { flex: 1; min-width: 0; }
.cs-card-name {
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 19px;
letter-spacing: 0.12em;
color: var(--vermilion);
}
.cs-card-meta {
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.08em;
margin-top: 3px;
}
.cs-card-room {
font-size: 12px;
color: var(--ink-2);
margin-top: 2px;
}
.cs-card-del {
padding: 6px 12px;
border: 1px solid color-mix(in srgb, var(--vermilion) 60%, transparent);
background: transparent;
color: var(--vermilion);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.2em;
cursor: pointer;
transition: all .15s;
}
.cs-card-del:hover {
background: var(--vermilion);
color: #fff5e6;
}
.cs-empty {
padding: 28px 12px;
text-align: center;
color: var(--ink-soft);
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 16px;
letter-spacing: 0.3em;
border: 1px dashed var(--paper-edge);
margin: 6px 0 18px;
}
.cs-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 14px;
}
.cs-back {
padding: 9px 18px;
border: 1px solid var(--frame-dark);
background: transparent;
color: var(--ink-soft);
font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
font-size: 13px;
letter-spacing: 0.3em;
cursor: pointer;
transition: all .15s;
}
.cs-back:hover {
background: color-mix(in srgb, var(--ink) 8%, transparent);
color: var(--ink);
}
.cs-create-btn {
padding: 10px 28px;
border: 1px solid var(--vermilion-2);
background: linear-gradient(180deg, var(--vermilion) 0%, var(--vermilion-2) 100%);
color: #fff5e6;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 17px;
letter-spacing: 0.4em;
text-indent: 0.4em;
cursor: pointer;
transition: all .15s;
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent),
0 2px 6px color-mix(in srgb, var(--vermilion) 30%, transparent);
}
.cs-create-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc-confirm-btn {
padding: 12px 36px;
border: 1px solid var(--vermilion-2);
background: linear-gradient(180deg, var(--vermilion) 0%, var(--vermilion-2) 100%);
color: #fff5e6;
font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
font-size: 20px;
letter-spacing: 0.5em;
text-indent: 0.5em;
cursor: pointer;
transition: all .15s;
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent),
0 2px 8px color-mix(in srgb, var(--vermilion) 30%, transparent);
}
.cc-confirm-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc-foot {
display: flex; align-items: center; justify-content: space-between;
margin: 18px 0 4px;
}
/* 移动端 */
@media (max-width: 640px) {
.login-splash { padding: 24px 14px; }
.login-scroll { padding: 44px 22px 22px; margin: 16px 0; }
.login-scroll.wide { padding: 44px 22px 22px; }
.login-token-seal { width: 44px; height: 54px; font-size: 14px; top: 10px; right: 12px; }
.login-title { font-size: 40px; letter-spacing: 0.12em; }
.login-subtitle { font-size: 12px; letter-spacing: 0.35em; }
.login-divider { width: 80%; }
.login-poem { font-size: 15px; line-height: 2; letter-spacing: 0.12em; }
.login-actions button { font-size: 18px; padding: 12px 0; letter-spacing: 0.4em; }
.login-splash > .splash-side-verse { font-size: 11px; right: 10px; bottom: 14px; }
.login-splash > .splash-corner-date { font-size: 11px; left: 12px; top: 12px; }
.login-splash .faction-card { width: 100%; }
.cc-avatar-row { flex-wrap: wrap; }
.cc-avatar-input { flex: 1 1 100%; }
}