:root{
  --paper:#f3ead7;
  --paper2:#e8dcc4;
  --ink:#2a2218;
  --ink-soft:#5c5346;
  --cinnabar:#a82a1a;
  --cinnabar-soft:#c45a42;
  --jade:#3a6a58;
  --gold:#b08a3a;
  --line:#b9a888;
  --shadow:rgba(20,14,8,.35);
  --wood-dark:#3a2a1a;
  --wood-mid:#5c4228;
  --wood-light:#7a5a38;
  --brass:#c4a056;
  --brass-dark:#8a6a2e;
  --grain:repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 5px);
  --paper-tex:linear-gradient(180deg,rgba(255,252,240,.55),rgba(230,210,170,.25)),repeating-linear-gradient(0deg,transparent 0 3px,rgba(90,70,40,.03) 3px 4px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;font-size:13px;}
body{
  font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC","SimSun",serif;
  background:radial-gradient(ellipse at 50% 0%,#4a3422 0%,#24180e 55%,#160e08 100%);
  color:var(--ink);overflow:hidden;
}
button{font-family:inherit;cursor:pointer;}

/* ===== 登录：木牌 + 印泥 ===== */
#login-screen{
  display:flex;align-items:center;justify-content:center;height:100%;
  background:radial-gradient(ellipse at 50% 30%,#4a3422 0%,#24180e 60%,#120c08 100%);
}
.login-box{
  width:min(92vw,360px);position:relative;padding:28px 22px 22px;border-radius:8px;
  border:3px solid var(--brass-dark);
  background:linear-gradient(145deg,rgba(255,240,200,.12),transparent 40%),linear-gradient(180deg,#6a4a2e,#4a3220 40%,#3a2818);
  box-shadow:0 0 0 1px rgba(255,220,150,.15),0 14px 36px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,230,180,.2),inset 0 -2px 6px rgba(0,0,0,.35);
}
.login-box::before{
  content:"";position:absolute;inset:8px;border-radius:4px;pointer-events:none;
  border:1px solid rgba(196,160,86,.35);box-shadow:inset 0 0 20px rgba(0,0,0,.25);
}
.login-box > *{position:relative;z-index:1;}
.seal{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:46px;height:46px;color:#fff8e8;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:bold;
  border:2px solid #5a120c;
  background:linear-gradient(160deg,#d45a3a,var(--cinnabar) 45%,#7a180e);
  box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,200,160,.35),inset 0 -2px 4px rgba(0,0,0,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.login-box h1{text-align:center;margin:16px 0 2px;font-size:26px;letter-spacing:5px;color:#f2e6c8;text-shadow:0 1px 0 rgba(0,0,0,.5);}
.subtitle{text-align:center;color:#cbb892;margin:0 0 12px;font-size:11px;letter-spacing:1px;}
.tabs{display:flex;gap:6px;margin-bottom:10px;}
.tabs button{
  flex:1;padding:7px;font-size:13px;border-radius:5px;border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#8a6840,#5c4028);color:#d8c8a0;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.2),0 1px 2px rgba(0,0,0,.35);
}
.tabs button.active{background:linear-gradient(180deg,#c45a42,var(--cinnabar));color:#fff8e8;border-color:#5a120c;font-weight:bold;}
.login-box input,.login-box select{
  width:100%;margin-bottom:8px;padding:8px;font-size:14px;border-radius:5px;
  border:1px solid #6a5438;background:linear-gradient(180deg,#f8f0dc,#ebe0c8);color:var(--ink);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.18);
}
#submit-btn{
  width:100%;padding:10px;margin-top:4px;font-size:15px;letter-spacing:3px;border-radius:6px;border:1px solid #5a120c;
  background:linear-gradient(180deg,#d45a3a,var(--cinnabar) 55%,#7a180e);color:#fff8e8;
  box-shadow:inset 0 1px 0 rgba(255,200,160,.35),0 3px 8px rgba(0,0,0,.4);text-shadow:0 1px 0 rgba(0,0,0,.35);
}
#submit-btn:active{background:linear-gradient(180deg,#7a180e,var(--cinnabar));box-shadow:inset 0 2px 6px rgba(0,0,0,.45);transform:translateY(1px);}
#msg{text-align:center;color:#f0b090;min-height:20px;margin-top:10px;font-size:13px;}
.login-opts{display:flex;gap:12px;justify-content:center;margin-bottom:4px;}
.login-opts .opt{display:flex;align-items:center;gap:4px;font-size:12px;color:#d8c8a0;cursor:pointer;}
.login-opts input[type="checkbox"]{width:14px;height:14px;cursor:pointer;}

/* ===== 游戏主界面：木匣 ===== */
#game-screen{
  display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1100px;margin:0 auto;overflow:hidden;
  border-left:3px solid var(--wood-dark);border-right:3px solid var(--wood-dark);
  background:var(--grain),linear-gradient(180deg,#5a4028 0%,#3e2a18 30%,#2e1e10 100%);
  box-shadow:0 0 40px rgba(0,0,0,.6);
}
#topbar{
  display:flex;align-items:center;gap:10px;padding:5px 12px;flex-wrap:wrap;
  background:linear-gradient(180deg,#6a4a2e,#4a3220);border-bottom:2px solid var(--brass-dark);
}
.me-info{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
#me-name{font-size:16px;font-weight:bold;color:#f2e6c8;}
.tag{font-size:11px;padding:1px 7px;border-radius:10px;background:#3a2818;border:1px solid var(--brass-dark);color:#d8c8a0;white-space:nowrap;}
.tag.level{background:var(--jade);color:#fff;border:none;}
.money{font-size:13px;color:var(--gold);font-weight:bold;white-space:nowrap;}
.bars{display:flex;gap:6px;width:100%;order:3;}
.bar{flex:1;display:flex;align-items:center;gap:4px;font-size:0;}
.bar-label{display:none;}
.bar-track{flex:1;height:6px;border-radius:3px;overflow:hidden;background:#1a120c;border:1px solid #6a5438;box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
.bar-fill{height:100%;transition:width .3s;}
.bar.hp .bar-fill{background:linear-gradient(180deg,#e86850,#a82a1a 60%,#7a180e);}
.bar.mp .bar-fill{background:linear-gradient(180deg,#5aa0d0,#2471a3 60%,#1a4a70);}
.bar.exp .bar-fill{background:linear-gradient(180deg,#e0c050,#9a7b32 60%,#6a5218);}
.bar-num{display:none;}
#stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}

/* 聊天：宣纸嵌板 */
#room-log{
  position:relative;flex:0 0 auto;max-height:20%;min-height:46px;height:16vh;
  display:flex;flex-direction:column;overflow:hidden;margin:3px 5px;border-radius:4px;
  border:2px solid var(--brass-dark);background:var(--paper-tex),#efe4cc;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.2),0 1px 0 rgba(255,220,160,.15);
}
#room-log .log-tools{position:absolute;top:2px;right:3px;z-index:5;display:flex;gap:3px;}
#room-log .log-fs{
  width:22px;height:22px;line-height:20px;font-size:14px;padding:0;border-radius:4px;cursor:pointer;
  border:1px solid var(--brass-dark);background:linear-gradient(180deg,#8a6840,#5c4028);color:#f2e6c8;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.25);
}
#room-log .log-fs:active{background:linear-gradient(180deg,#3a2818,#5c4028);box-shadow:inset 0 2px 4px rgba(0,0,0,.45);}
#room-log .log-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:3px 6px;font-size:12px;line-height:1.45;}
#room-log .lg{margin:1px 0;white-space:pre-wrap;word-break:break-word;}
#room-log .lg-sys{color:var(--ink-soft);}
#room-log .lg-combat{color:#a3331f;}
#room-log .lg-levelup{color:#8e6f1f;font-weight:bold;}
#room-log .lg-say{color:#2f6b4f;}
#room-log .lg-banner{color:var(--ink);font-weight:bold;}
#room-log .log-input-wrap{flex:0 0 auto;display:none;gap:4px;padding:3px 6px;border-top:1px solid rgba(90,70,40,.35);background:rgba(90,70,40,.06);}
#room-log.expanded .log-input-wrap{display:flex;}
#room-log .log-input-wrap #say-input{flex:1 1 auto;min-width:0;font-size:12px;padding:5px 6px;border:1px solid #8a7458;border-radius:4px;background:#faf3e4;box-shadow:inset 0 1px 3px rgba(0,0,0,.15);}
#room-log .log-input-wrap #say-btn{flex:0 0 auto;padding:5px 10px;font-size:12px;border-radius:4px;border:1px solid #2a4a3a;background:linear-gradient(180deg,#5a8a72,var(--jade));color:#f0fff4;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
#room-log.fs{position:fixed;left:0;top:0;right:0;bottom:0;z-index:60;max-height:none;height:100%;width:100%;margin:0;border-radius:0;}
#room-log.fs .log-fs{transform:rotate(0);}

/* 属性条：尽量薄的分隔栏；色条内仍可塞小字 */
#statusbar{
  flex:0 0 auto;display:flex;align-items:center;gap:2px;width:100%;padding:0 2px;
  min-height:14px;height:14px;border-bottom:1px solid var(--brass-dark);
  background:var(--grain),linear-gradient(180deg,#6a4a2e,#3a2818);
  overflow:hidden;white-space:nowrap;box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.12);
  margin:0;
}
#statusbar .sb-stat.hp .sb-track i{background:linear-gradient(180deg,#e86850,#a82a1a 65%,#7a180e);}
#statusbar .sb-stat.mp .sb-track i{background:linear-gradient(180deg,#5aa0d0,#2471a3 65%,#1a4a70);}
#statusbar .sb-stat.food .sb-track i{background:linear-gradient(180deg,#e0b060,#9a7028 65%,#6a4a18);}
#statusbar .sb-stat.water .sb-track i{background:linear-gradient(180deg,#70c0e0,#2a80b0 65%,#1a5070);}
#statusbar .sb-name{font-size:9px;font-weight:bold;color:#f2e6c8;flex:0 0 auto;max-width:16%;overflow:hidden;text-overflow:ellipsis;line-height:12px;margin:0;}
#statusbar .sb-stat{display:inline-flex;align-items:center;gap:1px;flex:1 1 0;min-width:0;margin:0;}
#statusbar .sb-lab{font-size:7px;color:#cbb892;flex:0 0 auto;line-height:1;}
#statusbar .sb-track{
  position:relative;display:inline-block;flex:1 1 auto;min-width:20px;height:9px;
  border:1px solid #6a5438;border-radius:2px;background:#1a120c;overflow:hidden;margin:0;
}
#statusbar .sb-track i{display:block;height:100%;width:0;min-width:0;}
#statusbar .sb-track .sb-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:7px;font-weight:600;line-height:1;
  color:#fff8e8;text-shadow:0 0 1px #000,0 1px 1px rgba(0,0,0,.85);
  pointer-events:none;letter-spacing:0;
}

/* 战斗常驻条 */
#fight-strip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:4px 6px;
  background:linear-gradient(180deg,#5a2018,#3a100c);border-bottom:2px solid #8a3028;
  color:#f2e6c8;z-index:5;
}
#fight-strip.hidden{display:none !important;}
#fight-strip .fs-info{flex:0 1 auto;min-width:0;max-width:28%;}
#fight-strip .fs-name{font-size:12px;font-weight:bold;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#fight-strip .fs-skill{font-size:9px;color:#e0b090;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#fight-strip .fs-track{flex:1 1 auto;height:8px;border:1px solid #8a4038;border-radius:3px;background:#1a0808;overflow:hidden;min-width:40px;}
#fight-strip .fs-track i{display:block;height:100%;width:0;background:linear-gradient(180deg,#e86850,#a82a1a);}
#fight-strip .fs-hp{font-size:10px;flex:0 0 auto;color:#f0c0b0;}
#fight-strip .fs-btn{
  flex:0 0 auto;padding:6px 10px;font-size:12px;border-radius:4px;min-height:28px;
  border:1px solid var(--brass-dark);cursor:pointer;
}
#fight-strip .fs-btn.fight{background:linear-gradient(180deg,#d45a3a,var(--cinnabar));color:#fff8e8;border-color:#5a120c;}
#fight-strip .fs-btn.flee{background:linear-gradient(180deg,#6a5040,#3a2818);color:#d8c8a0;}

#stage-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:row;}

/* 侧栏：略加宽便于触控 */
#room-rail{
  width:56px;flex:0 0 56px;min-width:0;border-right:3px solid var(--wood-dark);
  background:var(--grain),linear-gradient(180deg,#5a4028,#3a2818);
  display:flex;flex-direction:column;overflow-y:auto;padding:4px 2px;gap:0;
  box-shadow:inset -2px 0 6px rgba(0,0,0,.25);
}
.rail-scene-label{
  font-size:9px;font-weight:bold;color:#f2e6c8;letter-spacing:2px;text-align:center;
  padding:3px 1px 2px;margin:1px 2px 2px;border-radius:3px;
  border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#8a6840,#5c4028);
  box-shadow:inset 0 1px 0 rgba(255,230,180,.25),0 1px 2px rgba(0,0,0,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.rail-room-name{
  font-size:8px;line-height:1.1;color:#d8c8a0;text-align:center;padding:0 1px 3px;
  word-break:break-all;max-height:22px;overflow:hidden;
}
.rail-head{font-size:11px;font-weight:bold;color:#cbb892;letter-spacing:1px;border-bottom:1px solid rgba(196,160,86,.35);padding:3px 2px 2px;margin-top:3px;}
.rail-group{display:flex;flex-direction:column;gap:2px;margin-bottom:2px;}
#rail-bottom{margin-top:auto;padding-top:4px;display:flex;flex-direction:column-reverse;gap:2px;border-top:1px solid rgba(196,160,86,.3);}
.rail-item{
  width:100%;min-height:24px;height:auto;flex:0 0 auto;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-size:10px;line-height:1.1;padding:2px 1px;border:1px solid var(--brass-dark);border-radius:3px;
  background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink);cursor:pointer;overflow:hidden;word-break:break-all;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.25);
}
.rail-item .rail-hp{
  display:block;width:90%;height:3px;margin-top:1px;border-radius:1px;background:#1a120c;overflow:hidden;
}
.rail-item .rail-hp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e86850,#a82a1a);}
.rail-item:active{background:linear-gradient(180deg,#b8a888,#d8c8a8);box-shadow:inset 0 2px 4px rgba(0,0,0,.35);}
.rail-item.enemy{border-color:#8a3028;background:linear-gradient(180deg,#f5d8d0,#e0b0a4);color:#8a2018;}
.rail-item.npc{border-color:#2a5040;background:linear-gradient(180deg,#d8ebe0,#b8d4c4);color:#2a5040;}
.rail-item.me{border-color:var(--cinnabar);background:linear-gradient(180deg,#f8d8cc,#e8b0a0);color:var(--cinnabar);font-weight:bold;}
.rail-item.item{border-color:var(--brass-dark);background:linear-gradient(180deg,#f5e8c0,#e0cc90);color:#6a5218;}

/* 通用确认/输入弹层 */
.mud-dialog-wrap{position:fixed;inset:0;z-index:220;}
.mud-dialog-mask{position:absolute;inset:0;background:rgba(12,8,4,.7);}
.mud-dialog{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(90vw,320px);padding:12px;border-radius:6px;border:2px solid var(--brass-dark);
  background:linear-gradient(180deg,#2a1e14,#1a120c);color:#f0e6d0;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.mud-dialog-title{font-size:14px;font-weight:bold;color:#f0b090;text-align:center;margin-bottom:8px;}
.mud-dialog-body{font-size:12px;line-height:1.5;color:#cbb892;margin-bottom:10px;}
.mud-dialog input{
  width:100%;padding:8px;margin-bottom:10px;border-radius:4px;border:1px solid #6a5438;
  background:#f8f0dc;color:var(--ink);font-size:14px;box-sizing:border-box;
}
.mud-dialog-btns{display:flex;gap:8px;}
.mud-dialog-btns button{
  flex:1;padding:8px;border-radius:4px;border:1px solid var(--brass-dark);font-size:13px;
  background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink);
}
.mud-dialog-btns button.primary{background:linear-gradient(180deg,#d45a3a,var(--cinnabar));color:#fff;border-color:#5a120c;}
.mud-toast{
  position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:300;
  max-width:88vw;padding:8px 14px;border-radius:4px;font-size:13px;line-height:1.35;text-align:center;
  background:rgba(28,16,8,.92);color:#f2e6c8;border:1px solid var(--brass-dark);
  box-shadow:0 4px 16px rgba(0,0,0,.45);pointer-events:none;opacity:0;transition:opacity .25s;
}
.mud-toast.show{opacity:1;}
.mud-toast.fading{opacity:0;transition:opacity 4.5s linear;}

#reconnect-bar{
  position:fixed;left:0;right:0;bottom:calc(48px + env(safe-area-inset-bottom,0px));z-index:250;
  display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;
  background:rgba(90,28,16,.94);color:#f2e6c8;border-top:2px solid #8a3028;font-size:12px;
}
#reconnect-bar.hidden{display:none !important;}
#reconnect-bar button{
  padding:5px 12px;border-radius:4px;border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink);font-size:12px;
}

.settings-box{padding:10px 12px;}
.settings-box h3{margin:0 0 8px;font-size:15px;color:#6a3a18;}
.settings-row{display:flex;gap:8px;align-items:baseline;margin-bottom:6px;font-size:12px;}
.settings-row > span{flex:0 0 3em;color:#8a7050;}
.settings-row > b{flex:1;min-width:0;font-weight:600;color:var(--ink);word-break:break-all;}
.settings-mono{font-family:ui-monospace,Consolas,monospace;font-size:10px;}
.settings-check{display:flex;align-items:center;gap:6px;margin:8px 0;font-size:12px;color:var(--ink);}
.settings-btn{
  display:block;width:100%;margin-top:8px;padding:9px;border-radius:5px;border:1px solid #5a120c;
  background:linear-gradient(180deg,#d45a3a,var(--cinnabar));color:#fff;font-size:13px;
}
.settings-btn.secondary{
  border-color:var(--brass-dark);background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink);
}
.settings-note{margin-top:10px;font-size:11px;line-height:1.4;}

#content{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:0;min-height:0;
  background:var(--paper-tex),linear-gradient(180deg,#f6edd8,#e8dcc0);
  box-shadow:inset 2px 0 8px rgba(0,0,0,.12);
}
.muted{color:var(--ink-soft);font-size:12px;}

#lore-zone{
  position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
#panel-overlay{
  display:none;position:absolute;left:0;right:0;top:0;height:68%;z-index:8;
  flex-direction:column;overflow:hidden;
  border:2px solid var(--brass-dark);border-top:none;border-radius:0 0 6px 6px;
  background:
    linear-gradient(180deg,rgba(255,230,180,.12),transparent 18%),
    var(--grain),
    linear-gradient(180deg,#f8efd8,#efe2c4 55%,#e6d6b4);
  box-shadow:0 8px 18px rgba(20,10,4,.45),inset 0 1px 0 rgba(255,240,200,.35),inset 0 -2px 6px rgba(40,24,8,.18);
}
#panel-overlay.open{display:flex;}
#lore-feed{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:0;
  background:var(--paper-tex),linear-gradient(180deg,#f6edd8,#e8dcc0);
}
#panel-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.panel-pane{display:none;flex:1 1 auto;min-height:0;overflow:auto;flex-direction:column;padding:0;margin:0;}
.panel-pane.active{display:flex;}

#func-panel{
  flex:0 0 auto;margin:0;padding:5px 8px;width:100%;box-sizing:border-box;
  border-top:2px solid var(--brass-dark);
  background:var(--grain),linear-gradient(180deg,#5a4028,#3e2a18);
}
#func-panel .fp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;}

.settings-box{max-width:420px;padding:8px;}
.settings-box h3{font-size:15px;margin:4px 0 10px;border-bottom:1px solid var(--ink);padding-bottom:4px;}
.settings-btn{display:block;width:100%;padding:10px;font-size:13px;margin-bottom:8px;cursor:pointer;border-radius:6px;border:1px solid #8a3028;background:linear-gradient(180deg,#f5d8d0,#e0b0a4);color:#8a2018;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.settings-btn:active{background:linear-gradient(180deg,#a82a1a,#7a180e);color:#fff;}

#menu-bar{
  display:flex;gap:3px;padding:4px 5px;border-top:3px solid var(--wood-dark);flex:0 0 auto;
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
  background:var(--grain),linear-gradient(180deg,#4a3220,#2e1e10);
  box-shadow:inset 0 1px 0 rgba(255,220,160,.1);
}
.mbtn{
  flex:1;min-width:0;padding:7px 1px;font-size:10px;border-radius:5px;border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#8a6840,#5c4028 55%,#4a3220);color:#d8c8a0;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.25),0 2px 3px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.mbtn:active{background:linear-gradient(180deg,#3a2818,#5c4028);box-shadow:inset 0 2px 5px rgba(0,0,0,.5);transform:translateY(1px);}
.mbtn.active{background:linear-gradient(180deg,#c45a42,var(--cinnabar) 55%,#7a180e);color:#fff8e8;border-color:#5a120c;font-weight:bold;box-shadow:inset 0 1px 0 rgba(255,200,160,.3),0 2px 4px rgba(0,0,0,.4);}

.fp-key{
  padding:7px 2px;font-size:11px;border-radius:4px;cursor:pointer;border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#f0e6d0,#d8c8a8 60%,#c8b490);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.3);
}
.fp-key:active{background:linear-gradient(180deg,#a89878,#d8c8a8);box-shadow:inset 0 2px 4px rgba(0,0,0,.35);transform:translateY(1px);}
.fp-key.empty{background:rgba(40,28,16,.35);color:#8a7a60;border-style:dashed;border-color:#6a5438;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);}

#rail-custom-toggle{
  width:100%;height:20px;flex:0 0 20px;margin:2px auto 0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:10px;line-height:1.05;padding:0;border:1px solid var(--brass-dark);border-radius:3px;
  background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink);cursor:pointer;overflow:hidden;word-break:break-all;
}
#rail-custom-toggle.on{background:linear-gradient(180deg,#5a8a72,var(--jade));color:#fff;border-color:#2a4a3a;}

#minimap{flex:0 0 auto;display:inline-flex;flex-direction:column;gap:2px;padding:4px 0;align-items:center;border-top:1px solid rgba(90,70,40,.3);}
#minimap .row{display:flex;gap:2px;}
#minimap .cell{
  width:48px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;text-align:center;
  border-radius:3px;line-height:1.05;overflow:hidden;border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink-soft);padding:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.25);
}
#minimap .cell.edge{background:transparent;border:none;box-shadow:none;}
#minimap .cell.nbr{border-color:#2a5040;background:linear-gradient(180deg,#d8ebe0,#b8d4c4);color:#2a5040;}
#minimap .cell.nbr.walkable{cursor:pointer;}
#minimap .cell.nbr.walkable:active{background:#a8c4b4;}
#minimap .cell.me{border:2px solid #5a120c;background:linear-gradient(180deg,#c45a42,var(--cinnabar));color:#fff;font-weight:bold;}
#minimap .udrow{display:flex;gap:4px;justify-content:center;margin-top:2px;}
#minimap .ud{font-size:9px;padding:1px 5px;border-radius:4px;cursor:pointer;border:1px solid #2a5040;background:linear-gradient(180deg,#d8ebe0,#b8d4c4);color:#2a5040;}
#minimap .ud:active{background:#a8c4b4;}

.rail-title{font-weight:bold;font-size:9px;letter-spacing:1px;border-bottom:1px solid rgba(196,160,86,.3);padding-bottom:1px;color:#cbb892;margin-top:4px;}
.m-item,#player-list .p-item{
  display:flex;flex-direction:column;gap:2px;padding:3px 5px;margin-bottom:3px;
  background:linear-gradient(180deg,#f8f0dc,#ebe0c8);border-radius:4px;border:1px solid var(--line);font-size:10px;line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.m-item{cursor:pointer;}
.m-item:hover{border-color:var(--cinnabar);}
.m-item .m-name{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-item.dead{opacity:.45;text-decoration:line-through;}
.hpbar{height:4px;background:#1a120c;border-radius:3px;overflow:hidden;border:1px solid #6a5438;}
.hpbar > i{display:block;height:100%;background:linear-gradient(180deg,#5aa0d0,#2471a3);}
.empty{color:var(--ink-soft);font-size:11px;text-align:center;padding:6px;}
.sc-row{display:flex;gap:8px;font-size:12px;padding:3px 2px;border-bottom:1px dashed rgba(90,70,40,.3);}
.sc-row span{color:var(--ink-soft);min-width:42px;}
.sc-row b{color:var(--ink);}

.panel-pane#view-skill{overflow-x:hidden;overflow-y:auto;}
.panel-pane#view-skill #skill-box{display:flex;flex-wrap:wrap;gap:6px 8px;padding:4px;}
.skill-card{
  flex:0 0 calc(50% - 4px);box-sizing:border-box;min-height:30px;
  display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;
  font-size:11px;line-height:1.2;border:1px solid var(--brass-dark);border-radius:4px;
  background:linear-gradient(180deg,#f8f0dc,#e4d6b4 70%,#d8c8a0);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 3px rgba(0,0,0,.2);
}
.skill-card .sc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.skill-card .sc-lv{flex:0 0 auto;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.skill-card:active{background:linear-gradient(180deg,#c8b890,#e4d6b4);box-shadow:inset 0 2px 4px rgba(0,0,0,.3);}
.skill-card.basic.not-learned{cursor:default;opacity:.92;}
.skill-card.basic.not-learned .sc-name{color:#9a9286;}
.skill-card.basic.learned .sc-name{color:var(--ink);}
.skill-row-break{flex:0 0 100%;height:0;margin:0;padding:0;border:0;overflow:hidden;pointer-events:none;}

.skill-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(12,8,4,.65);z-index:200;display:flex;align-items:center;justify-content:center;}
.skill-popup{
  width:min(90vw,300px);max-height:70vh;overflow-y:auto;padding:12px;border-radius:6px;border:3px solid var(--brass-dark);
  background:linear-gradient(145deg,rgba(255,240,200,.1),transparent 40%),linear-gradient(180deg,#6a4a2e,#3a2818);
  box-shadow:0 16px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,230,180,.2);color:#f2e6c8;
}
.skill-popup-title{font-size:15px;font-weight:bold;color:#f0b090;text-align:center;padding-bottom:4px;border-bottom:1px solid rgba(196,160,86,.4);}
.skill-popup-desc{font-size:11px;color:#a8d0b8;text-align:center;padding:4px 0;font-weight:bold;}
.skill-popup-desc2{font-size:10px;color:#cbb892;line-height:1.5;padding:4px 0;border-bottom:1px dashed rgba(196,160,86,.35);}
.skill-popup-menu{padding:4px 0;}
.skill-popup-item{padding:6px 8px;font-size:12px;border-radius:4px;margin-bottom:2px;text-align:center;cursor:pointer;border:1px solid var(--brass-dark);background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.skill-popup-item:active{background:linear-gradient(180deg,#c45a42,var(--cinnabar));color:#fff;}
.skill-popup-close{padding:6px;font-size:12px;border-radius:4px;margin-top:4px;text-align:center;cursor:pointer;border:1px solid #5a120c;background:linear-gradient(180deg,#6a5040,#3a2818);color:#d8c8a0;}
.skill-popup-close:active{background:var(--cinnabar);color:#fff;}

.skill-popup-item.danger{border-color:#8a3028;color:#8a2018;}
.skill-popup-item.danger:active{background:linear-gradient(180deg,#a82a1a,#7a180e);color:#fff;}

/* 人物互动浮层 —— 对齐参考客户端 hudong_lay（ZJOBLONG + ZJOBACTS + ZJOBACTS2） */
.hudong-wrapper{position:fixed;inset:0;z-index:210;}
.hudong-overlay{
  position:absolute;inset:0;background:rgba(12,8,4,.68);
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.hudong-panel{
  width:min(92vw,360px);max-height:78vh;overflow:auto;
  background:linear-gradient(180deg,#2a1e14,#1a120c);
  border:1px solid var(--brass-dark);border-radius:6px;
  box-shadow:0 8px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,240,200,.12);
  padding:10px 12px 12px;color:#f0e6d0;
}
.hudong-title{
  font-size:15px;font-weight:bold;color:#f0b090;text-align:center;
  padding-bottom:6px;border-bottom:1px solid rgba(196,160,86,.4);letter-spacing:1px;
}
.hudong-long{
  font-size:11px;line-height:1.55;color:#cbb892;padding:8px 2px;
  border-bottom:1px dashed rgba(196,160,86,.3);max-height:28vh;overflow:auto;
}
.hudong-sec-label{
  font-size:10px;color:#a89070;letter-spacing:2px;margin:8px 0 4px;font-weight:bold;
}
.hudong-asks{display:flex;flex-direction:column;gap:4px;}
.hudong-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.hudong-btn{
  padding:7px 6px;font-size:12px;border-radius:4px;cursor:pointer;
  border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#f0e6d0,#d8c8a8);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.hudong-btn.ask{width:100%;text-align:center;}
.hudong-btn:active{background:linear-gradient(180deg,#c45a42,var(--cinnabar));color:#fff;}
.hudong-btn.danger{border-color:#8a3028;color:#8a2018;}
.hudong-btn.danger:active{background:linear-gradient(180deg,#a82a1a,#7a180e);color:#fff;}
.hudong-close{
  margin-top:8px;padding:7px;font-size:12px;text-align:center;cursor:pointer;border-radius:4px;
  border:1px solid #5a120c;background:linear-gradient(180deg,#6a5040,#3a2818);color:#d8c8a0;
}
.hudong-close:active{background:var(--cinnabar);color:#fff;}

/* 包裹面板 */
#view-bag{flex:1 1 auto;min-height:0;padding:0;}
#bag-box{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0;}
.bag-item-actions{
  flex:0 0 auto;border-top:2px solid var(--brass-dark);padding:4px 6px;
  background:var(--grain),linear-gradient(180deg,#6a4a2e,#4a3220);
  color:#f2e6c8;
}
.bag-item-actions.hidden{display:none;}
.bag-item-actions .bia-title{font-size:12px;font-weight:bold;margin-bottom:1px;color:#f2e6c8;}
.bag-item-actions .bia-desc{font-size:10px;color:#cbb892;margin-bottom:4px;line-height:1.35;}
.bag-item-actions .bia-btns{display:flex;flex-wrap:wrap;gap:3px;}
.bag-item-actions .bia-btn{
  padding:4px 8px;font-size:10px;border-radius:4px;border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#f8f0dc,#e4d6b4);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.25);
}
.bag-item-actions .bia-btn:active{background:linear-gradient(180deg,#c45a42,var(--cinnabar));color:#fff;}
.bag-item-actions .bia-btn.danger{border-color:#8a3028;color:#8a2018;}
.bag-item-actions .bia-btn.danger:active{background:linear-gradient(180deg,#a82a1a,#7a180e);color:#fff;}
.bag-item-actions .bia-close{font-size:10px;color:#cbb892;margin-top:3px;cursor:pointer;text-align:center;padding:2px;}
#npc-box,#shop-box{padding:8px;color:var(--ink);}
.npc-head{font-size:14px;margin-bottom:4px;}
.npc-long{font-size:11px;line-height:1.4;color:var(--ink-soft);margin:0 0 8px;}
.npc-acts{display:flex;flex-wrap:wrap;gap:6px;}
.npc-acts .act{
  padding:6px 10px;font-size:12px;border-radius:4px;border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#f8f0dc,#e4d6b4);cursor:pointer;
}
.shop-block{margin-bottom:10px;}
.shop-title{font-size:12px;font-weight:bold;margin-bottom:6px;letter-spacing:1px;}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.shop-item{
  display:flex;flex-direction:column;gap:2px;padding:8px;text-align:left;
  border:1px solid var(--brass-dark);border-radius:4px;cursor:pointer;
  background:linear-gradient(180deg,#fff8e8,#efe0c4);
}
.shop-item .si-name{font-size:12px;font-weight:bold;}
.shop-item .si-price{font-size:10px;color:var(--cinnabar);}
.bag-head{display:flex;align-items:baseline;justify-content:space-between;margin:0;padding:3px 4px 2px;border-bottom:1px solid rgba(90,70,40,.35);}
.bag-head-title{font-size:12px;font-weight:bold;letter-spacing:2px;}
.bag-head-meta{font-size:10px;color:var(--ink-soft);}
.bag-money-row{
  margin:4px 4px 6px;padding:6px 8px;font-size:13px;color:var(--ink);
  border:1px solid var(--brass-dark);border-radius:4px;
  background:linear-gradient(180deg,#f5e8c0,#e0cc90);
}
.bag-money-row b{color:#6a4a10;font-size:15px;margin:0 2px;}
.bag-section{margin-bottom:6px;}
.bag-section-title{font-size:10px;font-weight:bold;color:var(--ink-soft);margin:2px 4px 3px;letter-spacing:1px;}
.bag-empty{padding:10px 8px;text-align:center;}
.bag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;}
.bag-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:44px;padding:3px 2px;border-radius:4px;cursor:pointer;
  border:1px solid var(--brass-dark);
  background:linear-gradient(180deg,#fff8e8,#efe0c4 70%,#e4d4b0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 2px rgba(80,50,20,.12),0 1px 2px rgba(0,0,0,.18);
  position:relative;
}
.bag-card:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.18);}
.bag-card.equipped-w{border-color:#2a5040;background:linear-gradient(180deg,#d8ebe0,#b8d4c4);}
.bag-card.equipped-a{border-color:#5a4028;background:linear-gradient(180deg,#e8d8c0,#d0b890);}
.bag-card-icon{font-size:13px;line-height:1;color:var(--cinnabar);font-weight:bold;}
.bag-card-name{font-size:9px;line-height:1.15;text-align:center;word-break:break-all;color:var(--ink);}
.bag-card-badge{position:absolute;top:1px;right:2px;font-size:8px;color:#fff;background:var(--cinnabar);border-radius:2px;padding:0 2px;line-height:12px;}
.bag-floor-grid{display:flex;flex-direction:column;gap:3px;padding:0 4px;}
.bag-floor-card{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:4px;border:1px dashed #8a7458;background:rgba(255,253,246,.6);}
.bag-floor-card .bag-card-name{flex:1;font-size:11px;text-align:left;}
.bag-act{font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer;border:1px solid #2a5040;background:linear-gradient(180deg,#d8ebe0,#b8d4c4);color:#2a5040;flex:0 0 auto;}
.bag-act.primary{font-weight:bold;}
.bag-act:active{background:#a8c4b4;}
.sc-link{font-size:12px;padding:2px 8px;border-radius:4px;border:1px solid var(--brass-dark);background:linear-gradient(180deg,#f0e6d0,#d8c8a8);cursor:pointer;color:var(--ink);}
.rail-item.item.pick{color:#2a5040;border-color:#2a5040;}

#combat-list .c-mon{font-size:14px;font-weight:bold;color:var(--cinnabar);margin-bottom:4px;}
#combat-list .c-act{display:flex;gap:6px;margin-top:8px;}
#combat-list .c-act .act{flex:1;}

#fullmap{position:relative;width:100%;max-width:none;margin:0;overflow-x:auto;overflow-y:auto;height:100%;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
#fullmap::-webkit-scrollbar{display:none;width:0;height:0;}
#view-map{position:relative;overflow:hidden;height:100%;}
.map-links{position:absolute;left:0;top:0;pointer-events:none;z-index:0;}
.map-links line{stroke:#5a4a32;stroke-width:2.5;stroke-linecap:round;}
.fcell{
  position:absolute;cursor:pointer;touch-action:pan-x pan-y;box-sizing:border-box;
  border:1px solid #8a7458;background:linear-gradient(180deg,#fffdf6,#f0e6d0);border-radius:4px;
  display:flex;align-items:center;justify-content:center;text-align:center;font-family:inherit;color:#3a352b;
  line-height:1.05;padding:0;overflow:hidden;font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.15);
}
.fcell.me{color:#fff;background:linear-gradient(180deg,#c45a42,var(--cinnabar));border:1px solid #5a120c;z-index:2;}
.fcell.area{color:#5b3a8c;background:#efe7f6;border:1px dashed #8a5cb8;font-weight:600;cursor:default;}
.fcell.off-z:not(.me):not(.area){background:#fff9ed;border:1px dashed #b8986a;color:#3a352b;box-shadow:0 1px 3px rgba(58,53,43,.12);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(158,43,37,.25);}50%{box-shadow:0 0 0 5px rgba(158,43,37,.12);}}

#say-line{display:flex;gap:5px;padding:5px 0 0;border-top:1px solid rgba(90,70,40,.3);margin-top:4px;}
#say-input{flex:1;padding:6px;border:1px solid #8a7458;border-radius:5px;background:#faf3e4;font-size:12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.12);}
#say-btn{padding:0 12px;background:linear-gradient(180deg,#6a5040,#3a2818);color:#f2e6c8;border:1px solid var(--brass-dark);border-radius:5px;font-size:12px;}

#action-bar{display:flex;flex-wrap:wrap;gap:5px;padding:7px 8px;background:linear-gradient(0deg,#2e1e10,#4a3220);border-top:2px solid var(--wood-dark);}
.act{padding:8px 8px;border-radius:7px;font-size:13px;min-width:0;flex:1 1 auto;border:1px solid var(--brass-dark);background:linear-gradient(180deg,#f0e6d0,#d8c8a8);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 3px rgba(0,0,0,.3);}
.act.move{background:linear-gradient(180deg,#f3ecdb,#d8c8a0);}
.act.fight{background:linear-gradient(180deg,#c45a42,var(--cinnabar));color:#fff;border-color:#5a120c;}
.act.flee{background:linear-gradient(180deg,#6a6050,var(--ink-soft));color:#fff;border-color:#3a352b;}
.act.info{background:linear-gradient(180deg,#5a8a72,var(--jade));color:#fff;border-color:#2a4a3a;}
.act:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35);}
.act:disabled{opacity:.4;cursor:not-allowed;}

@media (max-width:680px){body{font-size:13px;}.bars{min-width:100%;}.act{padding:7px 6px;font-size:12px;}}

.fly-cat{font-size:11px;color:var(--ink-soft);margin:6px 2px 2px;font-weight:bold;letter-spacing:1px;}
.fly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.fly-cell{padding:7px 2px;font-size:12px;border-radius:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--brass-dark);background:linear-gradient(180deg,#f8f0dc,#e4d6b4);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.fly-cell.cur{background:linear-gradient(180deg,#6a5040,#3a2818);color:#f2e6c8;}

#init-box{font-size:13px;line-height:1.6;color:var(--ink);}
.init-step{padding:8px 0 6px;border-bottom:1px dashed rgba(43,38,32,.22);}
.init-title{font-size:17px;font-weight:bold;letter-spacing:2px;border-bottom:1px solid var(--ink);padding-bottom:5px;margin-bottom:8px;}
.init-intro{font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;line-height:1.6;}
.init-opt-row{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(43,38,32,.12);}
.init-opt-label{flex:0 0 auto;font-size:13px;font-weight:bold;min-width:74px;}
.init-opt-desc{flex:1 1 auto;font-size:11.5px;color:var(--ink-soft);line-height:1.45;}
.init-opt-btn{flex:0 0 auto;align-self:center;padding:6px 12px;font-size:12px;border-radius:7px;cursor:pointer;font-family:inherit;white-space:nowrap;border:1px solid #2a5040;background:linear-gradient(180deg,#d8ebe0,#b8d4c4);color:#2a5040;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.init-opt-btn:active{background:#a8c4b4;}
.init-opt-btn:hover{border-color:var(--cinnabar);color:var(--cinnabar);}
.init-opt-btn.init-done{display:block;width:100%;margin-top:8px;background:linear-gradient(180deg,#c45a42,var(--cinnabar));color:#fff;border-color:#5a120c;}
.init-opt-btn:disabled,.init-opt-btn.chosen-done{background:#e7e1d3;color:#9c958a;border-color:#cdc6b8;cursor:default;text-decoration:line-through;box-shadow:none;}
.init-note{font-size:11.5px;color:var(--ink-soft);margin-top:10px;padding:6px 8px;background:rgba(43,38,32,.05);border-radius:6px;line-height:1.5;}

#lore-log{display:block;padding:0;margin:0;}
#lore-log .lg-lore{margin:4px 0;font-size:11px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-break:break-word;}
#lore-log .lg-combat{color:#a3331f;}
#lore-log .lg-levelup{color:#8e6f1f;font-weight:bold;}
#lore-log .lg-room{color:var(--ink-soft);}

.rawlog-head{font-size:12px;color:var(--ink-soft);padding:6px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);}
#raw-log{flex:1 1 auto;overflow-y:auto;padding:4px 8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;line-height:1.5;}
#raw-log .rl-line{margin:2px 0;padding:2px 4px;border-bottom:1px dotted rgba(43,38,32,.1);white-space:pre-wrap;word-break:break-word;color:var(--ink-soft);}
#raw-log .rl-tag{font-weight:bold;color:var(--cinnabar);}

#logout-btn{margin-left:8px;padding:4px 9px;font-size:12px;border-radius:6px;cursor:pointer;flex:0 0 auto;border:1px solid var(--brass-dark);background:linear-gradient(180deg,#8a6840,#5c4028);color:#d8c8a0;}
#logout-btn:active{background:linear-gradient(180deg,#3a2818,#5c4028);color:#f2e6c8;}