/* ============================================================
   站长状态面板 · 日式 RPG 风格
   配色遵循一般 RPG 惯例（克制使用）：
   白 = 普通文本 / 金 = 重要高亮 / 绿 = BUFF·生命 / 红 = 危险 / 蓝 = 魔法·信息 / 灰 = 无效
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --gold:  #ffd24a;
    --green: #58e05a;
    --red:   #ff5a5a;
    --blue:  #6aa9ff;
    --gray:  #9aa3c0;
    --line:  #dfe6ff;
    --panel1:#24399e;
    --panel2:#101a55;
    --ink:   #f4f6ff;
}

html, body { min-height: 100%; }

body {
    font-family: "Zpix", "SimSun", "NSimSun", "Microsoft YaHei", monospace;
    color: var(--ink);
    letter-spacing: .5px;
    font-size: 15px;
    line-height: 1.65;
    background:
        radial-gradient(1200px 700px at 50% -10%, #1c2a6e 0%, #0d1236 55%, #070a1c 100%) fixed;
    padding: 18px 12px 40px;
}

/* CRT 扫描线 + 暗角 */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 2px, transparent 2px 4px);
}
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
    box-shadow: inset 0 0 140px rgba(0,0,0,.55);
}

.stage { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* ---------- 标题 / 页脚 ---------- */
.site-title {
    text-align: center; color: var(--gold); font-size: 20px; letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(255,210,74,.4), 2px 2px 0 #000;
}
.foot { text-align: center; color: var(--gray); font-size: 12px; }

/* ---------- RPG 窗口 ---------- */
.win {
    position: relative;
    border: 3px solid var(--line);
    border-radius: 6px;
    background: linear-gradient(180deg, var(--panel1) 0%, var(--panel2) 100%);
    box-shadow:
        inset 0 0 0 2px #0a1136,
        inset 0 0 0 4px rgba(140,160,255,.45),
        0 6px 16px rgba(0,0,0,.45);
    padding: 14px 16px 16px;
}
.win-head {
    color: var(--gold); font-size: 14px; text-align: center; margin-bottom: 10px;
    text-shadow: 0 0 6px rgba(255,210,74,.35);
}

/* ---------- 角色窗口 ---------- */
.char-row { display: flex; gap: 14px; align-items: center; }
.avatar {
    width: 4.2em; height: 4.2em; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--line); border-radius: 6px;
    background: #0a1136; box-shadow: inset 0 0 0 2px rgba(140,160,255,.35);
    overflow: hidden;
}
.avatar .icon-emoji { font-size: 2.5em; line-height: 1; }
.avatar .icon-img { width: 100%; height: 100%; border-radius: 0; }
.char-info { flex: 1; min-width: 0; }
.char-name { font-size: 18px; font-weight: bold; margin-bottom: 2px; }
.char-name .lv { font-size: 13px; margin-left: 10px; font-weight: normal; }

