[hidden] { display: none !important; }
:root { --gold: #e8c77a; --panel: rgba(20, 14, 8, 0.88); --line: #6b5330; --line2: #8a6a36; --text: #f1e6cc; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: Tahoma, Arial, sans-serif; color: #eee; user-select: none; }
#game { display: block; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M2 2 L16 8 L9 10 L7 17 Z' fill='%23e8c77a' stroke='%23000'/%3E%3C/svg%3E") 2 2, default; }
button { background: #2a1e10; color: var(--gold); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer; }
button:hover { border-color: var(--gold); }
input { background: #120c06; color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; font: inherit; font-size: 13px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px; font-size: 13px; }
#hud { position: fixed; top: 8px; left: 8px; right: 196px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
#hud > * { pointer-events: auto; }
#mapName { color: var(--gold); font-weight: bold; }
#fightTag { color: #ff7d6b; font-size: 12px; }
#right { margin-left: auto; }
#status { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: 16px; padding: 12px 20px; }
#help { position: fixed; right: 8px; bottom: 74px; font-size: 11px; color: #cdb98d; max-width: 360px; opacity: .8; }

/* login */
.overlay { position: fixed; inset: 0; background: radial-gradient(#2b1c0c, #050302); display: flex; align-items: center; justify-content: center; z-index: 50; }
.loginbox { width: min(460px, calc(100vw - 32px)); background: var(--panel); border: 2px solid var(--line2); border-radius: 8px; padding: 20px 24px; box-shadow: 0 10px 50px #000; }
.loginbox h1 { margin: 0; color: var(--gold); font-size: 26px; text-align: center; letter-spacing: 1px; }
.loginbox .sub { text-align: center; color: #b49a6a; margin-bottom: 14px; font-size: 13px; }
.loginbox h3 { color: var(--gold); font-size: 14px; margin: 14px 0 8px; }
#charList { display: flex; flex-direction: column; gap: 6px; }
#charList button { text-align: left; padding: 8px 10px; font-size: 13px; }
#newName { width: 100%; box-sizing: border-box; }
.create label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.create .row { display: flex; gap: 12px; margin: 8px 0; font-size: 13px; flex-wrap: wrap; }
#btnCreate { width: 100%; padding: 8px; font-size: 14px; margin-top: 4px; }
#loginErr { color: #ff8a7a; font-size: 13px; margin-top: 6px; min-height: 16px; }

/* bottom bar */
#bottom { position: fixed; left: 0; right: 0; bottom: 0; height: 66px; background: linear-gradient(transparent, rgba(10,6,2,.9) 30%); display: flex; align-items: flex-end; gap: 12px; padding: 0 10px 12px; box-sizing: border-box; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#bars { width: 210px; display: flex; flex-direction: column; gap: 3px; }
#bars .lvl { font-size: 12px; color: var(--gold); }
.bar { position: relative; height: 12px; background: #1a120a; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.bar.hp i { background: linear-gradient(#e0473a, #8e1d14); }
.bar.mp i { background: linear-gradient(#4a8fe8, #1c3e8a); }
.bar.st i { background: linear-gradient(#e2c048, #8a6b14); }
.bar span { position: absolute; inset: 0; font-size: 10px; line-height: 12px; text-align: center; color: #fff; text-shadow: 0 0 2px #000; }
#hotbar { display: flex; gap: 4px; margin: 0 auto; }
.slot { position: relative; width: 38px; height: 38px; background: #120c06; border: 1px solid var(--line); border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot.sep { margin-left: 10px; }
.slot canvas { max-width: 34px; max-height: 34px; }
.slot .k { position: absolute; left: 2px; top: 0; font-size: 9px; color: #cdb98d; text-shadow: 0 0 2px #000; }
.slot .n { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000; }
.slot.right { border-color: #c48b2d; }
.slot.cd::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#menu { display: flex; gap: 4px; }
#expBar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #120c06; }
#expBar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #7a5d1c, #e8c77a); width: 0; }
#expBar span { position: absolute; right: 8px; bottom: 7px; font-size: 10px; color: #cdb98d; }

/* chat */
#chat { position: fixed; left: 8px; bottom: 74px; width: min(420px, calc(100vw - 16px)); }
#chatLog { max-height: 160px; overflow-y: auto; font-size: 12px; line-height: 1.45; text-shadow: 0 0 2px #000, 0 0 2px #000; padding: 2px 4px; }
#chatLog .sys { color: #ffe08a; } #chatLog .exp { color: #9df29d; } #chatLog .item { color: #8fd3ff; } #chatLog .gm { color: #ff9be0; }
#chatLog .world { color: #ffb37a; } #chatLog .chat { color: #fff; } #chatLog .err { color: #ff7d6b; }
#chatInput { width: 100%; box-sizing: border-box; display: none; margin-top: 3px; }
#chat.typing #chatInput { display: block; }

#news { position: fixed; top: 44px; left: 50%; transform: translateX(-50%); color: #ffe08a; font-size: 14px; text-shadow: 0 0 3px #000; white-space: nowrap; pointer-events: none; }
#buffs { position: fixed; top: 44px; left: 8px; display: flex; gap: 4px; }
#buffs .buff { font-size: 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; color: #9df29d; }

/* windows */
.win { position: fixed; background: linear-gradient(#2b1d0e, #1a1108); border: 2px solid var(--line2); border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.6); z-index: 10; }
.win .title { cursor: move; padding: 5px 10px; background: rgba(0,0,0,.35); color: var(--gold); font-weight: bold; font-size: 13px; display: flex; justify-content: space-between; }
.win .title .x { cursor: pointer; font-weight: normal; padding: 0 4px; }
.win .body { padding: 10px; font-size: 13px; color: var(--text); }
.win .hint { font-size: 11px; color: #b49a6a; margin-top: 6px; }
#pnlChar { left: 20px; top: 60px; width: 290px; }
#pnlInv { right: 20px; top: 60px; width: 230px; }
#pnlSkill { left: 330px; top: 60px; width: 340px; }
#pnlShop { left: 330px; top: 60px; width: 360px; }
#pnlBox { left: 330px; top: 60px; width: 230px; }
#pnlGive { left: 330px; top: 120px; width: 230px; }
#minimap { right: 8px; top: 8px; width: 180px; height: 180px; z-index: 5; overflow: hidden; }
#minimap canvas { display: block; }
.statrow { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed rgba(138,106,54,.3); }
.statrow b { color: var(--gold); font-weight: normal; }
.statrow button { padding: 0 6px; margin-left: 6px; }
.grid { position: relative; background: #0d0904; border: 1px solid var(--line); }
.cellitem { position: absolute; box-sizing: border-box; border: 1px solid rgba(138,106,54,.5); background: rgba(40,28,14,.6); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cellitem.blue { border-color: #4a8fe8; } .cellitem.gold { border-color: #e8c77a; }
.cellitem canvas { max-width: 100%; max-height: 100%; }
.cellitem .n { position: absolute; right: 1px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000; }
.cellitem.sel { outline: 2px solid #ffdf7e; }
#equipGrid { display: grid; grid-template-columns: repeat(4, 50px); gap: 4px; margin-bottom: 8px; justify-content: center; }
.eslot { position: relative; height: 50px; background: #0d0904; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #6b5330; cursor: pointer; }
.eslot canvas { max-width: 46px; max-height: 46px; }
.money { margin-top: 6px; font-size: 12px; } .money b { color: var(--gold); }
.money button { margin-left: 4px; padding: 1px 6px; }
#skillList { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.skill { display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid rgba(138,106,54,.35); border-radius: 3px; }
.skill canvas { width: 32px; height: 32px; }
.skill .info { flex: 1; font-size: 12px; } .skill .info b { color: var(--gold); font-weight: normal; }
.skill .lv { font-size: 11px; color: #b49a6a; }
.skill button { padding: 1px 6px; font-size: 11px; }
#shopList { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; }
#shopList .good { border: 1px solid rgba(138,106,54,.4); border-radius: 3px; padding: 4px; text-align: center; cursor: pointer; font-size: 11px; }
#shopList .good:hover { border-color: var(--gold); }
#shopList .good canvas { max-width: 56px; max-height: 56px; display: block; margin: 0 auto 3px; }
#shopList .good .price { color: var(--gold); }

#dialog { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); z-index: 20;
  background: linear-gradient(#2b1d0e, #1a1108); border: 2px solid var(--line2); border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.6); padding: 14px 16px; }
#dlgTitle { color: var(--gold); font-weight: bold; font-size: 15px; margin-bottom: 8px; }
#dlgText { font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-bottom: 10px; }
#dlgOptions { display: flex; flex-direction: column; gap: 3px; }
#dlgOptions button { text-align: left; background: transparent; border: 1px solid transparent; color: #ffdf7e; padding: 4px 8px; font-size: 13px; }
#dlgOptions button:hover { border-color: var(--line2); background: rgba(255,220,130,0.08); }
#ask { left: 50%; top: 40%; transform: translate(-50%, -50%); width: 280px; z-index: 30; }
#ask input { width: 170px; }
#death { left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 30; text-align: center; }
#death button { margin-top: 10px; padding: 6px 14px; }
#tooltip { position: fixed; z-index: 60; pointer-events: none; max-width: 280px; background: rgba(10,6,2,.95); border: 1px solid var(--line2); border-radius: 4px; padding: 7px 9px; font-size: 12px; line-height: 1.5; color: var(--text); }
#tooltip .nm { color: #fff; font-weight: bold; font-size: 13px; } #tooltip .nm.blue { color: #6fb0ff; } #tooltip .nm.gold { color: #ffd34d; }
#tooltip .mg { color: #8fd3ff; } #tooltip .rq { color: #c8b48a; } #tooltip .bad { color: #ff7d6b; } #tooltip .ds { color: #b49a6a; }
.c-red { color: #ff6b5b; } .c-yellow { color: #ffe36b; } .c-green { color: #7dff7d; } .c-blue { color: #6fb0ff; } .c-white { color: #fff; } .c-orange { color: #ffb347; } .c-purple { color: #d79bff; } .c-pink { color: #ff9be0; } .c-gold { color: #ffd34d; } .c-cyan { color: #6fffff; }
@media (max-width: 700px) { #help { display: none; } #bars { width: 150px; } #minimap { width: 120px; height: 120px; } }

#pnlEnchase { left: 330px; top: 120px; width: 320px; }
#pnlEnchase .body{width:auto}
#enchSlots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
#enchSlots .eslot{height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:11px;cursor:pointer}
#enchSeries{display:flex;gap:4px;margin-bottom:8px}
#enchSeries button{flex:1;padding:2px 0}
#enchSeries button.on{outline:2px solid #e8c060}
#pnlFoundry { left: 330px; top: 90px; width: 300px; }
#fdType { width: 100%; margin-bottom: 6px; }
.fdTabs, .fdBtns { display: flex; gap: 6px; margin: 6px 0; }
.fdTabs button, .fdBtns button { flex: 1; }
.fdTabs button.on { outline: 2px solid #e8c060; }
#fdNec, #fdAlt { min-height: 80px; margin-bottom: 4px; }
#held { position: fixed; z-index: 9999; pointer-events: none; opacity: .9; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.cellitem.lifted, .eslot.lifted canvas { opacity: .3; }
#bigmap { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; background: #120c05; border: 2px solid var(--line2); border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.7); padding: 4px; }
#bigmap .bm-title { color: var(--gold); font-weight: bold; padding: 2px 6px 6px; display: flex; justify-content: space-between; }
#bigmap .bm-title .x { cursor: pointer; }
#bigmap canvas { display: block; cursor: crosshair; max-width: 92vw; max-height: 82vh; }
#bigmap .bm-hint { color: #b49a6a; font-size: 11px; padding: 4px 6px 0; }
#hotbar .slot.on { outline: 2px solid #e8c060; }
#hotbar .slot.hand { width: 46px; height: 46px; border-color: #b8913e; }
#hotbar .slot.hand .nm { font-size: 11px; color: #e8d4a0; display: flex; height: 100%; align-items: center; justify-content: center; }
#handPick { position: fixed; z-index: 60; display: flex; flex-wrap: wrap; gap: 3px; max-width: 360px; padding: 6px; background: #1a1108; border: 1px solid var(--line2); border-radius: 4px; }
#handPick .slot { width: 38px; height: 38px; border: 1px solid #5a4423; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; color: #e8d4a0; }
#handPick .slot.on { outline: 2px solid #e8c060; }
#targetBox { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 6; min-width: 220px; padding: 4px 10px 6px; background: rgba(20,13,6,.85); border: 1px solid var(--line2); border-radius: 4px; text-align: center; pointer-events: none; }
#targetName { color: #f0e2c0; font-size: 13px; font-weight: bold; margin-bottom: 3px; }
#targetName.boss { color: #ffb347; }
#targetBox .tbar { position: relative; height: 10px; background: #2a0c08; border: 1px solid #000; }
#targetHp { height: 100%; background: linear-gradient(#e0483a, #a5231a); }
#targetPct { position: absolute; inset: 0; font-size: 9px; line-height: 10px; color: #fff; }

/* windows built from the original UI\UI3 layouts */
.win.jx { background: none; border: none; border-radius: 0; box-shadow: 0 6px 24px rgba(0,0,0,.55); padding: 0; }
.jxwin { position: fixed; user-select: none; }
.jxwin .jxbg { cursor: move; }
#pnlInv.jx { right: 16px; left: auto; top: 50px; width: auto; }
#pnlChar.jx { right: 250px; left: auto; top: 50px; width: auto; }
.jxlabel { white-space: nowrap; overflow: hidden; pointer-events: none; text-shadow: 1px 1px 0 #000; font-family: Tahoma, Arial, sans-serif; }
.jxbtn { cursor: pointer; }
.jxbtn canvas { position: absolute; left: 0; top: 0; }
.jxbtnlabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 11px Tahoma, Arial, sans-serif; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.jxgrid { position: absolute; }
.jxgrid .cellitem { position: absolute; }
.jxslot { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.jxslot:hover { outline: 1px solid rgba(243,194,70,.8); }
.jxslot.lifted canvas { opacity: .3; }

/* original main interface (hud.js) */
.hudlayer { position: fixed; transform-origin: top left; pointer-events: none; z-index: 8; }
.hudlayer > *, .hudlayer .jxbtn, .hudslot, .minirect, .hudinput { pointer-events: auto; }
.hudlayer .hudbg, .hudlayer .hudpass { pointer-events: none; }
.hudslot { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hudslot:hover { outline: 1px solid rgba(243,194,70,.9); }
.hudslot .n { position: absolute; right: 1px; bottom: 0; font: bold 10px Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; }
.hudslot.hand .nm { font: 11px Tahoma, sans-serif; color: #e8d4a0; text-shadow: 1px 1px 0 #000; }
.hudbar { position: absolute; }
.hudbar canvas { position: absolute; left: 0; top: 0; }
.hudinput { width: 100%; height: 100%; background: transparent; border: 0; outline: 0; color: rgb(254,255,160); font: 12px Tahoma, sans-serif; padding: 0 2px; }
.minirect { background: #000; overflow: hidden; }
.minirect canvas { display: block; }
.jxlabel.shadow { background: rgba(38,25,13,.47); }
body.jxhud #bottom, body.jxhud #hud, body.jxhud #help { display: none; }
body.jxhud #chat { position: fixed; width: 300px; background: none; border: 0; pointer-events: none; z-index: 7; }
body.jxhud #chat #chatLog { max-height: 184px; overflow-y: auto; pointer-events: auto; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; font-size: 12px; background: none; }
body.jxhud #chat:not(.typing) #chatLog { scrollbar-width: none; }
body.jxhud .jxnews { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); color: rgb(255,249,148); text-shadow: 1px 1px 0 #000; }
body.jxhud #targetBox { top: 24px; }
body.jxhud #buffs { top: 24px; }
#handPick .hint { width: 100%; font: 11px Tahoma, sans-serif; color: #b49a6a; margin-bottom: 4px; }
#handPick .slot { position: relative; }
#handPick .slot .k { position: absolute; right: 1px; bottom: 0; font: bold 10px Tahoma; color: #ffd34d; text-shadow: 1px 1px 0 #000; }

/* NPC dialogs on the original say.spr / talk.spr */
#dialog.jxdlg { left: 50%; top: 42%; bottom: auto; transform: translate(-50%, -50%); padding: 0; background: none; border: 0; box-shadow: none; }
#dialog.jxdlg canvas.jxbg { position: absolute; left: 0; top: 0; }
#dialog.jxdlg #dlgHead, #dialog.jxdlg #dlgTitle { display: none; }
#dialog.jxdlg #dlgText { color: rgb(202,230,171); font: 14px/20px Tahoma, Arial, sans-serif; overflow-y: auto; white-space: pre-wrap; text-shadow: 1px 1px 0 #000; }
#dialog.jxdlg #dlgOptions { overflow-y: auto; display: block; }
#dialog.jxdlg #dlgOptions button { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; color: rgb(202,230,171); font: 14px/20px Tahoma, Arial, sans-serif; padding: 0 4px; margin: 0; cursor: pointer; text-shadow: 1px 1px 0 #000; }
#dialog.jxdlg #dlgOptions button:hover { color: rgb(0,255,0); background: rgba(140,121,99,.55); border-color: rgb(255,0,0); }
#dialog.jxdlg[data-kind="talk"] #dlgOptions button { text-align: center; }

#pnlSkill.jx { left: 30%; top: 15%; width: auto; }
#pnlBox.jx { left: 40px; top: 100px; width: auto; }
.jxskill { cursor: pointer; }
.jxskill:hover { outline: 1px solid rgba(243,194,70,.9); }
.jxskill .k { position: absolute; right: 1px; top: 0; font: bold 10px Tahoma; color: #ffd34d; text-shadow: 1px 1px 0 #000; }

#pnlShop.jx { left: 60px; top: 70px; width: auto; }
#pnlGive.jx { left: 35%; top: 15%; width: auto; }
#ask.jx { left: 50%; top: 40%; transform: translate(-50%, -50%); width: auto; padding: 0; }
.jxtext { color: rgb(255,217,78); font: 12px/16px Tahoma, Arial, sans-serif; overflow-y: auto; text-shadow: 1px 1px 0 #000; white-space: pre-wrap; }
body.cursor-sell #bagGrid .cellitem { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><text y='16' font-size='16'>💰</text></svg>") 4 4, pointer; }
body.cursor-repair #bagGrid .cellitem { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><text y='16' font-size='16'>🔨</text></svg>") 4 4, pointer; }
#dialog.jxdlg[data-kind="talk"] #dlgOptions { overflow: visible; }
#dialog.jxdlg[data-kind="talk"] #dlgOptions button { line-height: 16px; margin-top: -2px; }

/* original login screens (login.js) */
#login.jxlogin .loginbox { display: none; }
#login.jxlogin { background: #000; }
#loginStage { position: fixed; left: 50%; top: 50%; width: 800px; height: 600px; transform-origin: center; z-index: 101; overflow: hidden; clip-path: inset(46px 0 41px 0); }
#loginStage .loginbg { position: absolute; left: 0; top: 0; width: 800px; height: 600px; }
#loginStage .loginchar { position: absolute; width: 200px; height: 260px; cursor: pointer; filter: brightness(.7); transform: scale(1.6); transform-origin: 50% 92%; }
#loginStage .loginchar.sel { filter: none; }
#loginStage .loginchar.sel::after { content: ''; position: absolute; left: 60px; right: 60px; bottom: 12px; height: 14px; border-radius: 50%; box-shadow: 0 0 18px 6px rgba(255,230,120,.55); }
#loginStage .loginarrow { color: #ffd34d; font-size: 28px; text-align: center; cursor: pointer; text-shadow: 0 0 6px #000; }
#loginStage .logininput { width: 100%; height: 100%; background: transparent; border: 0; outline: 0; color: rgb(255,252,178); font: 14px Tahoma, sans-serif; text-align: center; }
#loginStage #loginErr { position: absolute; left: 0; right: 0; top: 548px; text-align: center; color: #ff6b5b; font: 14px Tahoma; text-shadow: 1px 1px 0 #000; }

/* item tooltip as the original 弹出说明文字: dark green panel with the patterned edge strip */
#tooltip { background: rgba(0,30,19,.94); border: 1px solid rgb(0,72,0); border-radius: 0; padding: 12px 10px; color: rgb(255,255,255); font: 12px/1.45 Tahoma, Arial, sans-serif; }
#tooltip::before, #tooltip::after { content: ''; position: absolute; left: 0; right: 0; height: 9px; background-image: var(--tipEdge); background-repeat: repeat-x; }
#tooltip::before { top: 0; } #tooltip::after { bottom: 0; }
#tooltip .nm { color: rgb(255,255,255); text-align: center; font-size: 13px; }
#tooltip .nm.blue { color: rgb(108,138,255); } #tooltip .nm.gold { color: rgb(243,194,90); } #tooltip .nm.purple { color: rgb(188,64,255); }
#tooltip .mg { color: rgb(125,255,216); } #tooltip .rq { color: rgb(255,255,255); } #tooltip .rq.bad, #tooltip .bad { color: rgb(255,51,51); } #tooltip .ds { color: rgb(255,217,78); }
#death.jx { left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 0; }
.jxlabel.wrap { white-space: normal; line-height: 20px !important; display: flex; align-items: center; color: rgb(202,230,171) !important; }
.jxchoice { pointer-events: auto !important; cursor: pointer; color: rgb(202,230,171) !important; }
.jxchoice:hover { color: rgb(0,255,0) !important; background: rgba(140,121,99,.55); }

#pnlEnchase.jx { left: 38%; top: 18%; width: auto; }
#pnlFoundry.jx { left: 22%; top: 18%; width: auto; }
.jxtext.guide { color: rgb(218,255,165); font-size: 12px; line-height: 16px; overflow-y: auto; }
body.jxhud #targetBox { display: none !important; }

/* chat panels (chatpanel.js) */
body.jxhud #chatLog { display: none; }
.jxchatlist, .jxsyslist { overflow-y: auto; scrollbar-width: none; font: 12px/15px Tahoma, Arial, sans-serif; pointer-events: auto; display: flex; flex-direction: column; }
.jxchatlist > div:first-child, .jxsyslist > div:first-child { margin-top: auto; }
.jxsyslist { color: rgb(255,249,148); font-size: 13px; line-height: 14px; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; overflow: hidden; }
.jxtab { pointer-events: auto !important; cursor: pointer; border: 1px solid; background: rgba(0,0,0,.35); font-size: 11px !important; line-height: 11px !important; color: rgb(50,220,173) !important; text-shadow: none !important; }
.jxtab:hover { color: #fff !important; border-color: rgb(230,100,0) !important; }
.jxtab.on { color: rgb(182,182,182) !important; border-color: rgb(91,91,91) !important; background: rgba(0,0,0,.6); }
#worldMap { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; padding: 0; }
#tooltip .ln { white-space: pre-wrap; }
#tooltip .nm { margin-bottom: 2px; }
#pnlChar.jx { right: auto; left: 20px; top: 50px; }
#pnlEquip.jx { left: 344px; top: 50px; position: fixed; }

/* auto panel */
#autoBar { position: fixed; right: 4px; top: 175px; z-index: 9; display: flex; gap: 2px; }
#autoBar button { font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid var(--line2); border-radius: 3px; padding: 2px 6px; cursor: pointer; }
#autoBar button:hover { filter: brightness(1.3); }
body.autoon #btnAutoOn { color: #7dff7d; box-shadow: 0 0 8px #3f3; }
#pnlAuto { left: 50%; top: 12%; transform: translateX(-50%); width: 420px; }
#pnlAuto .atabs { display: flex; gap: 3px; margin-bottom: 8px; }
#pnlAuto .atabs button { flex: 1; font-size: 11px; padding: 3px 0; }
#pnlAuto .atabs button.on { outline: 2px solid #e8c060; }
#pnlAuto label { display: block; margin: 4px 0; font-size: 12px; }
#pnlAuto label.ind { margin-left: 20px; }
#pnlAuto input[type=number] { width: 64px; }
#pnlAuto .sub { margin-top: 8px; font-size: 12px; color: #c8b48a; }
#pnlAuto .row { margin-top: 8px; }
#autoToggle { width: 100%; padding: 5px; font-weight: bold; }

/* item cell background: red when the character cannot use it yet, light when it can (公共.ini ObjContColor NotUseableColor) */
.jxgrid .cellitem, #bagGrid .cellitem { background: rgba(255,255,255,.16); }
.jxgrid .cellitem.bad, #bagGrid .cellitem.bad { background: rgba(160,10,0,.62); }
/* item description lines are centred like the original popup */
#tooltip { text-align: center; }
#tooltip .ln, #tooltip .nm { text-align: center; }
#pnlAuto { width: 470px; }
#pnlAuto .atabs button { font-size: 10.5px; }
#pnlAuto textarea { width: 100%; box-sizing: border-box; background: #120c05; color: #e8d4a0; border: 1px solid var(--line2); }
#pnlAuto .ind { margin-left: 18px; }
#autoStatus { color: #7dff7d; font-size: 12px; }
#pnlMarket.jx { left: 50%; top: 50%; transform: translate(-50%, -50%); }
body:not(.autoon) #btnAutoOff { opacity: .55; }
body.autoon #btnAutoOn { cursor: default; }
/* the bag window sits over the auto buttons (its cells are see-through) */
body:has(#pnlInv:not([hidden])) #autoBar { display: none; }
canvas.native { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none !important; max-height: none !important; pointer-events: none; z-index: 1; }
.jxnotes { overflow-y: auto; font: 12px Tahoma, Arial, sans-serif; color: #e8d4a0; }
.jxnotes .n { padding: 2px 0; border-bottom: 1px solid rgba(138,106,54,.35); }
.jxnotes .n span { color: #8fd3ff; }
.jxslider { cursor: pointer; }
.jxslider canvas { pointer-events: none; }
.jxinput { background: transparent; border: none; outline: none; color: #fff66c; font: 12px Tahoma, Arial, sans-serif; padding: 0; }
#repairAlert { position: fixed; right: 224px; bottom: 268px; z-index: 8; pointer-events: auto; }
#repairAlert canvas { position: static !important; }
.jxmembers { overflow-y: auto; font: 12px Tahoma, Arial, sans-serif; }
.jxmembers div { display: grid; grid-template-columns: 40px 1fr 80px; padding: 1px 0; }
/* 同伴属性: the client has no page background sprite (同伴属性底板.spr missing): a plain panel behind the layout */
#pnlPartner { background: rgba(20,14,8,.92); border: 1px solid #8a6a36; border-radius: 3px; box-shadow: 0 0 12px #000; }
/* animated frame of gold / purple / platinum equipment (itemfx.js) */
.qfx { position: absolute; left: 0; top: 0; max-width: none !important; max-height: none !important; pointer-events: none; }
/* tips stay above every window and picker */
#tooltip { z-index: 10000; }
/* buff bar: state pictures with their countdown */
#buffs .buff { position: relative; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); border: 1px solid #6b5330; border-radius: 2px; }
#buffs .buff canvas { max-width: 28px; max-height: 28px; }
#buffs .buff .bn { font-size: 11px; color: #ffe9a8; }
#buffs .buff .bt { position: absolute; left: -2px; right: -2px; bottom: -13px; text-align: center; font: bold 10px Tahoma; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
#buffs { gap: 12px; }
#buffs .buff .bt { font-size: 9px; white-space: nowrap; }
/* the auto / shop buttons under the minimap: one column on the right edge */
#autoBar { flex-direction: column; align-items: stretch; gap: 2px; width: 84px; }
#autoBar button { text-align: center; padding: 3px 4px; }
/* character select: the background fills the window (cropped to cover), the 800x600 stage centred on it */
#loginBack { position: fixed; inset: 0; z-index: 100; background-color: #000; background-repeat: no-repeat; filter: blur(6px) brightness(.7); }
/* the bottom bar picture (玩家信息主界面) has two half-transparent strips in its first 17 rows, which showed as
   brown bands across the middle of the screen: cut them off */
canvas.hudbg { clip-path: inset(18px 0 0 0); }
/* Lệnh bài GM panel (gmpanel.js) */
#gmPanel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, 96vw); height: min(640px, 92vh); display: flex; flex-direction: column; background: rgba(14,10,5,.96); border: 1px solid var(--line2); border-radius: 4px; color: #e8d9b0; font: 12px Tahoma, sans-serif; }
#gmPanel .gmhead { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: linear-gradient(#4a3414, #241808); font-size: 14px; color: #ffe9a8; }
#gmPanel .gmx { cursor: pointer; font-size: 18px; }
#gmPanel .gmtabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px 0; }
#gmPanel .gmtabs button { font: bold 12px Tahoma; color: #d8c48f; background: #2b1d0e; border: 1px solid #5a4423; border-bottom: 0; padding: 5px 12px; cursor: pointer; border-radius: 3px 3px 0 0; }
#gmPanel .gmtabs button.on { background: #5a3f16; color: #ffe9a8; }
#gmPanel .gmbar { display: flex; gap: 12px; align-items: center; padding: 6px 8px; border-top: 1px solid #5a4423; }
#gmPanel .gmbar input { background: #120c05; color: #ffe9a8; border: 1px solid #5a4423; padding: 3px 6px; font: 12px Tahoma; }
#gmPanel .gmq { flex: 1; } #gmPanel .gmn { width: 50px; }
#gmPanel .gmpages button { background: #2b1d0e; color: #ffe9a8; border: 1px solid #5a4423; cursor: pointer; }
#gmPanel .gmbody { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 8px; align-content: start; }
#gmPanel .gmitem { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border: 1px solid #3a2a12; border-radius: 3px; background: rgba(255,255,255,.04); cursor: pointer; }
#gmPanel .gmitem:hover { border-color: #e8c060; background: rgba(255,220,120,.08); }
#gmPanel .gmpic { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
#gmPanel .gmname { font-size: 11px; text-align: center; line-height: 1.25; max-height: 2.6em; overflow: hidden; }
#gmPanel .gmact { grid-column: span 3; padding: 10px; font: bold 13px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16, #2b1d0e); border: 1px solid #8a6a36; border-radius: 3px; cursor: pointer; }
#gmPanel .gmfac, #gmPanel .gmlv { background: #120c05; color: #ffe9a8; border: 1px solid #5a4423; padding: 3px; font: 12px Tahoma; }

/* cốt truyện (public/js/story.js) */
#storyTrack { position: fixed; right: 4px; width: 236px; z-index: 9; background: rgba(12,8,4,.72); border: 1px solid #6b5426; border-radius: 4px; padding: 5px 7px; font: 12px Tahoma, Arial, sans-serif; color: #e8dcc0; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#storyTrack .st-head { display: flex; align-items: center; gap: 4px; font-weight: bold; color: #ffd27a; cursor: default; }
#storyTrack .st-arc { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#storyTrack .st-min { background: none; border: 1px solid #6b5426; color: #ffd27a; width: 18px; height: 18px; line-height: 14px; padding: 0; cursor: pointer; border-radius: 3px; }
#storyTrack .st-ch { color: #c9b48a; font-size: 11px; margin: 3px 0; }
#storyTrack .st-title { color: #ffe066; font-weight: bold; margin-top: 2px; }
#storyTrack .st-obj { margin: 2px 0 4px; line-height: 1.35; }
#storyTrack .st-wait { color: #ffab5e; margin: 4px 0; line-height: 1.35; }
#storyTrack .st-day { color: #9a8a6a; font-size: 11px; margin-top: 3px; }
#storyTrack .st-bounty { border-top: 1px solid #4a3a1a; margin-top: 5px; padding-top: 4px; }
#storyTrack .st-btitle { color: #ff8a7a; margin-bottom: 3px; line-height: 1.3; }
#storyTrack button:not(.st-min) { font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-radius: 3px; padding: 2px 8px; cursor: pointer; margin-right: 4px; }
#storyTrack button:hover { filter: brightness(1.3); }
#storyTrack .st-log { margin-top: 5px; }
#storyToast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 70; font: bold 18px Tahoma, Arial, sans-serif; color: #ffe066; text-shadow: 0 0 6px #000, 0 0 2px #000; pointer-events: none; }
#storyToast.show { animation: stToast 3.2s ease forwards; }
@keyframes stToast { 0% { opacity: 0; transform: translate(-50%, 12px); } 10% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
#storyScene { position: fixed; inset: 0; z-index: 80; cursor: pointer; }
#storyScene .bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; }
#storyScene .bar.top { top: 0; } #storyScene .bar.bottom { bottom: 0; }
#storyScene.small { inset: auto 0 0 0; height: 0; }
#storyScene.small .bar { display: none; }
#storyScene .card { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font: bold 40px 'Times New Roman', serif; color: #ffd27a; letter-spacing: 3px; text-shadow: 0 0 12px #000, 0 0 30px #a33; pointer-events: none; }
#storyScene .card.show { animation: stCard 2.3s ease forwards; }
@keyframes stCard { 0% { opacity: 0; letter-spacing: 12px; } 25% { opacity: 1; letter-spacing: 3px; } 80% { opacity: 1; } 100% { opacity: 0; } }
#storyScene .box { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); background: rgba(10,6,2,.88); border: 1px solid #8a6a2a; border-radius: 6px; padding: 12px 16px 8px; font: 15px Tahoma, Arial, sans-serif; color: #f0e6cc; box-shadow: 0 4px 18px rgba(0,0,0,.7); }
#storyScene.small .box { bottom: 120px; width: min(560px, calc(100vw - 32px)); font-size: 13px; }
#storyScene .who { color: #ffd27a; font-weight: bold; margin-bottom: 6px; font-size: 1.05em; }
#storyScene .txt { line-height: 1.5; white-space: pre-wrap; }
#storyScene .hint { text-align: right; color: #8a7a5a; font-size: 11px; margin-top: 6px; }
#storyLog { position: fixed; left: 50%; top: 8%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; z-index: 65; background: rgba(14,10,5,.95); border: 1px solid #8a6a2a; border-radius: 6px; padding: 10px 14px; font: 12px Tahoma, Arial, sans-serif; color: #e8dcc0; }
#storyLog .sl-head { display: flex; justify-content: space-between; font: bold 15px Tahoma; color: #ffd27a; margin-bottom: 8px; }
#storyLog .sl-x { background: none; border: 1px solid #8a6a2a; color: #ffd27a; cursor: pointer; border-radius: 3px; }
#storyLog .sl-lives { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-bottom: 8px; font-size: 11px; color: #776a50; }
#storyLog .sl-lives .done { color: #7dbf6a; } #storyLog .sl-lives .cur { color: #ffe066; font-weight: bold; }
#storyLog .sl-sum { color: #c9b48a; margin-bottom: 6px; }
#storyLog .sl-ch { display: flex; gap: 8px; padding: 3px 4px; border-bottom: 1px solid #2c2210; }
#storyLog .sl-ch .t { flex: 1; } #storyLog .sl-ch .l { color: #8a7a5a; }
#storyLog .sl-ch.done { color: #7dbf6a; } #storyLog .sl-ch.cur { color: #ffe066; background: rgba(255,210,100,.07); }
/* thủ thành Tống Kim */
#tdHud { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 9; width: 260px; background: rgba(12,8,4,.78); border: 1px solid #8a6a2a; border-radius: 4px; padding: 5px 8px; font: 12px Tahoma, Arial, sans-serif; color: #e8dcc0; }
#tdHud .td-head { display: flex; justify-content: space-between; font-weight: bold; color: #ffd27a; }
#tdHud .td-wave { color: #ff8a5a; }
#tdHud .td-hp { position: relative; height: 14px; background: #2a1a0a; border: 1px solid #5a4420; margin: 4px 0; border-radius: 2px; overflow: hidden; }
#tdHud .td-bar { position: absolute; left: 0; top: 0; bottom: 0; transition: width .3s; }
#tdHud .td-hpt { position: relative; display: block; text-align: center; font-size: 10px; line-height: 14px; text-shadow: 0 0 2px #000; }
#tdHud .td-row { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; }
#tdHud .td-best { color: #9a8a6a; font-size: 11px; }
#tdHud button { font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-radius: 3px; padding: 1px 8px; cursor: pointer; }
#tdMsg { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 70; font: bold 20px Tahoma, Arial, sans-serif; color: #ffe066; text-shadow: 0 0 6px #000, 0 0 2px #000; pointer-events: none; animation: stToast 3.5s ease forwards; white-space: nowrap; }
#tdMsg.warn { color: #ff5a4a; font-size: 16px; top: 36%; animation-duration: 1.8s; }
/* fixed buttons (Lệnh bài GM, Luyện công) and the quest tracker on the left */
#fixedBar { position: fixed; left: 6px; top: 84px; z-index: 9; display: flex; gap: 4px; }
#fixedBar button { font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-radius: 3px; padding: 3px 8px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
#fixedBar button:hover { filter: brightness(1.3); }
#storyTrack { left: 6px; right: auto; }
#trainWin { position: fixed; left: 50%; top: 8%; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column; background: rgba(14,10,5,.96); border: 1px solid #8a6a2a; border-radius: 6px; padding: 10px 12px; font: 12px Tahoma, Arial, sans-serif; color: #e8dcc0; }
#trainWin .tr-head { display: flex; justify-content: space-between; color: #ffd27a; font-size: 15px; margin-bottom: 6px; }
#trainWin .tr-x { background: none; border: 1px solid #8a6a2a; color: #ffd27a; cursor: pointer; border-radius: 3px; }
#trainWin .tr-note { color: #9a8a6a; font-size: 11px; margin-bottom: 8px; line-height: 1.4; }
#trainWin .tr-cur { background: rgba(255,210,100,.06); border: 1px solid #4a3a1a; border-radius: 4px; padding: 6px; margin-bottom: 8px; }
#trainWin .tr-bar { height: 10px; background: #2a1a0a; border: 1px solid #5a4420; margin: 5px 0; border-radius: 2px; overflow: hidden; }
#trainWin .tr-bar div { height: 100%; background: linear-gradient(90deg, #b8862e, #ffd27a); }
#trainWin .tr-list { overflow: auto; flex: 1; }
#trainWin .tr-fac { color: #ffd27a; font-weight: bold; margin: 6px 0 2px; border-bottom: 1px solid #3a2c12; }
#trainWin .tr-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
#trainWin .tr-row.done { color: #7dbf6a; }
#trainWin .tr-ic { width: 24px; height: 24px; flex: none; }
#trainWin .tr-nm { flex: 1; }
#trainWin .tr-st { color: #9a8a6a; font-size: 11px; }
#trainWin button { font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-radius: 3px; padding: 1px 8px; cursor: pointer; margin: 2px 4px 0 0; }
#storyTrack button.on { color: #7dff7d; box-shadow: 0 0 6px #3f3; }
/* equipment sets (public/js/buildbar.js) */
#buildBar { position: fixed; left: 6px; z-index: 9; width: 238px; background: rgba(12,8,4,.72); border: 1px solid #6b5426; border-radius: 4px; padding: 4px; font: 11px Tahoma, Arial, sans-serif; }
#buildBar .bb-status { font-weight: bold; color: #c9b48a; padding: 1px 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#buildBar .bb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
#buildBar .bb-btn { height: 20px; padding: 0; font: bold 10px Tahoma; color: #5a4a30; background: rgba(30,20,8,.8); border: 1px solid #3a2c12; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; }
#buildBar .bb-btn.on { background: linear-gradient(#4a3416,#22180a); box-shadow: 0 0 4px rgba(255,210,120,.35); }
#buildBar .bb-btn.cur { outline: 2px solid #ffe066; outline-offset: -1px; box-shadow: 0 0 8px #ffd23c; }
#buildBar .bb-btn:hover { filter: brightness(1.4); }
#buildBar .bb-gear { width: 100%; margin-top: 4px; font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-radius: 3px; cursor: pointer; }
#buildToast { position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 70; font: bold 18px Tahoma, Arial, sans-serif; color: #ffe066; text-shadow: 0 0 6px #000, 0 0 2px #000; pointer-events: none; animation: stToast 2.6s ease forwards; }
#buildMgr { position: fixed; left: 50%; top: 8%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 82vh; display: flex; flex-direction: column; background: rgba(14,10,5,.96); border: 1px solid #8a6a2a; border-radius: 6px; padding: 10px 12px; font: 12px Tahoma, Arial, sans-serif; color: #e8dcc0; }
#buildMgr .bm-head { display: flex; justify-content: space-between; color: #ffd27a; font-size: 15px; }
#buildMgr .bm-x { background: none; border: 1px solid #8a6a2a; color: #ffd27a; cursor: pointer; border-radius: 3px; }
#buildMgr .bm-note { color: #9a8a6a; font-size: 11px; margin: 6px 0; line-height: 1.4; }
#buildMgr .bm-body { display: flex; gap: 10px; min-height: 0; flex: 1; }
#buildMgr .bm-list { width: 52%; overflow: auto; max-height: 60vh; border: 1px solid #3a2c12; }
#buildMgr .bm-row { display: flex; gap: 6px; padding: 3px 5px; cursor: pointer; border-bottom: 1px solid #2c2210; }
#buildMgr .bm-row.sel { background: rgba(255,210,100,.12); } #buildMgr .bm-row.cur .bm-n { color: #ffe066; }
#buildMgr .bm-n { width: 22px; color: #9a8a6a; font-weight: bold; } #buildMgr .bm-t { flex: 1; } #buildMgr .bm-c { color: #776a50; }
#buildMgr .bm-edit { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#buildMgr .bm-title { color: #ffd27a; font-weight: bold; }
#buildMgr select, #buildMgr input { background: #1a120a; color: #e8dcc0; border: 1px solid #6b5426; margin-left: 4px; }
#buildMgr button { font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-radius: 3px; padding: 2px 8px; cursor: pointer; margin: 2px 4px 2px 0; }
#buildMgr .bm-sug button { font-weight: normal; padding: 1px 6px; }
/* VLAuto: wide, the fight page in columns (settings | left-hand rotation | right hand / auras | buffs) */
#pnlAuto { width: min(1080px, calc(100vw - 24px)); top: 6%; max-height: 88vh; display: flex; flex-direction: column; }
#pnlAuto .body { overflow-y: auto; }
#pnlAuto .atabs button { font-size: 12px; }
#pnlAuto .apage.fightgrid:not([hidden]) { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 12px; align-items: start; }
#pnlAuto .acol { min-width: 0; }
#pnlAuto .acol .sub:first-child { margin-top: 0; min-height: 44px; }
#pnlAuto .alist { max-height: 52vh; overflow-y: auto; border: 1px solid #3a2c12; border-radius: 3px; padding: 2px 6px; background: rgba(0,0,0,.25); }
#pnlAuto .apage:not(.fightgrid):not([hidden]) { columns: 2; column-gap: 24px; }
#pnlAuto .apage:not(.fightgrid) > * { break-inside: avoid; }
@media (max-width: 760px) { #pnlAuto .apage.fightgrid:not([hidden]) { grid-template-columns: 1fr 1fr; } #pnlAuto .apage:not(.fightgrid):not([hidden]) { columns: 1; } }
#pnlAuto .alist.short { max-height: 25vh; }
#pnlAuto .atier { margin: 6px 0 2px; padding: 1px 4px; font-size: 11px; font-weight: bold; color: #ffd27a; background: rgba(255,210,100,.08); border-left: 2px solid #b8862e; }
/* VLAuto: one fixed size for every tab (no jumping), the lists scroll inside */
#pnlAuto { height: min(640px, 86vh); top: 7%; }
#pnlAuto .body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#pnlAuto .apage:not([hidden]) { flex: 1; min-height: 0; overflow-y: auto; }
#pnlAuto .alist { max-height: 46vh; }

/* skill window (F5): wide, a tab per faction */
#pnlSkill.skwide { position: fixed; left: 50%; top: 6%; transform: translateX(-50%); width: min(1100px, calc(100vw - 24px)); height: min(680px, 86vh); display: flex; flex-direction: column; background: rgba(14,10,5,.96); border: 1px solid #8a6a2a; border-radius: 6px; padding: 8px 10px; font: 12px Tahoma, Arial, sans-serif; color: #e8dcc0; }
#pnlSkill .skh { display: flex; align-items: center; gap: 10px; color: #ffd27a; font-size: 15px; }
#pnlSkill .skpts { flex: 1; font-size: 12px; color: #9fe69f; }
#pnlSkill .skq { width: 220px; background: #1a120a; color: #e8dcc0; border: 1px solid #6b5426; padding: 2px 6px; font: 12px Tahoma; }
#pnlSkill .skx { background: none; border: 1px solid #8a6a2a; color: #ffd27a; cursor: pointer; border-radius: 3px; }
#pnlSkill .sktabs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
#pnlSkill .sktab { flex: 1; min-width: 72px; font: bold 12px Tahoma; background: linear-gradient(#3a2a10,#1a1006); border: 1px solid #5a4420; border-radius: 3px; padding: 4px 0; cursor: pointer; }
#pnlSkill .sktab.on { outline: 2px solid #e8c060; background: linear-gradient(#5a3f16,#2b1d0e); }
#pnlSkill .skbody { flex: 1; min-height: 0; overflow-y: auto; margin-top: 6px; }
#pnlSkill .sktitle { color: #ffd27a; font-weight: bold; margin: 8px 0 4px; border-bottom: 1px solid #3a2c12; } #pnlSkill .sktitle i { color: #8a7a5a; font-weight: normal; }
#pnlSkill .skgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }
#pnlSkill .skcell { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border: 1px solid #2c2210; border-radius: 3px; background: rgba(0,0,0,.25); cursor: pointer; }
#pnlSkill .skcell:hover { border-color: #b8862e; background: rgba(255,210,100,.06); }
#pnlSkill .skcell.L { box-shadow: inset 0 0 0 2px #5ab0e8; } #pnlSkill .skcell.R { box-shadow: inset 0 0 0 2px #e8b84a; } #pnlSkill .skcell.L.R { box-shadow: inset 0 0 0 2px #7dff7d; }
#pnlSkill .skcell.pas { opacity: .8; }
#pnlSkill .skic { position: relative; width: 34px; height: 34px; }
#pnlSkill .skic .k { position: absolute; right: -4px; top: -4px; font: bold 10px Tahoma; color: #fff; background: #8a2a1a; border-radius: 3px; padding: 0 3px; }
#pnlSkill .sknm { font-size: 11px; text-align: center; line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#pnlSkill .sklv { font-size: 10px; color: #c9b48a; }
#pnlSkill .skadd { position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; padding: 0; line-height: 14px; font: bold 12px Tahoma; color: #fff; background: #3a7a2a; border: 1px solid #6c6; border-radius: 2px; cursor: pointer; }
#pnlSkill .skfoot { color: #8a7a5a; font-size: 11px; margin-top: 4px; }
#pnlSkill .sknone { color: #8a7a5a; padding: 20px; text-align: center; }
.cdov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: bold 13px Tahoma; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; border-radius: 2px; }
#pnlChar .quickpts { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 4px 6px; background: rgba(14,10,5,.92); border: 1px solid #6b5426; border-radius: 3px; font: 11px Tahoma; color: #c9b48a; }
#pnlChar .quickpts input { width: 52px; background: #1a120a; color: #e8dcc0; border: 1px solid #6b5426; font: 11px Tahoma; }
#pnlChar .quickpts button { font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-radius: 3px; padding: 1px 6px; cursor: pointer; }
#pnlChar .quickpts button.on { outline: 2px solid #7dff7d; }
/* panels folded into the left edge (public/js/sidetab.js) */
#storyTrack, #buildBar { transition: transform .25s ease, opacity .25s ease; }
#storyTrack.slid, #buildBar.slid { transform: translateX(calc(-100% - 12px)); opacity: 0; pointer-events: none; }
.sidetab { position: fixed; left: 0; z-index: 10; writing-mode: vertical-rl; padding: 8px 3px; font: bold 11px Tahoma; color: #ffe9a8; background: linear-gradient(90deg,#5a3f16,#2b1d0e); border: 1px solid #8a6a2a; border-left: 0; border-radius: 0 4px 4px 0; cursor: pointer; box-shadow: 1px 1px 4px rgba(0,0,0,.6); }
.sidetab:hover { filter: brightness(1.3); }
.bb-fold { position: absolute; right: 4px; top: 3px; background: none; border: 1px solid #6b5426; color: #ffd27a; width: 18px; height: 18px; line-height: 14px; padding: 0; cursor: pointer; border-radius: 3px; font: bold 11px Tahoma; }
/* guide window */
#guideWin { position: fixed; left: 50%; top: 6%; transform: translateX(-50%); width: min(900px, calc(100vw - 16px)); height: min(620px, 86vh); display: flex; flex-direction: column; background: rgba(14,10,5,.97); border: 1px solid #8a6a2a; border-radius: 6px; padding: 8px 10px; font: 13px Tahoma, Arial, sans-serif; color: #e8dcc0; }
#guideWin .gd-head { display: flex; justify-content: space-between; color: #ffd27a; font-size: 16px; margin-bottom: 6px; }
#guideWin .gd-x { background: none; border: 1px solid #8a6a2a; color: #ffd27a; cursor: pointer; border-radius: 3px; }
#guideWin .gd-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
#guideWin .gd-nav { width: 220px; flex: none; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
#guideWin .gd-nav button { text-align: left; font: 12px Tahoma; color: #e8dcc0; background: rgba(40,28,10,.8); border: 1px solid #3a2c12; border-radius: 3px; padding: 5px 7px; cursor: pointer; }
#guideWin .gd-nav button.on { color: #ffe066; border-color: #b8862e; background: rgba(90,63,22,.8); }
#guideWin .gd-text { flex: 1; overflow-y: auto; line-height: 1.5; padding-right: 6px; }
#guideWin .gd-text h3 { margin: 0 0 6px; color: #ffd27a; } #guideWin .gd-text b { color: #ffe9a8; }
@media (max-width: 640px) { #guideWin .gd-body { flex-direction: column; } #guideWin .gd-nav { width: auto; flex-direction: row; flex-wrap: wrap; max-height: 30%; } }
/* phones held upright (index.html sets a 560 px layout): compact panels, no overlap with the bottom bar */
html.portrait #fixedBar { top: 64px; flex-wrap: wrap; max-width: 300px; }
html.portrait #fixedBar button { padding: 3px 6px; font-size: 11px; }
html.portrait #autoBar { top: 100px !important; flex-direction: column; }
html.portrait #autoBar button { font-size: 10px; padding: 2px 5px; }
html.portrait #storyTrack { width: 200px; font-size: 11px; }
html.portrait #buildBar { width: 200px; }
html.portrait #pnlAuto, html.portrait #buildMgr, html.portrait #pnlSkill.skwide, html.portrait #gmPanel, html.portrait #trainWin, html.portrait #storyLog { width: calc(100vw - 8px) !important; left: 4px !important; transform: none !important; top: 70px !important; max-height: calc(100vh - 220px) !important; }
html.portrait #pnlAuto .apage.fightgrid:not([hidden]) { grid-template-columns: 1fr 1fr; }
html.portrait #tdHud { top: 30px; width: 220px; }
html.portrait #storyScene .box { bottom: 160px; }