.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.bar-label { width: 28px; font-weight: bold; letter-spacing: 1px; flex: none; }
.bar {
    flex: 1; height: 16px; border: 2px solid var(--line); border-radius: 3px;
    background: #070b20; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
}
.bar-fill { height: 100%; width: 0; transition: width .5s steps(10); }
.bar-fill.hp.hi  { background: repeating-linear-gradient(90deg, #58e05a 0 10px, #3cbf49 10px 13px); }
.bar-fill.hp.mid { background: repeating-linear-gradient(90deg, #ffd24a 0 10px, #e0a92e 10px 13px); }
.bar-fill.hp.low { background: repeating-linear-gradient(90deg, #ff5a5a 0 10px, #d63a3a 10px 13px); }
.bar-fill.mp     { background: repeating-linear-gradient(90deg, #6aa9ff 0 10px, #4a7fd9 10px 13px); }
.bar-num { width: 34px; text-align: right; font-size: 13px; flex: none; }

.legend { font-size: 12px; margin-top: 6px; text-align: right; }

.main-state { margin-top: 10px; font-size: 17px; display: flex; align-items: center; flex-wrap: wrap; }
.cursor { color: var(--gold); margin-right: 8px; animation: blink 1.1s steps(1) infinite; }
.main-icon { display: inline-flex; vertical-align: middle; margin: 0 .1em; }
.main-icon.icon-emoji { font-size: 1.15em; line-height: 1; }
img.main-icon {
    width: 1.35em; height: 1.35em; border-radius: 4px; object-fit: cover;
    margin: 0 .15em;
}
.main-note { margin-left: 10px; font-size: 12.5px; }

/* ---------- 图标通用（emoji 与上传图片统一为固定方形，em 尺寸随页面缩放） ---------- */
.icon-img { object-fit: cover; border-radius: 4px; display: block; }
.buff-icon, .st-icon {
    width: 1.7em; height: 1.7em; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; overflow: hidden; border-radius: 4px;
}
.buff-icon.icon-emoji, .st-icon.icon-emoji { font-size: 1.25em; line-height: 1; }
img.buff-icon, img.st-icon { border: 1px solid rgba(140,160,255,.35); }

/* ---------- BUFF 列表 ---------- */
.buff-list, .status-list { list-style: none; }
.buff {
    display: flex; align-items: center; gap: 10px; padding: 7px 2px;
    border-bottom: 1px dashed rgba(140,160,255,.25);
}
.buff:last-child { border-bottom: none; }
.buff-icon { font-size: 20px; width: 26px; text-align: center; flex: none; }
.buff-name { font-weight: bold; }
.buff-note { margin-left: auto; font-size: 12.5px; text-align: right; }
.empty { color: var(--gray); font-size: 13px; text-align: center; padding: 6px 0; }

/* ---------- 留言窗口 ---------- */
.win-msg .msg-text { min-height: 72px; white-space: pre-line; font-size: 14.5px; }
.msg-more { position: absolute; right: 12px; bottom: 8px; color: var(--gold); font-size: 12px; }

/* ---------- 通用颜色 / 动画 ---------- */
.t-gold { color: var(--gold); } .t-green { color: var(--green); } .t-blue { color: var(--blue); }
.t-red  { color: var(--red); }  .t-gray  { color: var(--gray); }
.blink  { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.small { font-size: 12px; }

/* ---------- 表单 / 按钮（管理页） ---------- */
input, select, button { font-family: inherit; font-size: 14px; letter-spacing: .5px; }
.input {
    background: #070b20; border: 2px solid rgba(140,160,255,.6); border-radius: 3px;
    color: var(--ink); padding: 6px 8px; outline: none; width: 100%;
}
.input:focus { border-color: var(--gold); }

.btn {
    background: #1b2a72; border: 2px solid var(--line); color: var(--ink);
    border-radius: 3px; padding: 6px 14px; cursor: pointer;
    box-shadow: 0 3px 0 rgba(0,0,0,.45);
}
.btn:hover  { background: #2a3f9e; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.btn-primary { background: #6e5210; border-color: var(--gold); color: var(--gold); }
.btn-primary:hover { background: #8f6c14; }
.btn-danger { background: #4a121c; border-color: #ff8a8a; color: #ff9a9a; }
.btn-danger:hover { background: #6b1a28; }
.btn-sm { padding: 3px 8px; font-size: 12.5px; }
.btn-block { width: 100%; margin-top: 10px; }

.field-label { color: var(--gold); font-size: 13px; display: block; margin: 10px 0 4px; }
.err { color: var(--red); font-size: 13px; min-height: 1.2em; margin-top: 6px; }

.slider-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.slider-row input[type=range] { flex: 1; }
.slider-row.hp input[type=range] { accent-color: #58e05a; }
.slider-row.mp input[type=range] { accent-color: #6aa9ff; }

/* ---------- 管理页：状态行 ---------- */
.st-row { border-bottom: 1px dashed rgba(140,160,255,.3); padding: 10px 2px; }
.st-row:last-child { border-bottom: none; }
.st-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-name { font-size: 15.5px; font-weight: bold; }
.st-type { font-size: 11px; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }
.st-state { margin-left: auto; font-size: 13px; }
.st-state.on  { color: var(--green); }
.st-state.off { color: var(--gray); }
.st-note { font-size: 12px; color: var(--gray); margin: 3px 0 6px 34px; }
.st-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 34px; }
.st-btns .temp-min {
    width: 56px; background: #070b20; border: 2px solid rgba(140,160,255,.6);
    color: var(--ink); border-radius: 3px; padding: 3px 5px; font-size: 12.5px;
}

.st-panel {
    margin: 10px 0 2px 34px; background: rgba(7,11,32,.6);
    border: 1px solid rgba(140,160,255,.35); border-radius: 4px; padding: 10px;
}
.rule-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 0; border-bottom: 1px dashed rgba(140,160,255,.2);
}
.rule-row:last-of-type { border-bottom: none; }
.rule-row input[type=time] {
    background: #070b20; border: 2px solid rgba(140,160,255,.6); color: var(--ink);
    border-radius: 3px; padding: 2px 4px; font-size: 12.5px;
}
.day-group { display: flex; gap: 2px; }
.day-group label {
    border: 1px solid rgba(140,160,255,.5); border-radius: 3px; padding: 2px 6px;
    font-size: 12px; cursor: pointer; color: var(--gray);
}
.day-group label:has(input:checked) { color: var(--gold); border-color: var(--gold); }
.day-group input { display: none; }

.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit-grid .field-label { margin-top: 2px; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; margin-top: 6px; }
.emoji-row button {
    font-size: 16px; background: #0a1136; border: 1px solid rgba(140,160,255,.4);
    border-radius: 3px; padding: 2px 6px; cursor: pointer;
}
.emoji-row button:hover { border-color: var(--gold); }
.panel-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- 图标上传 / 预览 ---------- */
.icon-field { display: flex; gap: 6px; align-items: center; }
.icon-field .input { flex: 1; min-width: 0; }
.icon-preview { margin-top: 6px; line-height: 0; }
.prev-icon {
    width: 2.6em; height: 2.6em;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(140,160,255,.5); border-radius: 4px;
    background: #0a1136; overflow: hidden; vertical-align: middle;
}
.prev-icon.icon-emoji { font-size: 1.7em; line-height: 1; }
img.prev-icon { object-fit: cover; }

/* ---------- 大状态描述 + BUFF 列表描述 ---------- */
.main-desc {
    margin: 10px 0 0 26px;
    font-size: 12.5px;
    color: var(--gray);
    font-style: italic;
    line-height: 1.5;
    max-width: 32em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buff-desc {
    flex: 1;
    min-width: 0;
    margin-left: 10px;
    text-align: right;
    font-size: 12.5px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 行动菜单 ---------- */
.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.action-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px;
}
.act-icon {
    width: 1.8em; height: 1.8em;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3em; line-height: 1;
}
img.act-icon { border-radius: 4px; object-fit: cover; }
.action-user-bar {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 13px;
    padding-top: 4px; border-top: 1px dashed rgba(140,160,255,.25);
    margin-top: 2px;
}
.action-user-bar .btn { margin-left: auto; }

/* ---------- 技能 / 背包 / 模态 ---------- */
.skill-row, .item-row {
    border-bottom: 1px dashed rgba(140,160,255,.2);
    padding: 8px 0;
}
.skill-row:last-child, .item-row:last-child { border-bottom: none; }
.skill-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
}
.skill-desc { margin: 6px 0 10px; font-style: italic; line-height: 1.6; }
.item-row.item-dim { opacity: .45; filter: saturate(.4); }
.item-row .t-gray { margin-top: 4px; }

/* ---------- 通用模态框（JRPG 对话窗） ---------- */
/* 统一显示/隐藏机制：只认 hidden 属性。必须显式声明 display:none，
   否则下面的 .modal{display:flex} 会覆盖浏览器默认的 [hidden]{display:none}，
   导致空遮罩常驻盖住页面 */
.modal[hidden] { display: none; }
.modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.modal-mask {
    position: absolute; inset: 0;
    background: rgba(5,8,24,.75);
    backdrop-filter: blur(3px);
}
.modal-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: min(88vh, 640px);
    overflow-y: auto;
    animation: popin .18s ease-out;
}
@keyframes popin {
    from { transform: translateY(8px) scale(.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.modal-body textarea.input { resize: vertical; min-height: 96px; }
.modal-foot {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.modal-foot .btn:first-child { margin-right: auto; }

@media (max-width: 560px) {
    .action-grid { grid-template-columns: repeat(2, 1fr); }
    .buff-desc { display: none; }   /* 手机端 BUFF 描述只保留 hover title，避免溢出换行 */
    .main-desc { white-space: normal; }
}

/* ---------- 驿站消息 ---------- */
.inbox-tabs {
    display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(140,160,255,.2);
    padding-bottom: 6px;
}
.inbox-tabs .tab {
    border: none;
    background: transparent;
    color: var(--gray);
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 13px;
}
.inbox-tabs .tab:hover { background: rgba(140,160,255,.08); color: var(--text); }
.inbox-tabs .tab.active {
    background: rgba(140,160,255,.14);
    color: var(--gold);
}
.inbox-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.inbox-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: rgba(12,20,56,.55);
    border: 1px solid rgba(140,160,255,.18);
    border-radius: 3px;
}
.inbox-icon {
    width: 2em; height: 2em;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4em; line-height: 1;
    flex-shrink: 0;
}
img.inbox-icon { object-fit: cover; border-radius: 4px; }
.inbox-body { flex: 1; min-width: 0; }
.inbox-title { margin-bottom: 2px; }
.inbox-content {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(0,0,0,.25);
    border-left: 2px solid rgba(140,160,255,.4);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    max-height: 160px;
    overflow: hidden;
}
.junk-pager { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* 拆封插画 */
.seal-box { text-align: center; padding: 12px 4px; }
.seal-box p { margin: 8px 0; }
.plane-illust, .bottle-illust {
    font-size: 4em;
    line-height: 1;
    margin: 10px 0;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
    animation: bob 2.2s ease-in-out infinite;
}
.plane-illust { transform-origin: center; }
.bottle-illust { animation: sway 3.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(5deg); } }
@keyframes sway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.letter-paper {
    background: rgba(255,250,230,.94);
    color: #2a1d0c;
    border: 1px solid #bfa77a;
    padding: 18px 18px 14px;
    border-radius: 3px;
    margin: 10px 0;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    line-height: 1.8;
    font-family: "KaiTi", "STKaiti", "楷体", "Georgia", serif;
    background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(180,150,90,.18) 31px 32px);
}
.letter-paper p { margin: 0 0 14px; white-space: pre-wrap; word-break: break-word; }

.toast {
    position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
    padding: 10px 18px; border-radius: 4px; z-index: 10000;
    background: rgba(15,20,48,.92);
    border: 1px solid rgba(140,160,255,.3);
    color: var(--text);
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.toast.err { color: #ff9aa8; border-color: rgba(255,120,140,.4); }
.toast.ok  { color: #c2f7c5; border-color: rgba(130,220,140,.4); }

/* ============================================================
   战斗特效层（攻击指令）——不是弹窗：整层 pointer-events:none，
   只做 JRPG 式斩击演出，斩完即散，绝不阻挡页面操作
   ============================================================ */
#battle-fx {
    position: fixed; inset: 0; z-index: 9998;
    display: none; pointer-events: none; overflow: hidden;
}
#battle-fx.fx-on { display: block; }

/* 命中闪光 */
.fx-flash {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.95), rgba(170,215,255,.35) 42%, transparent 72%);
}
#battle-fx.fx-strike .fx-flash { animation: fxFlash .45s ease-out; }
@keyframes fxFlash {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
}

/* 两道对角斩击光刃 */
.fx-slash {
    position: absolute; left: -30%; width: 160%; height: 5px;
    border-radius: 4px; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 42%, #b9e2ff 50%, rgba(255,255,255,.95) 58%, transparent);
    box-shadow: 0 0 18px rgba(180,225,255,.9), 0 0 46px rgba(120,180,255,.55);
}
.fx-slash-a { top: 30%; }
.fx-slash-b { top: 44%; }
#battle-fx.fx-strike .fx-slash-a { animation: fxSlashA .4s ease-out .02s; }
#battle-fx.fx-strike .fx-slash-b { animation: fxSlashB .36s ease-out .12s; }
@keyframes fxSlashA {
    0%   { opacity: 0; transform: rotate(-16deg) scaleX(0); }
    35%  { opacity: 1; }
    70%  { opacity: 1; transform: rotate(-16deg) scaleX(1); }
    100% { opacity: 0; transform: rotate(-16deg) scaleX(1.08); }
}
@keyframes fxSlashB {
    0%   { opacity: 0; transform: rotate(11deg) scaleX(0); }
    35%  { opacity: 1; }
    70%  { opacity: 1; transform: rotate(11deg) scaleX(1); }
    100% { opacity: 0; transform: rotate(11deg) scaleX(1.08); }
}

/* JRPG 战斗信息条 */
.fx-line {
    position: absolute; left: 50%; width: max-content; max-width: 86%;
    opacity: 0; transform: translate(-50%, 14px);
    padding: 8px 18px; border-radius: 8px;
    border: 2px solid #6a5230; background: rgba(10,12,34,.85);
    font-weight: 700; letter-spacing: 2px;
    text-shadow: 0 2px 0 rgba(0,0,0,.6);
}
.fx-line-1 { top: 10%; color: var(--gold); }
.fx-line-2 { bottom: 9%; color: #cfd8ff; }
.fx-line-1.show { animation: fxLineIn .45s ease-out forwards, fxLineOut .5s ease-in 2.5s forwards; }
.fx-line-2.show { animation: fxLineIn .45s ease-out .1s forwards, fxLineOut .5s ease-in 2.2s forwards; }
@keyframes fxLineIn {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fxLineOut {
    to   { opacity: 0; transform: translate(-50%, -8px); }
}

/* MISS 伤害数字（在角色窗口附近弹起飘走） */
.fx-miss {
    position: absolute; left: 50%; top: 24%;
    opacity: 0; transform: translate(-50%, 0) scale(.4);
}
.fx-miss.show { animation: fxMiss 1.9s cubic-bezier(.2,1.5,.4,1) forwards; }
.fx-miss-txt {
    font-size: 58px; font-weight: 900; font-style: italic;
    letter-spacing: 6px; color: var(--gold);
    text-shadow: 0 3px 0 #7a4b00, 0 0 24px rgba(255,210,74,.7), 0 0 6px #fff;
}
@keyframes fxMiss {
    0%   { opacity: 0; transform: translate(-50%, 24px) scale(.4); }
    16%  { opacity: 1; transform: translate(-50%, 0) scale(1.3); }
    30%  { transform: translate(-50%, -8px) scale(1); }
    78%  { opacity: 1; transform: translate(-50%, -40px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -66px) scale(.95); }
}

/* 舞台震动 */
.stage.fx-shake { animation: fxShake .42s ease-in-out; }
@keyframes fxShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-7px, 3px); }
    40% { transform: translate(6px, -4px); }
    60% { transform: translate(-5px, -3px); }
    80% { transform: translate(5px, 2px); }
}

@media (max-width: 640px) {
    .fx-miss-txt { font-size: 40px; letter-spacing: 4px; }
    .fx-line { font-size: 13px; padding: 7px 12px; letter-spacing: 1px; }
    .fx-miss { top: 20%; }
}

/* ============================================================
   逃跑特效层（扭头转身 → 背过身 → 奔向光门 → 光门充斥视野 → 离开）
   pointer-events:none，不拦截任何点击；光门颜色由 JS 根据浏览器配色方案注入
   ============================================================ */
#flee-fx {
    position: fixed; inset: 0; z-index: 9999;
    display: none; pointer-events: none; overflow: hidden;
}
#flee-fx.flee-on { display: block; }

/* 隧道暗角：四周暗、中心透出光门的方向 */
.flee-vignette {
    position: absolute; inset: 0; opacity: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.95) 100%);
}
#flee-fx.flee-on .flee-vignette { animation: fleeFadeIn .35s ease-out forwards; }
@keyframes fleeFadeIn { to { opacity: 1; } }

/* 角色背影（头 + 披风 + 两条腿），从画面下方跑向光门 */
.flee-char {
    position: absolute; left: 50%; bottom: 8%;
    width: 60px; height: 120px; margin-left: -30px;
    opacity: 0; transform-origin: 50% 100%;
}
.flee-head {
    position: absolute; top: 0; left: 50%; margin-left: -13px;
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #3a3148, #16121f);
    box-shadow: inset -3px -3px 5px rgba(0,0,0,.6);
}
.flee-cloak {
    position: absolute; top: 24px; left: 50%; margin-left: -28px;
    width: 56px; height: 74px;
    background: linear-gradient(180deg, #4a3f60 0%, #2a2336 55%, #16121f 100%);
    border-radius: 28px 28px 40px 40px / 24px 24px 56px 56px;
    box-shadow: inset -6px 0 12px rgba(0,0,0,.45), inset 6px 0 10px rgba(255,255,255,.06);
}
.flee-leg { position: absolute; bottom: 0; width: 9px; height: 26px; background: #16121f; border-radius: 4px; }
.flee-leg-l { left: 18px; }
.flee-leg-r { right: 18px; }

#flee-fx.flee-on .flee-char { animation: fleeCharRun 2.1s cubic-bezier(.5,.1,.8,.4) forwards; }
@keyframes fleeCharRun {
    0%   { opacity: 0; transform: translateY(30px) scale(1) rotateZ(0); }
    6%   { opacity: 1; transform: translateY(0) scale(1); }
    40%  { transform: translateY(-10px) scale(.82); }
    70%  { transform: translateY(-40px) scale(.42); opacity: .95; }
    100% { transform: translateY(-90px) scale(.12); opacity: 0; }
}
/* 跑步时腿摆动 */
#flee-fx.flee-on .flee-leg-l { animation: fleeLegL .22s ease-in-out infinite; }
#flee-fx.flee-on .flee-leg-r { animation: fleeLegR .22s ease-in-out infinite; }
@keyframes fleeLegL { 0%,100% { transform: rotate(18deg) translateY(0); } 50% { transform: rotate(-22deg) translateY(-4px); } }
@keyframes fleeLegR { 0%,100% { transform: rotate(-22deg) translateY(-4px); } 50% { transform: rotate(18deg) translateY(0); } }

/* 光门：一个发光的矩形门，模拟从远处照亮的出口 */
.flee-door {
    position: absolute; left: 50%; top: 50%;
    width: 180px; height: 260px; margin-left: -90px; margin-top: -130px;
    opacity: 0; transform: scale(.12);
}
.flee-door-halo {
    position: absolute; inset: -40%;
    border-radius: 14px;
    background: var(--flee-halo, radial-gradient(ellipse at center, rgba(255,240,180,.55), rgba(255,240,180,0) 70%));
    filter: blur(28px);
}
.flee-door-core {
    position: absolute; inset: 0;
    border-radius: 12px;
    background: var(--flee-core, linear-gradient(180deg, #fffdf5 0%, #ffffff 50%, #f4ecd8 100%));
    box-shadow: var(--flee-shadow, 0 0 60px rgba(255,240,180,.7), 0 0 140px rgba(255,240,180,.35), inset 0 0 30px rgba(255,255,255,.6));
}
.flee-door-shine {
    position: absolute; inset: 8%;
    border-radius: 8px;
    background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.25) 62%, rgba(255,255,255,0) 100%);
}
#flee-fx.flee-on .flee-door { animation: fleeDoorApproach 2.2s cubic-bezier(.55,.05,.7,.4) forwards; }
@keyframes fleeDoorApproach {
    0%   { opacity: 0; transform: scale(.08); filter: blur(6px); }
    8%   { opacity: 1; }
    60%  { transform: scale(.9); filter: blur(1px); opacity: 1; }
    100% { transform: scale(14); filter: blur(0); opacity: 1; }
}

/* 光门充斥视野时的全屏白化（颜色由 JS 注入，匹配浏览器配色） */
.flee-vignette::after {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: var(--flee-flash, #ffffff);
}
#flee-fx.flee-on .flee-vignette::after { animation: fleeFlash 2.2s ease-in forwards; }
@keyframes fleeFlash {
    0%, 70% { opacity: 0; }
    82%     { opacity: .25; }
    100%    { opacity: 1; }
}

@media (max-width: 640px) {
    .flee-char { width: 46px; height: 92px; margin-left: -23px; }
    .flee-head { width: 20px; height: 20px; margin-left: -10px; }
    .flee-cloak { width: 44px; height: 58px; margin-left: -22px; }
    .flee-door { width: 130px; height: 190px; margin-left: -65px; margin-top: -95px; }
}

/* ============================================================
   麻布行囊过场（打开/合上背包）
   开：行囊自画面底部升起 → 袋口松开张开 → 金光一闪 → 背包界面从袋中弹出
   合：背包界面缩回袋中 → 麻绳束口收紧 → 行囊向下落走
   该层会短暂拦截点击（开合动画期间），平时 display:none
   ============================================================ */
#bag-fx {
    position: fixed; inset: 0; z-index: 9990;
    display: none; overflow: hidden;
}
#bag-fx.bag-on { display: block; }

.bag-mask {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(ellipse at 50% 72%, rgba(24,14,4,.5) 0%, rgba(10,6,2,.9) 100%);
}
#bag-fx.bag-on .bag-mask { animation: bagMaskIn .45s ease-out forwards; }
#bag-fx.bag-on.bag-shut .bag-mask { animation: bagMaskOut .5s ease-in .4s forwards; }
@keyframes bagMaskIn  { to { opacity: 1; } }
@keyframes bagMaskOut { to { opacity: 0; } }

/* ---- 行囊本体 ---- */
.bag-sack {
    position: absolute; left: 50%; bottom: -46px;
    width: 300px; height: 330px;
    transform: translateX(-50%) translateY(130%);
}
#bag-fx.bag-on .bag-sack { animation: bagSackRise .62s cubic-bezier(.25,1.2,.45,1) forwards; }
#bag-fx.bag-on.bag-shut .bag-sack { animation: bagSackDrop .6s cubic-bezier(.55,0,.8,.5) .28s forwards; }
@keyframes bagSackRise { to { transform: translateX(-50%) translateY(0); } }
@keyframes bagSackDrop {
    0%   { transform: translateX(-50%) translateY(0); }
    18%  { transform: translateX(-50%) translateY(-16px); }
    100% { transform: translateX(-50%) translateY(135%); }
}

/* 袋身：粗麻布纹理 + 不规则轮廓 + 顶部收褶 */
.bag-body {
    position: absolute; left: 8px; right: 8px; top: 46px; bottom: 0;
    background:
        repeating-linear-gradient(45deg,  rgba(94,64,28,.18) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(-45deg, rgba(255,236,200,.08) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #c4a271 0%, #a98a5c 55%, #8a6c44 100%);
    border: 3px solid #5f4526;
    border-radius: 30px 34px 40px 38px / 46px 50px 34px 36px;
    box-shadow:
        inset 0 16px 26px rgba(58,38,14,.5),
        inset 0 -20px 32px rgba(46,28,8,.55),
        0 14px 30px rgba(0,0,0,.5);
}
/* 顶部收褶：几道竖向褶皱阴影 */
.bag-seam {
    position: absolute; top: -6px; left: 12%; right: 12%; height: 40px;
    background: repeating-linear-gradient(90deg,
        rgba(58,38,14,.32) 0 7px, transparent 7px 26px);
    border-radius: 40% 40% 0 0 / 60% 60% 0 0;
    filter: blur(2px);
    opacity: .8;
}
/* 补丁：斜缝的小方块 */
.bag-patch {
    position: absolute; right: 34px; bottom: 64px;
    width: 46px; height: 40px;
    background: linear-gradient(180deg, #b3926a, #96754c);
    border: 2px dashed rgba(70,46,18,.75);
    border-radius: 6px;
    transform: rotate(-9deg);
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

/* 袋口：横椭圆，默认闭拢（scaleY 很小），打开时张开 */
.bag-mouth {
    position: absolute; top: 20px; left: 50%;
    width: 250px; height: 88px; margin-left: -125px;
    z-index: 2;
}
.bag-hole {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 42%, #2b1c08 0%, #140d04 68%, #0a0703 100%);
    border: 7px solid #8a6a42;
    box-shadow: inset 0 12px 26px rgba(0,0,0,.85), 0 3px 8px rgba(0,0,0,.4);
    transform: scaleY(.14);
}
#bag-fx.bag-on .bag-hole { animation: bagMouthOpen .5s cubic-bezier(.2,1.1,.4,1) .26s forwards; }
#bag-fx.bag-on.bag-shut .bag-hole { animation: bagMouthShut .42s ease-in .3s forwards; }
@keyframes bagMouthOpen { to { transform: scaleY(1); } }
@keyframes bagMouthShut { to { transform: scaleY(.12); } }

/* 束口麻绳：绕在袋口边缘，合上时向中间收紧 */
.bag-rope {
    position: absolute; top: 52px; left: 4%; right: 4%; height: 13px; z-index: 3;
    border-radius: 8px;
    background: repeating-linear-gradient(90deg, #dcbd85 0 11px, #b28e57 11px 22px);
    box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,246,220,.45);
    transform: scaleX(1.05);
}
#bag-fx.bag-on .bag-rope { animation: bagRopeLoose .45s ease .26s forwards; }
#bag-fx.bag-on.bag-shut .bag-rope { animation: bagRopeTight .42s ease-in .3s forwards; }
@keyframes bagRopeLoose { to { transform: scaleX(1.12); } }
@keyframes bagRopeTight { to { transform: scaleX(.86); } }

/* 打开时从袋口涌出的金光 */
.bag-glow {
    position: absolute; top: -30px; left: 50%; margin-left: -150px;
    width: 300px; height: 150px; z-index: 1; opacity: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,216,130,.85) 0%, rgba(255,216,130,0) 65%);
}
#bag-fx.bag-on .bag-glow { animation: bagGlowBurst .7s ease-out .3s forwards; }
@keyframes bagGlowBurst {
    0%   { opacity: 0; transform: scale(.35); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.5); }
}

/* 袋口溅出的四粒金色小光点 */
.bag-dot {
    position: absolute; top: 46px; left: 50%; width: 7px; height: 7px; z-index: 4;
    border-radius: 50%; background: #ffd877; opacity: 0;
    box-shadow: 0 0 8px rgba(255,216,119,.9);
}
#bag-fx.bag-on .bag-dot-1 { animation: bagDot1 .75s ease-out .36s forwards; }
#bag-fx.bag-on .bag-dot-2 { animation: bagDot2 .8s  ease-out .4s  forwards; }
#bag-fx.bag-on .bag-dot-3 { animation: bagDot3 .7s  ease-out .44s forwards; }
#bag-fx.bag-on .bag-dot-4 { animation: bagDot4 .85s ease-out .48s forwards; }
@keyframes bagDot1 { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translate(-92px,-120px) scale(1)} }
@keyframes bagDot2 { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translate(84px,-140px) scale(1)} }
@keyframes bagDot3 { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translate(-38px,-160px) scale(1)} }
@keyframes bagDot4 { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translate(120px,-84px) scale(1)} }

/* ============================================================
   背包模态（麻布行囊主题）
   ============================================================ */
.modal-box.bag-box {
    background:
        repeating-linear-gradient(45deg,  rgba(94,64,28,.15) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(-45deg, rgba(255,236,200,.07) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #c7a575 0%, #ab8b5e 55%, #8d6f46 100%);
    border: 3px solid #5f4526;
    border-radius: 22px 28px 24px 30px / 30px 24px 32px 26px;
    box-shadow:
        inset 0 0 0 2px rgba(255,236,200,.16),
        inset 0 10px 34px rgba(56,36,12,.45),
        0 14px 34px rgba(0,0,0,.55);
    color: #3b2a12;
    animation: bagPopOut .5s cubic-bezier(.2,1.35,.4,1);
}
/* 从行囊里弹出来的入场动画 */
@keyframes bagPopOut {
    0%   { transform: translateY(120px) scale(.5); opacity: 0; }
    60%  { transform: translateY(-12px) scale(1.04); opacity: 1; }
    100% { transform: none; opacity: 1; }
}
/* 内圈缝线（虚线车边） */
.modal-box.bag-box::before {
    content: ''; position: absolute; inset: 7px;
    border: 2px dashed rgba(64,42,16,.55);
    border-radius: 15px 21px 17px 23px / 23px 17px 25px 19px;
    pointer-events: none;
    z-index: 0;
}
/* 顶部麻绳提手 */
.modal-box.bag-box .win-head { position: relative; padding-top: 26px; margin-bottom: 8px; }
.modal-box.bag-box .win-head::before {
    content: ''; position: absolute; top: 0; left: 50%; margin-left: -62px;
    width: 124px; height: 15px; border-radius: 10px;
    background: repeating-linear-gradient(90deg, #dcbd85 0 11px, #b28e57 11px 22px);
    box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,246,220,.4);
}
.modal-box.bag-box .win-head {
    color: #2c1c06;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255,244,214,.75), 0 0 8px rgba(255,244,214,.4);
}
.modal-box.bag-box .field-label { color: #4a300c; text-shadow: 0 1px 0 rgba(255,240,210,.5); }
.modal-box.bag-box .err { color: #8f1d12; }
/* 行囊内衬：正文铺在浅色衬布上（深字浅底），保证可读性 */
.modal-box.bag-box .modal-body {
    position: relative; z-index: 1;
    background:
        repeating-linear-gradient(180deg, transparent 0 30px, rgba(150,118,66,.14) 30px 31px),
        linear-gradient(180deg, #fdf6e2 0%, #f5ebd0 100%);
    border: 1px solid rgba(94,64,28,.5);
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: inset 0 2px 8px rgba(94,64,28,.3);
    color: #33230e;
}
.modal-box.bag-box .modal-body b { color: #2a1b06; }
.modal-box.bag-box .t-gold { color: #8a5800; }
.modal-box.bag-box .modal-body .t-gold { font-weight: bold; }
.modal-box.bag-box .t-gray { color: #6d5533; }
.modal-box.bag-box .small { color: #5f4a28; }
.modal-box.bag-box .item-row { border-bottom: 1px dashed rgba(94,64,28,.45); }
.modal-box.bag-box .item-row:last-child { border-bottom: none; }
.modal-box.bag-box .btn {
    background: #6f4f28; color: #ffe9c4; border-color: #4a3215;
    box-shadow: 0 3px 0 rgba(40,24,6,.6);
}
.modal-box.bag-box .btn:hover { background: #805c31; }
.modal-box.bag-box .btn-primary { background: #7a5210; border-color: #ffd24a; color: #ffd24a; }
/* 合上：整袋向下沉回行囊 */
.modal-box.bag-box.bag-closing { animation: bagSinkIn .42s cubic-bezier(.55,0,.8,.5) forwards; }
@keyframes bagSinkIn {
    0%   { transform: none; opacity: 1; }
    100% { transform: translateY(130px) scale(.5) rotate(2deg); opacity: 0; }
}

@media (max-width: 560px) {
    .bag-sack { width: 230px; height: 262px; bottom: -36px; }
    .bag-mouth { width: 196px; height: 70px; margin-left: -98px; }
    .bag-rope { top: 42px; }
    .bag-body { top: 36px; }
    .modal-box.bag-box .win-head { padding-top: 22px; }
    .modal-box.bag-box .win-head::before { width: 104px; margin-left: -52px; }
}

/* ============================================================
   羊皮卷轴过场（打开/合上技能）
   开：滚轴从左侧滚到右侧，羊皮卷随之展开 → 金光一闪 → 卷轴界面呈现
   合：滚轴从右滚回左侧，羊皮卷随之卷起收走
   ============================================================ */
#scroll-fx {
    position: fixed; inset: 0; z-index: 9990;
    display: none; overflow: hidden;
    transition: opacity .35s ease;
}
#scroll-fx.scr-on { display: block; }
#scroll-fx.scr-fadeout { opacity: 0; }

.scr-mask {
    position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(ellipse at 50% 46%, rgba(30,20,6,.55) 0%, rgba(10,6,2,.92) 100%);
}
#scroll-fx.scr-on .scr-mask { animation: scrMaskIn .35s ease-out forwards; }
#scroll-fx.scr-on.scr-close .scr-mask { animation: scrMaskOut .45s ease-in .85s forwards; }
@keyframes scrMaskIn  { to { opacity: 1; } }
@keyframes scrMaskOut { to { opacity: 0; } }

/* 展开区域：与卷轴界面位置呼应 */
.scr-stage {
    position: absolute; left: 50%; top: 50%;
    width: min(86vw, 540px); height: min(56vh, 330px);
    transform: translate(-50%, -50%);
}
/* 展开完成后淡出（界面弹出时作背景），合上时先淡回 */
#scroll-fx.scr-on .scr-stage { animation: scrStageOut .3s ease 1.15s forwards; }
#scroll-fx.scr-on.scr-close .scr-stage { animation: scrStageIn .15s ease forwards; }
@keyframes scrStageOut { to { opacity: 0; } }
@keyframes scrStageIn  { from { opacity: 0; } to { opacity: 1; } }

/* 羊皮卷：由左向右展开（clip-path 右缘随滚轴推进） */
.scr-paper {
    position: absolute; inset: 6px;
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 26% 22%, rgba(120,85,40,.14), transparent 52%),
        radial-gradient(ellipse at 74% 78%, rgba(120,85,40,.16), transparent 55%),
        repeating-linear-gradient(92deg, rgba(120,90,45,.05) 0 3px, transparent 3px 9px),
        linear-gradient(180deg, #ecd9ad 0%, #e2cb98 48%, #d5bc83 100%);
    box-shadow:
        inset 0 0 34px rgba(120,85,40,.35),
        inset 0 2px 0 rgba(255,248,225,.5),
        0 8px 26px rgba(0,0,0,.5);
    clip-path: inset(0 100% 0 0);
}
#scroll-fx.scr-on .scr-paper { animation: scrUnroll .8s cubic-bezier(.45,.05,.35,1) .1s forwards; }
#scroll-fx.scr-on.scr-close .scr-paper { animation: scrRollup .7s cubic-bezier(.5,.05,.5,.95) .15s forwards; }
@keyframes scrUnroll { to { clip-path: inset(0 0 0 0); } }
@keyframes scrRollup { to { clip-path: inset(0 100% 0 0); } }

/* 滚轴：竖向木轴，从左滚到右；纹理位移模拟滚动 */
.scr-roller {
    position: absolute; top: -12px; bottom: -12px; width: 24px; left: -12px; z-index: 2;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 3px 21px, rgba(0,0,0,.3) 22px),
        repeating-linear-gradient(90deg, #6e4318 0 5px, #9c6428 5px 11px, #b9833e 11px 17px, #7d4f20 17px 24px);
    background-size: 100% 100%, 24px 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,.45);
}
.scr-roller::before, .scr-roller::after {
    content: ''; position: absolute; left: 50%; margin-left: -8px;
    width: 16px; height: 11px; border-radius: 50%;
    background: radial-gradient(ellipse at 42% 38%, #ecc76e 0 30%, #c99a3e 60%, #8a5f1e 100%);
    box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 -2px 3px rgba(90,58,10,.6);
}
.scr-roller::before { top: -5px; }
.scr-roller::after  { bottom: -5px; }
#scroll-fx.scr-on .scr-roller {
    animation:
        scrRollR .8s cubic-bezier(.45,.05,.35,1) .1s forwards,
        scrSpin  .8s linear .1s;
}
#scroll-fx.scr-on.scr-close .scr-roller {
    animation:
        scrRollL .7s cubic-bezier(.5,.05,.5,.95) .15s forwards,
        scrSpinB .7s linear .15s;
}
@keyframes scrRollR { to { left: calc(100% - 12px); } }
@keyframes scrRollL { to { left: -12px; } }
@keyframes scrSpin  { to { background-position-x: 24px, 24px; } }
@keyframes scrSpinB { to { background-position-x: 0, 0; } }

/* 展开完成时的金光掠过 */
.scr-glint {
    position: absolute; inset: 0; z-index: 1; opacity: 0;
    background: linear-gradient(105deg,
        transparent 30%, rgba(255,244,200,.7) 47%,
        rgba(255,255,255,.92) 50%, rgba(255,244,200,.7) 53%, transparent 70%);
}
#scroll-fx.scr-on .scr-glint { animation: scrGlint .4s ease .88s; }
@keyframes scrGlint {
    0%   { opacity: 0; transform: translateX(-40%); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(40%); }
}

/* 展开时飘散的三粒金屑 */
.scr-dot {
    position: absolute; width: 6px; height: 6px; z-index: 3;
    border-radius: 50%; background: #ffd877; opacity: 0;
    box-shadow: 0 0 8px rgba(255,216,119,.9);
}
.scr-dot-1 { left: 32%; top: 52%; }
.scr-dot-2 { left: 56%; top: 38%; }
.scr-dot-3 { left: 76%; top: 56%; }
#scroll-fx.scr-on .scr-dot-1 { animation: scrDotA .9s ease-out .4s forwards; }
#scroll-fx.scr-on .scr-dot-2 { animation: scrDotB .95s ease-out .5s forwards; }
#scroll-fx.scr-on .scr-dot-3 { animation: scrDotC .85s ease-out .6s forwards; }
@keyframes scrDotA { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translate(-30px,-90px) scale(1)} }
@keyframes scrDotB { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translate(22px,-110px) scale(1)} }
@keyframes scrDotC { 0%{opacity:0;transform:translate(0,0) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translate(40px,-70px) scale(1)} }

/* ============================================================
   技能模态（羊皮卷轴主题）
   ============================================================ */
.modal-box.scroll-box {
    background:
        radial-gradient(ellipse at 26% 18%, rgba(120,85,40,.12), transparent 50%),
        radial-gradient(ellipse at 76% 82%, rgba(120,85,40,.14), transparent 52%),
        linear-gradient(180deg, #ecd9ad 0%, #e2cb98 48%, #d5bc83 100%);
    border: 2px solid #8a6a3a;
    border-radius: 8px;
    box-shadow:
        inset 0 0 40px rgba(120,85,40,.32),
        0 14px 34px rgba(0,0,0,.55);
    color: #33230e;
    animation: scrollPop .3s ease-out;
}
@keyframes scrollPop {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
/* 上卷轴杆（标题上方） */
.modal-box.scroll-box .win-head {
    position: relative; padding-top: 20px; margin-bottom: 8px;
    color: #4a3010; font-weight: bold;
    text-shadow: 0 1px 0 rgba(255,248,225,.65);
}
.modal-box.scroll-box .win-head::before {
    content: ''; position: absolute; top: 0; left: -2px; right: -2px; height: 13px;
    border-radius: 7px;
    background:
        radial-gradient(circle at 7px center, #ecc76e 0 3.5px, #a5731f 4.5px) left center / 14px 14px no-repeat,
        radial-gradient(circle at calc(100% - 7px) center, #ecc76e 0 3.5px, #a5731f 4.5px) right center / 14px 14px no-repeat,
        linear-gradient(180deg, #a06a33 0%, #7a4d22 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,230,180,.4);
}
/* 下卷轴杆（按钮区下方） */
.modal-box.scroll-box .modal-foot { position: relative; padding-bottom: 18px; }
.modal-box.scroll-box .modal-foot::before {
    content: ''; position: absolute; left: -2px; right: -2px; bottom: 0; height: 13px;
    border-radius: 7px;
    background:
        radial-gradient(circle at 7px center, #ecc76e 0 3.5px, #a5731f 4.5px) left center / 14px 14px no-repeat,
        radial-gradient(circle at calc(100% - 7px) center, #ecc76e 0 3.5px, #a5731f 4.5px) right center / 14px 14px no-repeat,
        linear-gradient(180deg, #a06a33 0%, #7a4d22 100%);
    box-shadow: 0 -1px 4px rgba(0,0,0,.3), inset 0 1px 2px rgba(255,230,180,.4);
}
.modal-box.scroll-box .t-gold { color: #8a5800; }
.modal-box.scroll-box .t-gray { color: #6d5533; }
.modal-box.scroll-box .small { color: #5f4a28; }
.modal-box.scroll-box .t-red { color: #a02c18; }
.modal-box.scroll-box .skill-desc { color: #5f4a28; }
.modal-box.scroll-box .field-label { color: #4a3010; text-shadow: 0 1px 0 rgba(255,248,225,.55); }
.modal-box.scroll-box .err { color: #8f1d12; }
.modal-box.scroll-box .skill-row { border-bottom: 1px dashed rgba(94,64,28,.45); }
.modal-box.scroll-box .skill-row:last-child { border-bottom: none; }
.modal-box.scroll-box .input {
    background: rgba(255,250,235,.85);
    border: 2px solid #8a6a3a;
    color: #33230e;
}
.modal-box.scroll-box .input:focus { border-color: #6b4300; }
.modal-box.scroll-box .btn {
    background: #6f4f28; color: #ffe9c4; border-color: #4a3215;
    box-shadow: 0 3px 0 rgba(40,24,6,.6);
}
.modal-box.scroll-box .btn:hover { background: #805c31; }
.modal-box.scroll-box .btn-primary { background: #7a5210; border-color: #ffd24a; color: #ffd24a; }
/* 合上：界面快速淡出，交还给滚轴卷起 */
.modal-box.scroll-box.scroll-closing { animation: scrollSink .16s ease-in forwards; }
@keyframes scrollSink { to { opacity: 0; transform: scale(.97); } }

@media (max-width: 560px) {
    .scr-stage { height: min(46vh, 280px); }
    .modal-box.scroll-box .win-head { padding-top: 16px; }
    .modal-box.scroll-box .modal-foot { padding-bottom: 15px; }
}

/* ============================================================
   管理页面板：各窗口独立外间距
   （#panel 为普通容器，不参与 .stage 的 gap，需单独指定）
   ============================================================ */
body.admin:not(.super) #panel > section.win:nth-child(1) { margin-top: 15px; margin-bottom: 15px; } /* 角色属性 */
body.admin:not(.super) #panel > section.win:nth-child(2) { margin-top: 15px; margin-bottom: 15px; } /* 状态管理 */
body.admin:not(.super) #panel > section.win:nth-child(3) { margin-top: 15px; margin-bottom: 15px; } /* 驿站消息 */
body.admin:not(.super) #panel > section.win:nth-child(5) { margin-top: 14px; margin-bottom: 14px; } /* 修改密码 */

/* 高级后台：所有窗口统一间距 */
body.super #panel > section.win { margin-top: 15px; margin-bottom: 15px; }

/* ============================================================
   高级后台（super.php）专属：名册卡片 / 表格 / 子编辑表单
   ============================================================ */
.user-card {
    border: 1px dashed rgba(223,230,255,.35);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0;
}
.user-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.user-meta b { color: var(--gold); }
.bag-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 8px; }
.bag-cell { display: inline-flex; align-items: center; gap: 6px; }
.bag-cell span { color: var(--gray); font-size: 13px; }
.bag-cell .input { width: 76px; }
.pwd-input { max-width: 220px; }
.save-hint { margin-left: 8px; }
.save-hint.t-red { color: var(--red); }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.tbl th, .tbl td { border-bottom: 1px dashed rgba(223,230,255,.25); padding: 6px 8px; text-align: left; }
.tbl th { color: var(--gold); font-weight: normal; letter-spacing: 1px; }
.tbl td.ua-cell { color: var(--gray); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row-line { border-bottom: 1px dashed rgba(223,230,255,.25); padding: 10px 2px; }
.row-line:last-child { border-bottom: none; }
.row-desc { margin: 4px 0 6px; }

.sub-edit {
    border: 1px solid rgba(255,210,74,.35);
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
}
.sub-edit .edit-grid { margin-bottom: 8px; }
.cost-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 10px; }
.chk-row { display: flex; gap: 6px; align-items: center; color: var(--gray); font-size: 13px; margin: 8px 0; }
.grant-row { display: flex; gap: 10px; margin-top: 8px; }
.grant-row select { flex: 1; }
.grant-row .input[type=number] { width: 90px; }

.foot-link { color: var(--blue); text-decoration: none; }
.foot-link:hover { text-decoration: underline; }