@font-face {
    font-family: "Zfull";
    /* woff2(子集化后,~1-2MB)优先;未生成时浏览器回退到 ttf 兜底,不白屏 */
    src: url("fonts/Zfull-GB.woff2") format("woff2"),
         url("fonts/Zfull-GB.ttf") format("truetype");
    font-display: swap;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* HUD/状态窗 HP·MP·SP 条尺寸的唯一真相源:两处共用,改这里两边同步。by ting */
  :root { --vbar-track-h: 12px; --vbar-fill-h: 10px; --stat-avatar-sz: 64px; --win-radius: 4px; --el-radius: 4px; --bar-radius: 2px; }
  /* 表单控件默认不继承 body 字体,显式让它们跟随全局字体 */
  button, input, select, textarea { font-family: inherit; }
  body {
    font-family: "Zfull", "Microsoft YaHei", sans-serif;
    background: #14110d; color: #ece5d8;
    display: flex; justify-content: center; padding: 2px 2px 2px;
    overflow: hidden;   /* 放大溢出时不出滚动条;缩放由 applyUiScale() 控制在视口内 */
  }
  /* 整体画面等比缩放:--ui-scale 由 applyUiScale() 按窗口尺寸算出(见 panel.js)。
     transform 不改变文档流尺寸(仍占 720px),故缩放比例计算用 offsetWidth/Height 不会与缩放互相循环。
     origin 顶部居中:缩小时画面贴顶居中,弹窗靠 --game-cy 跟随实际中心。 */
  #game { width: 720px; transform: scale(var(--ui-scale, 1)); transform-origin: top center; }
  .tools { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; align-items: center; }
  /* 名字+伙伴徽章+铜币这一段:宽度锁定为整行减去快捷栏(387px)与间距(10px),右边界正好压在下方 HP 条右端;
     内部 #hud-comps 的 margin-right:auto 把铜币顶到该段右端。按钮组靠后面 margin-left:auto 仍贴最右,不受影响。 */
  .tools .tools-info { flex: 0 0 calc(100% - 397px); min-width: 0; display: flex; align-items: center; gap: 0; }
  .tools #btn-status { margin-left: auto; }
  .tools .hudname { color: #c9a44c; font-weight: 700; font-size: 13px; letter-spacing: 1px; }
  .tools #hud-comps { margin-right: auto; }   /* 伙伴/状态徽章,用 auto 把铜币推到 tools-info 段右端(= HP 条右端) */
  .tools #btn-pk.pk-on { background: #3a2018; border-color: #6a3a2c; color: #e0a890; }
  .tools #btn-pk.pk-on:hover { background: #4a2820; }
  .tools button {
    background: #2b2419; color: #cdbf9c; border: 1px solid #5a4a2c;
    padding: 4px 12px; border-radius: var(--el-radius); cursor: pointer; font-size: 13px; /*line-height: 1.2;*/
  }
  .tools button:hover { background: #3a3120; }

  /* 地图区域 */
  #map {
    position: relative; width: 720px; height: 420px;
    border: 1px solid #5a4a2c; border-radius: var(--win-radius); overflow: hidden;
    box-shadow: inset 0 0 60px #000a;
    margin-top: -1px;
  }
  #bg { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
  /* 顶栏:横跨地图全宽的 flex 行,遮层渐变挂在此处。左=时间(自适应)、右=地图名(自适应)、中=公告(吃满剩余并居中) */
  #topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none;
    display: flex; align-items: flex-start; padding-bottom: 16px;
    background: linear-gradient(to bottom, #000a 0%, #0000 100%);
  }
  /* 当前地图名称(顶栏右侧,自适应宽度,文字浮在遮层之上) */
  #mapname {
    flex: 0 0 auto; margin-left: auto; padding: 4px 4px; color: #e0c878; font-size: 15px; letter-spacing: 1px;
    text-shadow: 0 1px 3px #000, 0 0 6px #000;
  }
  /* 游戏时间(顶栏左侧,自适应宽度) */
  #gametime {
    flex: 0 0 auto; padding: 4px 4px; color: #e8dcc0; font-size: 14px; letter-spacing: 1px;
    text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap;
  }
  #gametime .gt-icon { margin-right: 4px; }
  #gametime .gt-flavor { font-size: 13px; color: #b0a488; margin-left: 8px; letter-spacing: 0; }
  /* 系统公告(聊天区顶部置顶,不随聊天滚动;纯文字样式,与聊天消息一致;多条轮播,点击弹窗看正文,右侧 X 本次关闭) */
  #announce {
    flex: 0 0 auto; display: none; cursor: pointer; align-items: baseline;
    padding: 2px 4px 0; font-size: 13px; line-height: 1.15;
  }
  #announce.show { display: flex; }
  #announce:hover .an-title { text-decoration: underline; }
  #announce .an-tag { flex: 0 0 auto; color: #c0a050; margin-right: 4px; }
  #announce .an-title { flex: 1 1 auto; min-width: 0; color: #cdbf9c;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #announce .an-close { flex: 0 0 auto; margin-left: 6px; color: #6a5d44; cursor: pointer; }
  #announce .an-close:hover { color: #e0a050; }
  /* 公告弹窗正文:保留换行 */
  .announce-body { white-space: pre-wrap; line-height: 1.7; color: #d8cba8; font-size: 14px; max-height: 50vh; overflow-y: auto; }
  /* 当前地点名称与描述(地图左下角,保持2行) */
  #maploc {
    position: absolute; bottom: 0px; left: 0px; right: 100px; z-index: 5; pointer-events: none;
    padding: 4px 4px 4px; text-shadow: 0 1px 3px #000, 0 0 6px #000;
    background: linear-gradient(to top, #000a 0%, #0000 100%);
  }
  #maploc .ml-name { font-size: 16px; color: #e0c878; }
  #maploc .ml-desc { font-size: 13px; color: #9a8d70; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #maploc .ml-presence { display: inline-block; font-size: 13px; color: #7fb0e0; margin-top: 1px; }
  /* 注册头像选择 */
  .avatarpick { display: flex; flex-wrap: wrap; gap: 6px; }
  /* PNG 头像统一样式:等比适配方框,行内对齐(可嵌入文本/盒子)。 */
  .av-img { object-fit: contain; vertical-align: middle; image-rendering: auto; }
  /* 图标/头像三层统一尺寸:行内文本(sm)/格子(md)/大图(lg)。img 与 emoji 同尺寸,改尺寸只动这里。
     iconHtml/avatarHtml 输出层级 class,不再写内联 px。span 用于 emoji 文本,img 用于 PNG。 */
  .ic-sm, .ic-md, .ic-lg { vertical-align: middle; }
  img.ic-sm, img.ic-md, img.ic-lg { object-fit: contain; }
  /* 图标 PNG 圆角:容器圆角约 6px,图片四角戳出时给图片本身加圆角贴合(只命中 .ic-img,不影响玩家头像 .av-img)。值按需调。by ting */
  img.ic-img { border-radius: var(--el-radius); }
  span.ic-sm, span.ic-md, span.ic-lg { display: inline-block; line-height: 1; }
  img.ic-sm { width: 16px; height: 16px; } span.ic-sm { font-size: 16px; }/*修改三种格子图标的大小by ting*/
  img.ic-md { width: 40px; height: 40px; } span.ic-md { font-size: 28px; }
  img.ic-lg { width: 48px; height: 48px; } span.ic-lg { font-size: 48px; }
  /* HUD 快捷栏单独覆盖 md 尺寸(格子仅 40px,与背包/战斗的 .ic-md 区分):emoji 走 span、png 走 img,值按效果调。by ting */
  #hud .hcell .ic span.ic-md { font-size: 24px; }            /* HUD emoji 大小 */
  #hud .hcell .ic img.ic-md  { width: 32px; height: 32px; }  /* HUD png 大小(勿超 ~38px 否则溢出格子) */
  /* 技能图标 PNG 统一降亮度(靠路径 /skill/ 命中,不碰物品/怪物/头像);HUD 区域用高特异性还原正常亮度。值按需调。by ting */
  img.ic-img[src*="/skill/"] { filter: brightness(0.7); }
  #hud .hcell .ic img.ic-img[src*="/skill/"] { filter: none; }
  .avatarcell { width: 44px; height: 44px; font-size: 26px; line-height: 1; cursor: pointer;
    background: #14110d; border: 1px solid #5a4a2c; border-radius: var(--el-radius); display: flex;
    align-items: center; justify-content: center; padding: 0; transition: border-color .12s, background .12s; }
  .avatarcell:hover { background: #2a2418; }
  .avatarcell.sel { border-color: #e0c878; box-shadow: 0 0 10px #e0c87866; background: #2a2418; }
  /* 同地点玩家名单 */
  .ml-players { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1px; }
  .ml-players .pchip { font-size: 13px; color: #7fb0e0; cursor: pointer; white-space: nowrap;
    pointer-events: auto; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
  .ml-players .pchip:hover { color: #a9d0ff; text-decoration: underline; }
  .ml-players .pchip .act-tag { color: #c89; font-size: 12px; }
  .ml-players .pchip .act-tag.combat { color: #e08a7a; }
  .ml-players .pchip .act-tag.gambling { color: #d8b04a; }
  /* 地面物品行:暖金色 chip,与玩家(蓝)区分;空时灰色斜体占位 */
  .ml-ground { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 1px;
    font-size: 13px; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
  .ml-ground .gchip { color: #d9b870; cursor: pointer; white-space: nowrap; pointer-events: auto; font-size: 13px; }
  .ml-ground .gchip:hover { color: #f0d090; text-decoration: underline; }
  .ml-ground.empty { color: #8a7a58; font-style: normal; }
  /* 世界层:装连线与格子,随相机平移,使玩家始终居中 */
  #world { position: absolute; left: 0; top: 0; will-change: transform; }
  #lines { position: absolute; left: 0; top: 0; pointer-events: none; }
  .node {
    position: absolute; transform: translate(-50%, -50%);
    border-radius: var(--el-radius);
    border: 2px solid #6b5836; background: #2a2418cc; color: #e8dcc0;
    cursor: pointer; font-size: 13px; backdrop-filter: blur(1px);
    display: flex; align-items: center; justify-content: center; text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s; z-index: 3;
  }
  .node:hover { transform: translate(-50%, -50%) scale(1.08); }
  .node.current { border-color: #e0c8787c; }
  .node.reachable { border-color: #7fafe088; }
  .node.locked { opacity: .4; cursor: not-allowed; filter: grayscale(1); }
  .node.busy { pointer-events: none; }

  /* 行走的主角 */
  #hero {
    position: absolute; width: 64px; height: 64px;
    transform: translate(-30%, calc(-85% - 24px)); transform-origin: 0 0; z-index: 4;
    pointer-events: none; transition: none;
  }
  /* idle / walk 两层精灵叠放:背景图常驻,切状态只切显隐,避免换 background-image 的重解码闪烁 */
  #hero .hero-sheet {
    position: absolute; inset: 0;
    background-repeat: no-repeat; background-size: auto 64px; image-rendering: pixelated;
  }

  /* 状态栏:上排(头像 + HP/MP + 快捷栏),下排 EXP 通栏 */
  #hud {
    display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(135deg, #241d2e, #1b1610); border: 1px solid #5a4a2c;
    border-radius: var(--win-radius); padding: 4px 4px;
  }
  /* 主区:左头像(跨两行) + 右侧两行(按钮 / HP·MP·快捷栏) */
  #hud .hud-main { display: flex; align-items: stretch; gap: 10px; }
  #hud .hud-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; justify-content: space-between; }
  #hud .hud-right #hudvitals { display: flex; align-items: flex-end; gap: 10px; }
  /* 头像高度由此处控制;右侧整列 stretch 到同高,space-between 自动分配按钮↕快捷栏间距 */
  #hud .hud-avatar { position: relative; width: 64px; height: 64px; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0px;
    font-size: 40px; line-height: 1;
    background: #14110d; border: 1px solid #4a3d24; border-radius: var(--el-radius);
    filter: drop-shadow(0 3px 5px #000a) saturate(.75) brightness(.85); opacity: .9; }
  #hud .hud-avatar .lvbadge {
    background: linear-gradient(135deg, #c9b478, #9a7028); color: #2a2012; font-weight: 700;
    font-size: 12px; padding: 1px 8px; border-radius: var(--el-radius); border: 1px solid #2a2012;
    box-shadow: 0 2px 4px #0008; white-space: nowrap; }
  /* HP/MP 缩短:占据快捷栏左侧剩余空间,两条紧贴并下移贴近 EXP */
  #hud .hud-vitals { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; }
  .copper .ic-sm { vertical-align: middle; margin-right: 0px; }   /* 铜币图标(状态窗/奖励)与数字间距 */
  /* 玩家名右侧:魔法盾/状态徽章/伙伴怪物图标(纯图标,无文字) */
  #hud .hud-comps { display: flex; gap: 0px; align-items: center; }
  #hud .hud-comp { font-size: 14px; line-height: 1; cursor: default; filter: drop-shadow(0 1px 1px #000) saturate(.8) brightness(.9); opacity: .88; }
  /* 名字行图标统一尺寸(HUD 玩家名行 + 状态窗名字行):伙伴诱惑/召唤、魔法盾、状态徽章、铜币。改大小只动这一处。 */
  #hud .tools img.ic-sm, .stat-head .who .nm img.ic-sm { width: 20px; height: 20px; }
  #hud .tools span.ic-sm, .stat-head .who .nm span.ic-sm { font-size: 20px; }
  /* 玩家名一行右侧的铜币(图标+数量),靠 #hud-comps 的 margin-right:auto 推到 tools-info 段右端(= HP 条右端) */
  #hud #hud-copper { display: inline-flex; align-items: center; color: #c87f4a; font-weight: 700; font-size: 12px; line-height: 1; white-space: nowrap; }
  #hud #hud-premium { display: inline-flex; align-items: center; color: #7fb0e0; font-weight: 700; font-size: 12px; line-height: 1; white-space: nowrap; margin-left: 12px; }
  /* 资源进度条 */
  #hud .hbar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  #hud .hbar .blabel { width: 32px; color: #8a7d60; flex: 0 0 auto; font-weight: 600; }
  #hud .hbar .track { flex: 1; height: 7px; background: #2a2418; border: 1px solid #3a3020;
    border-radius: var(--bar-radius); overflow: hidden; position: relative; }
  #hud .hbar .track > i { display: block; height: 100%; border-radius: var(--bar-radius) 0 0 var(--bar-radius); transition: width .35s; }
  #hud .hud-vitals .hbar .track { height: var(--vbar-track-h); border-radius: var(--bar-radius); }
  #hud .hud-vitals .hbar .track > i { height: var(--vbar-fill-h); }
  #hud .hbar .track .v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
    padding-left: 6px; font-size: 11px; line-height: 1; color: #c8bfac; text-shadow: 0 1px 2px #000, 0 0 3px #000;
    pointer-events: none; font-weight: bold; }
  #hud .hbar.hp i { background: linear-gradient(90deg, #732820, #897028); }
  #hud .hbar.mp i { background: linear-gradient(90deg, #1e3354, #2c5076); }
  #hud .hbar.sta i, .stat-bar.sp i { background: linear-gradient(90deg, #204d25, #3d7c3e); }   /* SP 条配色(HUD + 状态窗共用一处) */
  /* 魔法盾生效:仅靠名字旁 🔷 标识(脉动),不改 MP 条样式 */
  #hud .hud-shield { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 3px #5fa8ff) saturate(.8) brightness(.9); animation: shieldPulse 3s ease-in-out infinite; }
  /* HUD 战斗外状态效果(中毒/减速/加速/石化):魔法盾右侧,小字图标+剩余秒 */
  #hud .hud-buffs { font-size: 13px; line-height: 1; letter-spacing: 1px; margin-left: 2px; opacity: 1; }
  /* 状态窗的当前生效状态区:头像/EXP 条下方的专属一排(横跨整行),与上方隔行分隔 */
 
  .stat-buffs { text-align: center; }
  .stat-buffs .statbuff { font-size: 13px; color: #cdbc8f; background: rgba(120,100,60,.18); border-radius: var(--el-radius); padding: 1px 6px; letter-spacing: 0; white-space: nowrap; }
  .stat-buffs .statbuff-none { font-size: 13px; color: #6a5d44; letter-spacing: 1px; }
  @keyframes shieldPulse { 0%,100% { opacity: .88; } 50% { opacity: .48; } }
  /* 魔法盾生效中:快捷格/战斗按钮内描边脉动(呼吸边框在主边框内侧),与未生效态区分;点击改为收起 */
  .hcell.shield-on, .slotbtn.shield-on { box-shadow: inset 0 0 0 2px #5fa8ff, inset 0 0 8px rgba(95,168,255,.6); animation: shieldEdge 3s ease-in-out infinite; }
  @keyframes shieldEdge { 0%,100% { box-shadow: inset 0 0 0 2px #5fa8ff, inset 0 0 8px rgba(95,168,255,.6); } 50% { box-shadow: inset 0 0 0 2px #2c5076, inset 0 0 3px rgba(44,80,118,.5); } }
  #hud .hbar.xp i { background: linear-gradient(90deg, #946018, #a07e2c); }
  /* HUD 快捷栏:HP/MP 右侧,紧凑格子(自然宽度,右缘与按钮/经验条对齐) */
  #hud .hud-hotbar { flex: 0 0 auto; display: flex; gap: 3px; justify-content: flex-end; }
  #hud .hcell { position: relative; width: 36px; height: 36px; flex: 0 0 auto;
    border: 1px solid #4a4028; border-radius: var(--el-radius); background: #1b1710;
    display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1;
    color: #5a4a2c; transition: border-color .12s, background .12s; }
  #hud .hcell.filled { border-color: #8a7440; color: #ece5d8; cursor: pointer;
    filter: saturate(.8) brightness(.9); opacity: .88; }
  #hud .hcell.filled:hover { background: #2a2418; border-color: #c0a050; filter: none; opacity: 1; }
  #hud .hcell.filled.disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.55); opacity: .5; }
  #hud .hcell.filled.disabled:hover { background: #1b1710; border-color: #8a7440; filter: grayscale(.7) brightness(.55); opacity: .5; }

  /* 面板 */
  #panel {
    background: #1d1812; border: 1px solid #4a3d24; border-radius: var(--win-radius);
    padding: 4px 4px;
    margin-top: -1px;
  }
  #panel h2 { font-size: 16px; color: #e0c878; margin-bottom: 4px; }
  #panel .desc { color: #9a8d70; font-size: 13px; margin-bottom: 12px; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
  /* 地点面板的 NPC / 怪物两行:固定高度,无内容时不收窄 */
  #panel .row { min-height: 30px; margin-bottom: 4px; gap: 4px; }
  #panel .row:last-child { margin-bottom: 0; }
  .label { width: 56px; color: #8a7d60; font-size: 13px; }
  /* 基础 action 按钮:服务地点面板之外的场景(观察窗攻击/PK 切换/PVP 等)。
     注意:地点面板内的 NPC/怪物按钮 padding 由下方 #panel .row button.action 独占覆盖,此处 6px 对它们不生效。 */
  button.action {
    background: #332b1c; color: #ece5d8; border: 1px solid #5a4a2c;
    padding: 6px 6px; border-radius: var(--el-radius); cursor: pointer; font-size: 13px;
  }
  button.action:hover { background: #443818; }
  button.monster { background: #3a2018; border-color: #6a3a2c; position: relative; font-size: 13px; }
  button.monster:hover { background: #4a2820; }
  button.monster.engaged { opacity: 0.5; cursor: default; color: #c89; border-style: dashed; }
  button.monster.engaged:hover { background: #3a2018; }
  /* 按钮内"名字+血条"竖列:图标在左不动,名字在上、血条紧贴名字下方(宽度随名字,不横跨整钮) */
  button.hasbar { position: relative; }
  .nmhp { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
  button.monster .mhp, button.hasbar .mhp {
    display: block; width: 100%; height: 4px;
    background: rgba(0,0,0,.45); border-radius: var(--el-radius); overflow: hidden;
  }
  button.monster .mhp-fill, button.hasbar .mhp-fill {
    display: block; height: 100%; background: #6fbf5a;
    border-radius: var(--el-radius); transition: width .2s;
  }
  button.shop { background: #1e3320; border-color: #2c5a34; }
  button.shop:hover { background: #284828; }
  button.action:disabled { opacity: .4; cursor: not-allowed; }
  /* 地点栏 NPC/怪物按钮:图标+文字作为一组,flex 水平+垂直居中(图标参与布局,不与文字叠加);图标略小于按钮高,留边距不顶边 */
  /* ← 面板内按钮左右边距的唯一生效处(4px);上方基础 button.action 的 6px 在此被覆盖,改动只需动这一行 */
  #panel .row button.action { height: 30px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
  #panel .row button.action > img.ic-sm { width: 26px; height: 26px; }
  #panel .row button.action > span.ic-sm { font-size: 24px; }
  .empty { color: #6a5d44; font-size: 13px; font-style: italic; }
  /* 场景事件框:显示"你来到了…""此路不通"等提示(作为底部左栏) */
  #events { padding: 4px 4px; background: #14110d;
    border: 1px solid #3a3020; border-radius: var(--win-radius); overflow-y: auto;
    flex: 1 1 0; min-width: 0; }
  #events .evt { font-size: 13px; color: #b9ad8e; line-height: 1.15;
    border-bottom: 1px dashed #2a2418; padding: 0; }
  #events .evt:last-child { border-bottom: none; }
  #events .evt.warn { color: #e0a050; }   /* 警告类:此路不通等 */
  #events .evt.good { color: #6bd17a; }   /* 利好类 */

  /* 底部:左事件信息栏 + 右聊天面板(NPC/怪物布局在上方 #panel 内,保持全宽不动)*/
  #bottom { display: flex; gap: 0; align-items: stretch; margin-top: -1px; height: 124px; }
  /* 聊天社交面板(右栏,独立持久,不随 renderPanel 重写) */
  #chat {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    background: #1d1812; border: 1px solid #4a3d24; border-radius: var(--win-radius);
    overflow: hidden;
  }
  #chat-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 2px 2px; background: #14110d; margin: 2px 2px 0; }
  #chat-stream .cmsg { font-size: 13px; line-height: 1.15; margin-bottom: 0;
    word-break: break-word; }
  #chat-stream .cmsg .ch { font-size: 13px; }
  #chat-stream .cmsg .ch.world { color: #c0a050; }
  #chat-stream .cmsg .ch.loc { color: #6bb0a0; }
  #chat-stream .cmsg .who { color: #7fb0e0; }
  #chat-stream .cmsg .who.me { color: #6bd17a; }
  #chat-stream .cmsg .txt { color: #cdbf9c; }
  #chat-stream .cmsg.sys { color: #6a5d44; font-style: italic; }
  #chat-input { display: flex; gap: 2px; padding: 2px; }
  #chat-channel { background: #14110d; color: #e0c878; border: 1px solid #5a4a2c;
    border-radius: var(--el-radius); padding: 0 8px; font-size: 13px; cursor: pointer; flex: 0 0 auto;
    -webkit-appearance: none; -moz-appearance: none; appearance: none; }
  #chat-channel:focus { outline: none; border-color: #7a6332; }
  #chat-text { flex: 1; min-width: 0; background: #14110d; color: #ece5d8;
    border: 1px solid #5a4a2c; border-radius: var(--el-radius); padding: 5px 8px; font-size: 13px;
    max-height: 60px; overflow-y: auto; line-height: 1.2; white-space: pre-wrap; word-break: break-word; }
  #chat-text:focus { outline: none; border-color: #7a6332; }
  #chat-text:empty::before { content: attr(data-ph); color: #6a5d44; pointer-events: none; }
  /* 物品/技能引用链接(聊天流 + 输入框内只读标签共用) */
  .chatref { display: inline; padding: 0 2px; border-radius: var(--el-radius); cursor: pointer;
    white-space: nowrap; }
  .chatref.item  { color: #6bb0e0; }
  .chatref.skill { color: #b489e0; }
  .chatref:hover { background: #2a2418; text-decoration: underline; }
  /* 输入框内的只读标签:不可编辑、整体选中删除 */
  #chat-text .chatref { background: #221d14; }
  /* 物品/技能引用详情:居中迷你弹窗 */
  #opmenu { position: fixed; inset: 0; background: #0008; z-index: 50;
    display: flex; align-items: center; justify-content: center; }
  #opmenu .opcard { background: #1d1812; border: 1px solid #5a4a2c; border-radius: var(--win-radius);
    padding: 16px 20px; max-width: 280px; text-align: center; box-shadow: 0 6px 24px #000a; }
  #opmenu .opicon { font-size: 48px; line-height: 1; margin-bottom: 6px; }
  #opmenu .opname { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  #opmenu .opname.item, #opmenu .opname.affixed { color: #6bb0e0; }   /* 词缀/装备引用:蓝 */
  #opmenu .opname.skill { color: #b489e0; }                            /* 技能引用:紫 */
  #opmenu .opname.plain { color: #c8c4bc; }                            /* 普通物品:白 */
  #opmenu .opdesc { font-size: 13px; color: #9a8d70; line-height: 1.6; margin-bottom: 14px; }
  #opmenu .opbtns { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
  #chat-send { background: #332b1c; color: #e0c878; border: 1px solid #5a4a2c;
    border-radius: var(--el-radius); padding: 0 12px; cursor: pointer; font-size: 13px; }
  #chat-send:hover { background: #443818; }

  /* 弹窗 */
  /* 统一弹窗卡片定位:垂直锚到 #game 中心(--game-cy,由 syncGameCenter() 实时写入),水平随页面居中。
     所有居中卡片只引用这一条,改定位算法只动这里。遮罩(#overlay/#opmenu)各自铺满全屏不在此列。 */
  #modal, #opmenu .opcard, #bookwin .bookwin-card {
    position: fixed; left: 50%; top: var(--game-cy, 50%);
    transform: translate(-50%, -50%) scale(var(--ui-scale, 1));   /* 末尾乘缩放,与主画面同比例;以卡片中心为锚点 */
  }
  #overlay { position: fixed; inset: 0; background: #000b; display: none;
    align-items: center; justify-content: center; z-index: 10; }
  #overlay.show { display: flex; }
  #modal { background: #221c14; border: 1px solid #5a4a2c; border-radius: var(--win-radius);
    padding: 10px; width: 560px; box-shadow: 0 10px 40px #000c; max-height: 90vh; overflow-y: auto; }
  #modal h3 { color: #e0c878; font-size: 15px; margin-bottom: 12px; }
  /* 设置窗:每行「标签 + 开/关按钮」,按钮宽度统一,开=默认色 关=暗红(.monster) */
  .setwin { min-width: 240px; }
  .setwin h3 { text-align: center; }
  .setwin .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 4px; border-bottom: 1px solid #3a3120; }
  .setwin .set-label { color: #cdbf9c; font-size: 14px; }
  .setwin .set-row .action { min-width: 52px; text-align: center; }
  /* 启动期(未进入游戏):整块游戏骨架隐藏,页面只剩纯色背景,登录/加载小窗后方不再透出空框架。
     startGame() 移除 body.booting 后骨架揭开。 */
  body.booting #game { visibility: hidden; }
  /* 登录加载小窗:复用 overlay/modal,但收窄成居中小卡片(转圈 + 文案)。 */
  #modal.loadwin { width: auto; min-width: 200px; text-align: center; padding: 22px 30px; }
  .loadwin-spin { width: 30px; height: 30px; margin: 0 auto 12px; border: 3px solid #5a4a2c;
    border-top-color: #e0c878; border-radius: 50%; animation: loadwin-spin .8s linear infinite; }
  .loadwin-text { color: #e0c878; font-size: 14px; }
  @keyframes loadwin-spin { to { transform: rotate(360deg); } }
  /* 资源预载进度条:轨道 + 金色填充,宽度由 JS 按百分比设置 */
  .loadwin-bar { width: 240px; height: 10px; margin: 14px auto 8px; background: #2a2118;
    border: 1px solid #5a4a2c; border-radius: var(--bar-radius); overflow: hidden; }
  .loadwin-bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, #b89048, #e0c878);
    transition: width .2s ease; }
  .loadwin-pct { color: #e0c878; font-size: 12px; }
  /* 休息窗内框:框内铺背景图(叠中性黑遮罩压暗)+ 角色卡;按钮在框外下方 */
  #rest-frame { border: 1px solid #5a4a2c; border-radius: var(--el-radius); padding: 8px; height: 282px;
    display: flex; flex-direction: column; justify-content: center;
    background:
      linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
      url(images/background/02.jpg) center/cover no-repeat; }
  /* 休息窗角色卡:复用 .combatant 布局,但不显示边框/来源描边(纯展示恢复进度) */
  #rest-cards .combatant { border-color: transparent !important; background: transparent !important; }
  /* 主角卡比伙伴卡多一条 SP 条→改顶对齐,让名字/头像/HP/MP 这些每张卡都有的部分对齐,SP 条多出的部分挂在主角卡底部 */
  #rest-cards { align-items: flex-start; }
  /* 挖矿网格:5×5 方格,居中;未揭格可点,已揭格按类型显图标 */
  .mine-grid { display: grid; gap: 4px; justify-content: center; margin: 0 auto; }
  .mine-cell { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; padding: 0; border-radius: var(--el-radius); }
  button.mine-cell { background: #3a3220; border: 1px solid #5a4a2c; cursor: pointer; }
  button.mine-cell:hover:not(:disabled) { background: #4a4028; }
  button.mine-cell:disabled { opacity: .4; cursor: default; }
  .mine-cell.revealed { border: 1px solid transparent; background: #1b1710; }
  .mine-cell.revealed img.ic-img { width: 30px; height: 30px; }   /* 矿物图标填满格子(覆盖默认 ic-sm 16px) */
  .mine-cell.revealed.waste { opacity: .45; }
  .mine-cell.revealed.hazard { background: #3a1b14; }
  /* 挖掘中:该格底部进度条由 0 撑满到 100%,时长 = digSec(inline animation-duration) */
  button.mine-cell.digging { background: #4a4028; cursor: default; position: relative; overflow: hidden; }
  .mine-prog { position: absolute; left: 0; bottom: 0; height: 4px; width: 0;
    background: #e0c040; animation-name: mine-prog-fill; animation-timing-function: linear; animation-fill-mode: forwards; }
  @keyframes mine-prog-fill { from { width: 0; } to { width: 100%; } }
  .mine-status { text-align: center; margin-top: 12px; font-size: 13px; color: #cdbf9c; }
  .mine-result { font-weight: 600; }
  .mine-result.warn { color: #e0705a; }
  .mine-result.good { color: #8fc96f; }
  /* 矿脉储量条:网格上方,居中显示剩余档位;枯竭态红字提示 */
  #mine-reserve-box { text-align: center; margin: 4px 0 10px; font-size: 13px; color: #b0a079;
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 8px; }
  #mine-reserve-box:empty { margin: 0; }
  .mine-depleted { color: #e0705a; }
  .mine-rlevel { font-weight: 600; letter-spacing: 1px; }
  .mine-loot { margin: 0 4px; }
  .mine-basket-empty { color: #8a7d60; font-style: italic; }
  /* 钓鱼:抛竿/咬钩/遛鱼三态共用居中布局,套在 #rest-frame 内 */
  .fish-stage { display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 12px; text-align: center; position: relative; overflow: hidden; }
  .fish-float { font-size: 48px; animation: fish-bob 1.6s ease-in-out infinite; }
  @keyframes fish-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  /* 抛竿静候:背景随机游动的黑色鱼影(纯装饰,横穿泳池;rtl 从右往左 + 朝向翻转) */
  .fish-pond { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .pond-fish { position: absolute; color: #000; filter: brightness(0); opacity: .5; line-height: 1;
    animation: pond-swim linear infinite; will-change: transform; }
  .pond-fish.rtl { animation-name: pond-swim-rtl; }
  @keyframes pond-swim { from { left: -10%; transform: scaleX(-1); } to { left: 110%; transform: scaleX(-1); } }
  @keyframes pond-swim-rtl { from { left: 110%; transform: scaleX(1); } to { left: -10%; transform: scaleX(1); } }
  .fish-stage > :not(.fish-pond) { position: relative; z-index: 1; }
  .fish-tip { color: #b0a079; font-size: 14px; }
  .fish-bite-alert { font-size: 28px; font-weight: 700; color: #e0c040; animation: fish-flash .5s ease-in-out infinite alternate; }
  @keyframes fish-flash { from { opacity: .55; } to { opacity: 1; } }
  .fish-bite-track { width: 70%; height: 8px; background: #2a2418; border-radius: var(--bar-radius); overflow: hidden; }
  .fish-bite-bar { height: 100%; background: #e0c040; width: 100%; }
  .fish-name { font-size: 18px; font-weight: 600; color: #e8dcc0; }
  .fish-hint { font-size: 14px; color: #b0a079; font-weight: 400; }
  .fish-bar-row { display: flex; align-items: center; gap: 8px; width: 80%; margin: 2px auto; }
  .fish-bar-label { width: 32px; font-size: 12px; color: #b0a079; text-align: right; }
  .fish-bar-track { flex: 1; height: 14px; background: #2a2418; border-radius: var(--bar-radius); overflow: hidden; }
  .fish-bar-fill { height: 100%; transition: width .25s; }
  .fish-bar-fill.tension { background: #5a9c5a; }
  .fish-bar-fill.tension.warn { background: #d6a93a; }
  .fish-bar-fill.tension.danger { background: #e0705a; }
  .fish-bar-fill.escape { background: #4a90e0; }
  .fish-bar-fill.vigor { background: #c88a3a; }
  .fish-vigor-tag { width: 56px; font-size: 11px; color: #d8b888; text-align: left; white-space: nowrap; }
  .fish-text { color: #d8ccae; font-size: 13px; min-height: 18px; margin-top: 4px; }
  .fish-result { font-weight: 600; font-size: 15px; }
  .fish-result.warn { color: #e0705a; }
  .fish-result.good { color: #8fc96f; }
  /* 实时遛鱼:横向挣扎槽(甜区随鱼游动)+ 张力游标 + 张力滑杆 */
  .fish-track { position: relative; width: 86%; height: 26px; background: #2a2418;
    border-radius: var(--el-radius); overflow: hidden; margin: 4px auto 0; }
  .fish-zone { position: absolute; top: 0; height: 100%; background: rgba(90,156,90,.45);
    border-left: 1px solid #5a9c5a; border-right: 1px solid #5a9c5a; transition: left .09s linear, width .09s linear; }
  .fish-marker { position: absolute; top: -2px; width: 4px; height: calc(100% + 4px);
    margin-left: -2px; background: #e8dcc0; border-radius: var(--el-radius); box-shadow: 0 0 4px rgba(0,0,0,.6);
    transition: left .1s linear; }
  .fish-marker.good { background: #8fc96f; }
  .fish-marker.tight { background: #e0705a; }
  .fish-marker.loose { background: #d6a93a; }
  /* 黑色鱼影:挣扎槽上方泳道,跟随甜区中心左右游动(泳道与槽同宽同居中,left% 才对齐) */
  .fish-shadow-lane { position: relative; width: 86%; height: 30px; margin: 6px auto 0; }
  .fish-shadow { position: absolute; bottom: -10px; font-size: 28px; line-height: 1;
    color: #000; filter: brightness(0); opacity: .7;
    transition: left .09s linear; will-change: left; }
  /* 钓鱼 prep:选饵复用背包道具格 .cell2;数量少且可变,用 flex 居中换行(不用 .grid 的刚性5列,否则不足5个会靠左) */
  #fish-bait-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 260px; margin: 6px auto 0; }
  /* 实时遛鱼:挣扎槽下用「收线」按钮(复用 .action.strike)连点蓄张力,不再用滑杆 */
  button.action.strike { background: #5a3320; border-color: #8a5030; font-weight: 700; animation: fish-flash .6s ease-in-out infinite alternate; }
  button.action.strike:hover { background: #6e4028; }
  #log { background: #14110d; border-radius: var(--el-radius); padding: 10px; height: 150px;
    overflow-y: auto; font-size: 14px; margin-bottom: 12px; line-height: 1.6; }
  #log div { margin-bottom: 2px; }
  .hpbar { height: 11px; position: relative; background: #2a2418; border-radius: var(--bar-radius); overflow: hidden; margin: 2px 0 1px; }
  .hpbar > i { display: block; height: 100%; background: #e0c040; transition: width .3s; }
  .hpbar.foe > i { background: #e0c040; }
  .mpbar { height: 11px; position: relative; background: #2a2418; border-radius: var(--bar-radius); overflow: hidden; margin: 0 0 1px; }
  .mpbar > i { display: block; height: 100%; background: #4a90e0; transition: width .3s; }
  .spbar { height: 11px; position: relative; background: #2a2418; border-radius: var(--bar-radius); overflow: hidden; margin: 0 0 1px; }
  .spbar > i { display: block; height: 100%; background: linear-gradient(90deg, #204d25, #3d7c3e); transition: width .3s; }
  /* 进度条内居中显示的数值(覆盖在填充之上) */
  .barval { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000;
    pointer-events: none; font-weight: bold; }
  button.inn { background: #2a2640; border-color: #4a4470; }
  button.inn:hover { background: #34305a; }

  /* 战斗:受击特效动画 */
  @keyframes shake {
    0%,100% { transform: translateX(0) rotate(0); }
    15% { transform: translateX(-9px) rotate(-6deg); }
    30% { transform: translateX(8px) rotate(5deg); }
    45% { transform: translateX(-7px) rotate(-4deg); }
    60% { transform: translateX(5px) rotate(3deg); }
    75% { transform: translateX(-3px) rotate(-2deg); }
  }
  @keyframes flash { 0%,100% { filter: drop-shadow(0 4px 6px #000a); }
    40% { filter: drop-shadow(0 0 18px #ff5a5a) brightness(2.2) saturate(2); } }
  @keyframes healglow { 0%,100% { filter: drop-shadow(0 4px 6px #000a); }
    50% { filter: drop-shadow(0 0 16px #6bd17a) brightness(1.4); } }
  .dmgfloat { position: absolute; top: 8px; left: 50%; font-weight: bold;
    font-size: 22px; color: #ff6b6b; text-shadow: 0 2px 4px #000;
    pointer-events: none; animation: floatup 1.6s ease-out forwards; }
  .dmgfloat.heal-txt { color: #6bd17a; }
  .dmgfloat.miss-txt { color: #cfcfcf; font-size: 18px; font-style: italic; }
  .dmgfloat.crit-txt { color: #ffd84a; font-size: 30px;
    text-shadow: 0 0 6px #ff6b00, 0 2px 4px #000; }
  @keyframes floatup { 0% { transform: translate(-50%,0); opacity: 1; }
    100% { transform: translate(-50%,-50px); opacity: 0; } }
  .battlerow { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 8px; justify-content: center; }

  /* ATB 战斗:多敌横排 + 我方 */
  #enemyRow { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
    gap: 2px; margin-bottom: 14px; min-height: 150px; }   /* min-height:诱惑掉最后一只怪后敌方区清空也保留占位,战斗画面不塌陷跳变 */
  #meArea { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2px; margin-bottom: 12px; }
  /* 伙伴面板:同伴横排,复用战斗格样式 */
  .petrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 2px; margin: 4px 0 6px; }
  /* ===== 统一战斗角色框:我方主角 / 我方伙伴 / 敌方角色 / 敌方伙伴共用同一套外观 =====
     布局与外观全部由 .combatant 承载;阵营(ally/enemy)、来源(charm/summon)、状态(targeted/friendsel/dead)只做差异覆盖。
     relative:让伤害飘字锚定到各自头像上方。 */
  .combatant { width: 103px; flex: 0 0 auto;
    text-align: center; padding: 4px 4px; border: 2px solid transparent; border-radius: var(--el-radius);
    position: relative; cursor: pointer; transition: border-color .15s, background .15s; }
  .combatant:hover { background: #ffffff0c; }
  /* 伙伴来源描边(名字前另有 💗/🔮 图标区分) */
  .combatant.charm  { border-color: #e07ab066; background: #e07ab012; }
  .combatant.summon { border-color: #7a9ce066; background: #7a9ce012; }
  /* 选中态:敌方攻击目标(金)/ 友方恢复目标(绿,C2) */
  .combatant.targeted  { border-color: #dd4517c2; background: #f0c0401a; box-shadow: 0 0 10px #f0c04055; }
  .combatant.friendsel { border-color: #54d07bbd; background: #54d07c1a; box-shadow: 0 0 10px #54d07c55; }
  /* 阵亡:灰化半透、不可点选 */
  .combatant.dead { opacity: .4; cursor: default; pointer-events: none; filter: grayscale(1); }
  /* 统一头像:块级 flex(非 inline),不产生行盒、不受 img/emoji 基线差异影响,高度恒为 48px,各格血条起点一致 */
  .combatant .sprite { font-size: 48px; line-height: 1; filter: drop-shadow(0 4px 6px #000a);
    transition: transform .1s; display: flex; align-items: center; justify-content: center;
    height: 48px; position: relative; }
  .sprite.hit { animation: shake .4s; }
  .sprite.flash { animation: flash .3s; }
  /* 受击时 hit+flash 同时存在:让晃动和闪光两个动画一起跑(否则后声明的 flash 会覆盖 shake) */
  .sprite.hit.flash { animation: shake .4s, flash .3s; }
  .sprite.heal { animation: healglow .5s; }
  .sprite.status { animation: statusglow .6s; }
  @keyframes statusglow { 0%,100% { filter: drop-shadow(0 4px 6px #000a); }
    50% { filter: drop-shadow(0 0 16px #b07ae0) brightness(1.3) saturate(1.6); } }
  /* 持续状态:石化(灰白半透+轻微僵硬)、中毒(绿色调) */
  .sprite.petrified { filter: grayscale(1) brightness(1.4) drop-shadow(0 0 8px #ccd) !important; opacity: .85; }
  .sprite.poisoned { filter: drop-shadow(0 0 8px #6bd17a) hue-rotate(40deg) !important; }
  /* 战败倒下:灰化 + 半透,表现"角色倒下"(不旋转) */
  .sprite.fallen { filter: grayscale(1) brightness(.7) !important; opacity: .5;
    transition: transform .5s, opacity .5s, filter .5s; }
  /* 敌人头顶状态徽章 */
  .statusbadges { font-size: 14px; margin-top: 2px; height: 16px; line-height: 16px; letter-spacing: 2px;
    white-space: nowrap; overflow: hidden; }
  /* 魔法盾/状态图标(PNG)在 HUD/状态窗/战斗徽章/行动条里:覆盖 .ic-sm 固定 16px,缩到与文字协调并居中对齐。
     只局部覆盖这些徽章上下文,不动全局 .ic-sm(背包/地点按钮等仍用 16px)。改大小动这里。by ting */
  #hud .hud-shield .ic-sm,
  #hud .hud-buffs .ic-sm,
  .stat-buffs .statbuff .ic-sm,
  .statusbadges .ic-sm,
  [id$="AtbTxt"] .ic-sm {
    width: 16px; height: 16px; font-size: 16px; vertical-align: middle;
  }
  .cbname { font-size: 13px; color: #ece5d8; margin-bottom: 1px; }
  /* 名字固定行高:伙伴名带 emoji 前缀(💗/🔮)行高更大,不固定会撑高该格,底部对齐(flex-end)后名字被压低 */
  .combatant .cbname { height: 16px; line-height: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* ATB 行动条(绿色) */
  .atb { height: 11px; position: relative; background: #2a2418; border-radius: var(--bar-radius); overflow: hidden;
    margin: 0 0 1px; }
  .atb > i { display: block; height: 100%; width: 0%; background: #4caf50;
    transition: width .12s linear; }
  .atb.ready > i { background: #6bd17a; box-shadow: 0 0 8px #6bd17a; }
  .price { color: #f0c040; font-size: 12px; margin-right: 8px; }

  /* 战斗指令按钮:全部统一为正方形(避免界面变形) */
  .slotbtn, .cmdsq { width: 48px; height: 48px; flex: 0 0 auto; position: relative;
    background: #332b1c; color: #ece5d8; border: 1px solid #5a4a2c; border-radius: var(--el-radius);
    cursor: pointer; font-size: 12px; padding: 3px 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
  .slotbtn:hover:not(:disabled), .cmdsq:hover:not(:disabled) { background: #443818; }
  .slotbtn .sicon, .cmdsq .sicon { font-size: 24px; line-height: 1; }
  .slotbtn small, .cmdsq small { font-size: 9px; color: #9a8d70; }
  /* 冷却遮罩:覆盖整个技能格,中央显示剩余秒数;无冷却时隐藏。
     统一用于战斗按钮(.slotbtn)/ HUD 快捷栏(#hud .hcell)/ 技能页(.cell2 .hotcell)。 */
  .slotbtn .cdmask, #hud .hcell .cdmask, .cell2 .cdmask, .hotcell .cdmask {
    position: absolute; inset: 0; border-radius: var(--el-radius); display: none;
    align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
    color: #ffd98a; background: rgba(10,8,4,0.62); text-shadow: 0 0 3px #000; pointer-events: none; }
  .slotbtn .cdmask.on, #hud .hcell .cdmask.on, .cell2 .cdmask.on, .hotcell .cdmask.on { display: flex; }
  /* 冷却中:整格不可点(野外快捷栏/技能页用 class 控制,不依赖 disabled 属性) */
  #hud .hcell.cooling, .cell2.cooling, .hotcell.cooling { cursor: not-allowed; }
  #hud .hcell.cooling { pointer-events: none; }
  .slotbtn.empty { color: #5a4a2c; border-style: dashed; cursor: default; }
  .slotbtn:disabled, .cmdsq:disabled { opacity: .45; cursor: not-allowed; }
  .cmdsq[data-cmd="atk"] { border-color: #6a5a3a; }
  .cmdsq[data-cmd="flee"] { border-color: #6a4a3a; }

  .cfghint { font-size: 14px; color: #9a8d70; margin: 4px 0 10px; }
  /* ===== 合并后的物品/装备格子界面 ===== */
  .invsec { font-size: 13px; color: #8a7d60; margin: 6px 0 6px; text-align: center; }
  .grid { display: grid; grid-template-columns: repeat(5, 48px); gap: 2px; justify-content: center; }
  /* 装备:人体布局 3 列 × 4 行,格间距 2px 与背包/快捷栏一致;整体黑底边框包裹 */
  .grid.equip { position: relative; grid-template-columns: repeat(3, 48px); gap: 2px; justify-content: start;
    background: #000; border: 1px solid #5a4a2c; border-radius: var(--el-radius); padding: 6px; }
  /* "装备"标题:叠在黑边框左上角 */
  .equip-title { position: absolute; left: 7px; top: 4px; font-size: 12px; color: #8a7d60;
    line-height: 1; pointer-events: none; z-index: 1; }
  /* 装备区:498px 居中块(与背包/快捷栏等宽对齐),人形格左对齐、属性/加成跟在右侧;两侧等高拉伸 */
  .equip-area { display: flex; align-items: stretch; justify-content: flex-start; gap: 4px;
    width: 498px; max-width: 498px; margin: 6px auto 2px; }
  /* 属性框:占满人形右侧剩余宽度,高度由 equip-area 拉伸自动与装备框齐平;属性从顶部排列,超出则框内滚动 */
  .attr-box { flex: 1; box-sizing: border-box;
    border: 1px solid #5a4a2c; border-radius: var(--el-radius); background: #1b1710;
    padding: 4px 10px; display: flex; flex-direction: column;
    overflow-y: auto; gap: 1px; }
  .attr-row { display: flex; align-items: baseline; justify-content: space-between;
    font-size: 13px; line-height: 1.5; border-bottom: 1px dashed #3a3220; padding: 1px 0; flex: 0 0 auto; }
  .attr-k { color: #8a7d60; }
  .attr-v { color: #e0c878; font-weight: 600; }
  .attr-bonus { font-size: 13px; color: #6b9c6b; line-height: 1.3; padding-top: 3px; margin-top: 2px;
    border-top: 1px solid #3a3220; flex: 0 0 auto; }
  /* 观察窗信息框:主角与伙伴共用的横向行(头像左,名字+HP右) */
  .obs-line { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-bottom: 4px; }
  .obs-line:first-child { padding-bottom: 6px; border-bottom: 1px solid #3a3220; margin-bottom: 6px; }
  .obs-ava { flex: 0 0 auto; width: 48px; display: flex; align-items: center; justify-content: center; line-height: 1; }
  /* 伙伴头像(怪物):48×48 盒子 + 1px 边框,内部头像适当缩小 */
  .obs-ava.mon { width: 48px; height: 48px; border: 1px solid #5a4a2c; border-radius: var(--el-radius); background: #1b1710; overflow: hidden; }
  .obs-ava.mon img.ic-lg { width: 40px; height: 40px; }
  .obs-ava.mon span.ic-lg { font-size: 40px; width: auto; }
  .obs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .obs-nm { color: #e0c878; font-size: 13px; font-weight: 600; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .obs-info .hpbar { width: 100%; }
  /* 评价文字嵌在主角 HP 条下方:去掉通用函数自带的居中与大下边距 */
  .obs-assess > div { text-align: left !important; margin-bottom: 0 !important; font-size: 12px !important; line-height: 1.3 !important; }

  /* NPC/怪物观察窗:上半信息区(左头像+类型,右名字/HP/描述)+ 下半对话区 */
  .obv-head { display: flex; gap: 14px; margin-bottom: 12px; }
  /* 左列:头像框固定 64×64(内含 48 头像 + 类型),框高即整行高 */
  .obv-ava { flex: 0 0 auto; display: flex; }
  .obv-ava .obv-pic { width: 64px; height: 64px; border: 1px solid #5a4a2c; border-radius: var(--el-radius); background: #1b1710;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; overflow: hidden; }
  .obv-ava .obv-pic img.ic-lg { width: 48px; height: 48px; }
  .obv-ava .obv-pic span.ic-lg { font-size: 44px; width: auto; }
  .obv-type { font-size: 12px; color: #cdbf9c; text-align: center; line-height: 1.2; margin-top: -1px; }
  /* 右列:名字+HP 同行 / 描述,总高锁定 64(与头像框一致),内容垂直居中 */
  .obv-info { flex: 1; min-width: 0; height: 64px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
  /* 名字行:名字固定宽度(对齐多目标的 HP 条起点),HP 条占余下空间 */
  .obv-nameline { display: flex; align-items: center; gap: 10px; }
  .obv-name { flex: 0 0 96px; font-size: 16px; color: #e0c878; font-weight: 600; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* HP 条:前缀"HP"文字 + 只显条不显数值,固定较短宽度(不再吃满名字右侧),条复用 .hpbar 渐变风格 */
  .obv-hp { flex: 0 0 200px; min-width: 0; display: flex; align-items: center; gap: 6px; }
  .obv-hplabel { flex: 0 0 auto; font-size: 12px; color: #8a7d60; }
  .obv-hp .hpbar { flex: 1; min-width: 0; margin: 0; }
  /* 描述:固定两行文字空间(无论内容多少都占两行高),超出截断 */
  .obv-desc { font-size: 13px; color: #9a8d70; line-height: 1.5; height: 39px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* 对话区:固定高度,玩家未交谈时留空占位;有内容时显示对话/功能文字。
     flex 列布局:对话文字在上,需要/条件靠 margin-top:auto 固定到最底部 */
  .obv-dialog { background: #14110d; border-radius: var(--el-radius); padding: 10px 10px 4px; height: 180px;
    overflow-y: auto; font-size: 14px; line-height: 1.6; margin-bottom: 12px;
    display: flex; flex-direction: column; }
  .obv-dialog > div { margin-bottom: 2px; }
  .obv-dialog .obv-empty { color: #6a5d44; font-style: italic; }
  /* 任务面板:复用对话区,每条任务卡(标题+要求+按钮 同行 / 描述次行) */
  .obv-dialog .q-list { display: block; width: 100%; }
  .q-card { padding: 2px 6px; margin: 2px 0; background: rgba(0,0,0,.18); border-radius: var(--el-radius); }
  .q-card-top { display: flex; align-items: center; gap: 4px; line-height: 1.2; }
  .q-card-top > .q-name { flex: 0 0 auto; font-size: 13px; }
  .q-card-top .q-tag { color: #8aa86a; font-size: 13px; }   /* 状态标签 [可接]/[可交付]/[已接]/[完成]/[进行中] */
  .q-card-req { color: #c9b27a; font-size: 13px; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-card-top .q-act { margin-left: auto; flex: 0 0 auto; padding: 2px 4px; }
  .q-card-desc { color: #888; font-size: 13px; line-height: 1.25; }
  /* 交付奖励:对话区内居中列出 */
  .obv-dialog .q-reward { display: block; width: 100%; text-align: center; }
  .q-reward-title { color: #6c6; font-weight: bold; margin-bottom: 6px; }
  .q-reward-item { color: #f0c040; font-size: 14px; line-height: 1.7; }
  /* 交易态:对话区放下货架+背包,取消固定高度与 flex 列,自适应展开由弹窗整体滚动 */
  .obv-dialog.trade { height: auto; display: block; overflow: visible; }
  /* 交易态顶行:招揽语居左、铜币居右,同一行 */
  .shop-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  /* 商人招揽语 */
  .shop-pitch { color: #cdbf9c; font-style: italic; font-size: 14px; line-height: 1.5; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 铜币数:靠右、不被招揽语挤压 */
  .shop-coin { flex: 0 0 auto; color: #f0c040; font-size: 14px; }
  /* 货架格子区与上方铜币行留点间距(交易态删了货架标题后顶得太紧) */
  .obv-dialog.trade .grid.skills { margin-top: 8px; }
  /* 仓库格子区(无标题)与铜币行同样留 8px,与交易货架间距一致 */
  .obv-dialog.trade .grid.bag.stgrid { margin-top: 8px; }
  /* ===== 赌坊骰宝 ===== */
  .g-board { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  /* 两列布局:左主区(押注门/注额/按钮)+ 右注单列(占 30%),从盘面底部开始等高 */
  .g-board-2col { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
  .g-board-2col .g-main { flex: 1 1 65%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  /* 右列:stretch 到左列高度(relative 占位),注单 absolute 铺满,内容超出走内部竖向滚动而不撑高 */
  .g-board-2col .g-side { flex: 0 0 35%; min-width: 0; position: relative; }
  .g-board-2col .g-side .g-bets { position: absolute; inset: 0; max-height: none; overflow-y: auto; }
  /* 轮次倒计时条:进度条 + 历史/文案行(betting 显剩余秒,revealing 显开奖中);各为 g-board 直接子级,统一吃 8px 间距 */
  .g-cdbar-bg { height: 5px; background: #14110d; border: 1px solid #3a2f1e; border-radius: var(--bar-radius); overflow: hidden; }
  .g-cdbar { height: 100%; background: linear-gradient(90deg, #c8a24a, #e0c068); transition: width .25s linear; }
  .g-cdrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .g-countdown { text-align: right; font-size: 12px; color: #c8b890; white-space: nowrap; flex: 0 0 auto; }
  /* 全桌注单列表:每行 名字/门类/注额(+开奖后输赢);自己的高亮 */
  .g-bets { display: flex; flex-direction: column; gap: 2px; max-height: 92px; overflow-y: auto;
    background: #14110d; border: 1px solid #3a2f1e; border-radius: var(--el-radius); padding: 5px 7px; }
  .g-bets-empty { color: #6a5d44; font-size: 12px; font-style: italic; text-align: center;
    padding: 8px 7px; min-height: unset; }
  .g-betitem { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #cabfa6; }
  .g-betitem.mine { color: #f0dca0; font-weight: 700; }
  .g-betitem .g-bname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-betitem .g-bdoor { color: #b39860; }
  .g-betitem .g-bamt { min-width: 36px; text-align: right; }
  .g-betitem .g-bwin { color: #6fe07a; font-weight: 700; }
  .g-betitem .g-blose { color: #e0907a; font-weight: 700; }
  /* 骰盘:三骰居中,留出 3D 透视 */
  .g-tray { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; height: 108px;
    background: #14110d; border: 1px solid #3a2f1e; border-radius: var(--el-radius); padding: 10px 6px;
    perspective: 480px; }
  /* 3D 骰子:外层 .g-die3d 撑位 + 透视;内层 .g-cube 做旋转(translateZ 半边长=20px) */
  .g-die3d { width: 40px; height: 40px; perspective: 300px; }
  .g-cube { position: relative; width: 40px; height: 40px; transform-style: preserve-3d; }
  .g-face { position: absolute; width: 40px; height: 40px; box-sizing: border-box;
    background: linear-gradient(145deg, #f4ecd8, #d8cba8); border: 1px solid #b3a274; border-radius: var(--el-radius);
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    padding: 4px; gap: 1px; box-shadow: inset 0 0 4px rgba(0,0,0,.25); }
  .g-pip { align-self: center; justify-self: center; width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #555, #1a1208); }
  .gf-front  { transform: rotateY(0deg)    translateZ(20px); }
  .gf-back   { transform: rotateY(180deg)  translateZ(20px); }
  .gf-right  { transform: rotateY(90deg)   translateZ(20px); }
  .gf-left   { transform: rotateY(-90deg)  translateZ(20px); }
  .gf-top    { transform: rotateX(90deg)   translateZ(20px); }
  .gf-bottom { transform: rotateX(-90deg)  translateZ(20px); }
  /* 翻滚(rolling):无限匀速旋转,等服务端结果(绝不在此停,否则会停在 identity=正面值1) */
  .g-cube.rolling { animation: g-tumble 1.1s linear infinite; }
  @keyframes g-tumble {
    0%   { transform: rotateX(0)      rotateY(0);    }
    100% { transform: rotateX(360deg) rotateY(720deg); }
  }
  /* 落地(landing):多圈翻滚 + ease-out 减速,终点=该结果面定格角(--land-x/y 由 JS 按真实点数传入)。
     终点叠加 1440°/1080°(均 360 整数倍)→ 视觉等同纯 --land-x/y,即真实结果面;forwards 停住不回弹。 */
  .g-cube.landing { animation: g-land 3.5s cubic-bezier(.16,.62,.24,1) forwards; }
  @keyframes g-land {
    0%   { transform: rotateX(0) rotateY(0); }
    100% { transform: rotateX(calc(var(--land-x) + 1440deg)) rotateY(calc(var(--land-y) + 1080deg)); }
  }
  /* 定格到结果面(done 态,与 landing 终点同角,不跳变):front=1/back=6/right=3/left=4/top=2/bottom=5 */
  .g-cube.show-1 { transform: rotateX(0deg)    rotateY(0deg);   }
  .g-cube.show-6 { transform: rotateX(0deg)    rotateY(180deg); }
  .g-cube.show-3 { transform: rotateX(0deg)    rotateY(-90deg); }
  .g-cube.show-4 { transform: rotateX(0deg)    rotateY(90deg);  }
  .g-cube.show-2 { transform: rotateX(-90deg)  rotateY(0deg);   }
  .g-cube.show-5 { transform: rotateX(90deg)   rotateY(0deg);   }
  .g-cube.idle { transform: rotateX(-20deg) rotateY(28deg); opacity: .5; }
  .g-sum { font-size: 16px; color: #cdbf9c; margin-left: 6px; align-self: center; }
  /* 结果行:赢金、输灰红;无结果留空占位防跳动 */
  .g-resline { position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right;
    gap: 3px; max-width: 44%; font-size: 13px; font-weight: 700; line-height: 1.35; color: #cdbf9c; }
  .g-resline:empty { display: none; }
  .g-resmine.win { color: #6fe07a; }
  .g-resmine.lose { color: #e0907a; }
  /* 开奖历史:小芯片横排 */
  .g-hist { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-start; min-height: 18px; flex: 1 1 auto; overflow: hidden; }
  .g-hist-empty { color: #6a5d44; font-size: 12px; font-style: italic; }
  .g-hchip { font-size: 11px; padding: 1px 5px; border-radius: 50%; color: #1a1208; font-weight: 700; min-width: 22px; text-align: center; }
  .g-hchip.small { background: #5a8ac0; }
  .g-hchip.big { background: #c05a5a; }
  .g-hchip.triple { background: #e0b840; }
  /* 三门赔率按钮 */
  .g-doors { display: flex; gap: 6px; }
  .g-door { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: #221c14; border: 1px solid #5a4a2c; border-radius: var(--el-radius); padding: 6px 2px; cursor: pointer; color: #cdbf9c; }
  .g-door:hover { background: #2e2616; }
  .g-door.sel { background: #443818; border-color: #c8a850; box-shadow: 0 0 0 1px #c8a850 inset; }
  .g-dname { font-size: 17px; font-weight: 700; color: #e8dcc0; }
  .g-dhint { font-size: 11px; color: #9a8d70; }
  .g-dpay { font-size: 12px; color: #f0c040; }
  /* 注额行 */
  .g-betrow { display: flex; align-items: center; gap: 4px; }
  .g-betlbl { font-size: 13px; color: #9a8d70; flex: 0 0 auto; }
  /* 赌桌内的 .dq-step 按钮(注额行/直注押号行)统一样式:窄、不拉伸、字居中 */
  .g-betrow .dq-step, .g-stpick .dq-step {
    flex: 0 0 auto; min-width: 34px; padding: 0 6px; height: 28px; line-height: 26px;
    font-size: 13px; text-align: center; white-space: nowrap;
    background: #2a2212; color: #e0c878; border: 1px solid #5a4a2c; border-radius: var(--el-radius); cursor: pointer; }
  .g-betrow .dq-step:hover, .g-stpick .dq-step:hover { background: #3a2f1e; border-color: #8a7038; }
  .g-betrow .dq-step:active, .g-stpick .dq-step:active { background: #1f1810; }
  .g-betrow input { flex: 1; min-width: 0; background: #14110d; border: 1px solid #5a4a2c; border-radius: var(--el-radius);
    color: #e8dcc0; text-align: center; height: 28px; font-size: 14px; }
  /* 注额滑块:押注行下方,与丢弃窗滑块同款配色 */
  .g-betslider { width: 100%; margin: 0; accent-color: #c8a048; cursor: pointer; }
  .g-betslider:disabled { cursor: not-allowed; opacity: .4; }
  .g-limit { text-align: center; font-size: 11px; color: #6a5d44; }
  .action.g-roll { width: 100%; margin-top: 0; }
  /* 双下注按钮(铜币/点券)并排一行 */
  .g-rollrow { display: flex; gap: 8px; width: 100%; }
  .g-rollrow .action.g-roll { flex: 1; min-width: 0; }
  .action.g-roll.g-roll-premium { background: #1e2d3a; border-color: #3a5a7a; color: #bcd8f0; }
  .action.g-roll.g-roll-premium:hover:not(:disabled) { background: #26384a; border-color: #5a8ac0; }
  /* 赌博大厅:游戏选择卡片(图标 + 名称/简介 + 注限) */
  .g-gamelist { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .g-gamecard { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: #221c14; border: 1px solid #5a4a2c; border-radius: var(--el-radius); padding: 10px; cursor: pointer; color: #cdbf9c; }
  .g-gamecard:hover { background: #2e2616; border-color: #c8a850; }
  .g-gameic { font-size: 30px; line-height: 1; flex: 0 0 auto; }
  .g-gamemid { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .g-gamename { font-size: 15px; font-weight: normal; color: #e8dcc0; }
  .g-gameblurb { font-size: 12px; color: #9a8d70; }
  .g-gamelimit { flex: 0 0 auto; font-size: 12px; color: #f0c040; }
  /* ===== 轮盘 ===== */
  /* 号码盘:转盘(红黑相间轮缘 + 中心轴)+ 绕轨小球;出结果显带色号码球 */
  .g-roul-stage { position: relative; width: 96px; height: 96px; }
  .g-roul-wheel { position: absolute; inset: 0; border-radius: 50%;
    /* 红黑相间轮缘:18 段红黑交替(36 个 10° 扇区),中心暗色盘面 */
    background:
      radial-gradient(circle at center, #14110d 0 30%, transparent 30%),
      conic-gradient(#c0392b 0 10deg, #222018 10deg 20deg, #c0392b 20deg 30deg, #222018 30deg 40deg,
        #c0392b 40deg 50deg, #222018 50deg 60deg, #c0392b 60deg 70deg, #222018 70deg 80deg,
        #c0392b 80deg 90deg, #222018 90deg 100deg, #c0392b 100deg 110deg, #222018 110deg 120deg,
        #c0392b 120deg 130deg, #222018 130deg 140deg, #c0392b 140deg 150deg, #222018 150deg 160deg,
        #c0392b 160deg 170deg, #222018 170deg 180deg, #c0392b 180deg 190deg, #222018 190deg 200deg,
        #c0392b 200deg 210deg, #222018 210deg 220deg, #c0392b 220deg 230deg, #222018 230deg 240deg,
        #c0392b 240deg 250deg, #222018 250deg 260deg, #c0392b 260deg 270deg, #222018 270deg 280deg,
        #c0392b 280deg 290deg, #222018 290deg 300deg, #c0392b 300deg 310deg, #222018 310deg 320deg,
        #c0392b 320deg 330deg, #222018 330deg 340deg, #c0392b 340deg 350deg, #222018 350deg 360deg);
    border: 3px solid #8a6d3a; box-shadow: inset 0 0 8px rgba(0,0,0,.5); }
  .g-roul-hub { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%; background: radial-gradient(circle at 38% 38%, #d8b860, #6a4f1f); border: 2px solid #4a3713; }
  /* 绕轨小球:容器旋转带动小球绕中心转(小球本体偏置在顶部) */
  .g-roul-ballorbit { position: absolute; inset: 0; }
  .g-roul-ball { position: absolute; top: 4px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
    border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b8b0a0);
    box-shadow: 0 0 4px rgba(255,255,255,.6); }
  /* 转动:轮盘正转、小球反向快转,都无限循环(转到 done 才切号码球揭晓,故此处不减速停) */
  .g-roul-wheel.spinning { animation: g-wheelspin 2.2s linear infinite; }
  .g-roul-ballorbit.spinning { animation: g-ballspin 1.1s linear infinite; }
  @keyframes g-wheelspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  @keyframes g-ballspin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
  .g-roul-wheel.idle { opacity: .45; }
  .g-roul-ballorbit.idle { opacity: .45; }
  .g-ball { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px;
    border-radius: 50%; font-size: 40px; font-weight: 800; color: #fff; border: 3px solid #e8dcc0; }
  .g-ball.red { background: #c0392b; }
  .g-ball.black { background: #222018; }
  .g-ball.green { background: #2e8b57; }
  /* 揭晓时号码球弹入(从轮盘"停球"过渡到放大号码) */
  .g-ball.reveal { animation: g-ballpop .35s cubic-bezier(.2,1.4,.5,1); }
  @keyframes g-ballpop { 0%{ transform: scale(.3); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }
  /* 轮盘平注六门:三列两行网格(比骰宝三门窄) */
  .g-doors.g-doors-roul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  /* 历史芯片复用骰宝 .g-hchip,但轮盘用颜色类(red/black/green)显号码 */
  .g-hchip.red { background: #c0392b; color: #fff; }
  .g-hchip.black { background: #222018; color: #fff; }
  .g-hchip.green { background: #2e8b57; color: #fff; }
  /* 直注押号行:左侧"直注押号"按钮(选中高亮),右侧号码步进 */
  .g-straight { display: flex; align-items: stretch; gap: 6px; margin-top: 0; }
  .g-stbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #221c14; border: 1px solid #5a4a2c; border-radius: var(--el-radius); padding: 6px; cursor: pointer; color: #cdbf9c; font-size: 14px; }
  .g-stbtn:hover { background: #2e2616; }
  .g-stbtn.sel { background: #443818; border-color: #c8a850; box-shadow: 0 0 0 1px #c8a850 inset; color: #e8dcc0; }
  .g-stpick { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  .g-stpick input { width: 48px; background: #14110d; border: 1px solid #5a4a2c; border-radius: var(--el-radius);
    color: #e8dcc0; text-align: center; height: 28px; font-size: 14px; }
  /* 对话区内的"需要/条件"清单:固定在对话区最下方,贴近底边,无分割横线 */
  .obv-cond { display: flex; gap: 16px; margin-top: auto; flex: 0 0 auto; }
  .obv-cond > div { font-size: 13px; color: #cdbf9c; line-height: 1.2; }
  /* 人形四角空位:占格但透明、不可交互,只为撑出十字形 */
  .cell2.slot-blank { border: none; background: none; cursor: default; pointer-events: none; }
  .cell2.slot-blank:hover { border: none; background: none; }
  /* 背包:固定 10 列 × 5 行 = 50 格(10×48 + 9×2间距 = 498px 内容宽),超出可滚动 */
  .grid.bag { grid-template-columns: repeat(10, 48px); grid-auto-rows: 48px; gap: 2px;
    height: 248px; overflow-y: auto; align-content: start; }
  /* 技能格:一排 10 个,自然换行,无需像背包那样补空格占位 */
  .grid.skills { grid-template-columns: repeat(10, 48px); }
  /* 仓库格子区:固定 4 行高(4×48 + 3×2间距 = 198px),超出滚动;比背包(5行248px)矮一行,压紧到下方背包区 */
  .grid.bag.stgrid { height: 198px; }
  .cell2 { position: relative; width: 48px; height: 48px; border: 1px solid #4a4028;
    border-radius: var(--el-radius); background: #1b1710; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer; padding: 2px 2px 12px;
    transition: border-color .12s, background .12s; }
  .cell2:hover { border-color: #c0a050; background: #2a2418; }
  .cell2 .ic { font-size: 24px; line-height: 1; }
  /* 名字横条:绝对定位贴格子底边 + 半透明黑底,道具格/配置格/战斗按钮共用同一风格 */
  .cell2 .nm, .hotcell .nm, .slotbtn .sname, .cmdsq .sname {
    position: absolute; left: 0; right: 0; bottom: 0;
    font-size: 10.5px; color: #cdbf9c; text-align: center; line-height: 1.2;
    padding: 1px 2px; background: #00000066; border-radius: 0 0 var(--el-radius) var(--el-radius);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
    max-width: none; margin: 0; }
  /* 稀有度着色:白板=白,词缀=蓝。覆盖默认 nm 色,地面 chip 同理 */
  .cell2 .nm.plain, .gchip.plain { color: #c8c4bc; }
  .cell2 .nm.affixed, .gchip.affixed { color: #6bb0e0; }
  .cell2.slot { border-style: dashed; padding-bottom: 2px; }   /* 装备槽无数量条,取消底部预留使内容垂直居中 */
  .cell2.slot .slotlabel { position: absolute; left: 3px; top: 1px; font-size: 8px; color: #6a5d44; }
  .cell2.equipped { border-color: #7fb0e0; border-style: solid; background: #1c242e; }
  /* 装备槽边框 = 物品名颜色:白装白边、蓝装蓝边(道具窗与观察窗公用) */
  .cell2.equipped.plain   { border-color: #6b5f3a; }
  .cell2.equipped.affixed { border-color: #6bb0e0; }
  .cell2.emptyslot .ic { opacity: .25; }
  /* 双手武器占用副武器栏:整格压暗 + 图标置灰(grayscale),示意"被主手双手武器占用"。 */
  .cell2.offlocked { border-style: dashed; background: #181818; cursor: default; }
  .cell2.offlocked .nm { color: #6a6a6a; }
  .ic-dim { filter: grayscale(1) brightness(.6); opacity: .5; }
  .cell2.eqitem { border-color: #6b5f3a; }
  .cell2.inslot { border-color: #f0c040; box-shadow: 0 0 8px #f0c04055; }
  /* 快捷标记星号:默认左上角,候选格已入栏(inslot)移到右上角 */
  .cell2 .star { position: absolute; left: 3px; top: 1px; font-size: 11px; color: #f0c040; pointer-events: none; }
  .cell2.inslot .star { left: auto; right: 3px; top: 1px; }
  /* 快捷栏配置:顶部 5 格 */
  .hotbar { display: flex; gap: 2px; justify-content: center; margin: 4px 0 2px; }
  /* 统一快捷栏:10 格一行 48px,与背包/装备等宽对齐 */
  .hotbar10 { display: grid; grid-template-columns: repeat(10, 48px); gap: 2px;
    width: 498px; max-width: 498px; margin: 4px auto 2px; }
  .hotbar10 .hotcell { width: 48px; }
  /* 道具/技能窗快捷栏配置区:把已填充格子的边框调暗(HUD 快捷栏不受影响) */
  .hotbar10 .hotcell.filled { border-color: #6b5a30; }
  .hotcell { position: relative; width: 48px; height: 48px; border: 1px dashed #5a4a2c;
    border-radius: var(--el-radius); background: #1b1710; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer; color: #5a4a2c;
    transition: border-color .12s, background .12s; }
  .hotcell.filled { border-style: solid; border-color: #c0a050; color: #ece5d8; background: #2a2418; }
  .hotcell.filled:hover { border-color: #e06b6b; }
  .hotcell .ic { font-size: 24px; line-height: 1; }
  /* 道具/技能窗格子底部留白略减(名字横条) */
  .grid.invbag .cell2 { padding-bottom: 2px; }
  /* ===== 图标格子覆盖文字:统一风格 + 统一阴影(单一来源)=====
     所有格子(HUD .hcell / 战斗 .slotbtn .cmdsq / 配置 .hotcell / 道具 .cell2)的覆盖文字,
     阴影在容器上一处定义,子级(名字 .nm/.sname、角标 .cmk)全靠继承,值与 HUD HP/MP/EXP 一致 */
  .cell2, .hotcell, #hud .hcell, .slotbtn, .cmdsq { text-shadow: 0 1px 2px #000, 0 0 3px #000; }
  /* 角标基类:序号/数量/MP/CD/库存/价格共用同一视觉基底,位置由 .tl/.tr 控、颜色由语义类控 */
  .cmk { position: absolute; top: 1px; font-size: 11px; line-height: 1;
    font-weight: 400; pointer-events: none; }
  .cmk.tl { left: 3px; }           /* 左上:序号 / 商店价格 */
  .cmk.tr { right: 3px; }          /* 右上:数量 / MP / CD / 库存 */
  .cmk.idx  { font-size: 8px; color: #6a5d44; }
  .cmk.qty  { color: #c8c4bc; }
  .cmk.mp   { color: #6db3f2; }
  .cmk.cd   { color: #ffd98a; }
  .cmk.gold { color: #f0c040; }    /* 商店价格 */
  .cmk.stock { color: #ece5d8; }
  .cmk.stock.out { color: #e0907a; }   /* 售罄 */
  /* 图标作为背景层:所有格子(背包/商店/装备槽/候选格/快捷栏/战斗按钮)的图标容器
     绝对定位铺满格子并沉到文字下方,文字浮于其上。布局位置不变,仅改层级。
     isolation 让 z-index:-1 只相对格子自身,不会穿到格子背景之下 */
  .cell2, .hotcell, #hud .hcell, .slotbtn, .cmdsq { isolation: isolate; }
  .cell2 > .ic, .hotcell > .ic, #hud .hcell > .ic, .slotbtn > .sicon, .cmdsq > .sicon {
    position: absolute; inset: 0; z-index: -1;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; }
  /* 图标脱离文档流后,名字会独自居中上移;改为靠底,恢复原来"图标下方/底部"的位置 */
  .cell2, .hotcell, .slotbtn, .cmdsq { justify-content: flex-end; }
  /* 格子操作菜单(覆盖在窗口内) */
  .cellmenu { position: absolute; inset: 0; background: #000c; border-radius: var(--el-radius);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; z-index: 5; }
  .cellmenu h4 { color: #e0c878; font-size: 15px; margin-bottom: 2px; }
  .cellmenu .mdesc { font-size: 13px; color: #9a8d70; text-align: center; margin-bottom: 8px; }
  .cellmenu button { width: 200px; }

  /* 丢弃数量:独立小窗体(挂到 body,fixed 居中,自带遮罩,与背包大框无关) */
  #dropwin { position: fixed; inset: 0; background: #0009; z-index: 30;
    display: flex; align-items: center; justify-content: center; }
  #dropwin .dropwin-card { background: #221c14; border: 1px solid #5a4a2c; border-radius: var(--win-radius);
    padding: 14px 16px; box-shadow: 0 8px 30px #000c; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  #dropwin h4 { color: #e0c878; font-size: 15px; }
  #dropwin .dropwin-have { font-size: 13px; color: #9a8d70; }
  #dropwin .dropwin-btns { display: flex; gap: 8px; width: 100%; }
  #dropwin .dropwin-btns .action { flex: 1; width: auto; }

  /* 物品操作小窗:独立窗体(挂 body,fixed 居中,自带遮罩),与 #dropwin 统一外观 */
  #opwin { position: fixed; inset: 0; background: #0009; z-index: 30;
    display: flex; align-items: center; justify-content: center; }
  #opwin .opwin-card { background: #221c14; border: 1px solid #5a4a2c; border-radius: var(--win-radius);
    padding: 14px 16px; box-shadow: 0 8px 30px #000c; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  #opwin h4 { color: #e0c878; font-size: 15px; }
  #opwin .opwin-desc { font-size: 13px; color: #9a8d70; text-align: center; max-width: 200px; margin-bottom: 4px; }
  #opwin .action { width: 200px; }

  /* 书籍阅读窗:独立窗体(挂 body,fixed 居中,自带遮罩),与 #opwin 同源外观,正文区可滚动并保留换行 */
  #bookwin { position: fixed; inset: 0; background: #0009; z-index: 30;
    display: flex; align-items: center; justify-content: center; }
  #bookwin .bookwin-card { background: #221c14; border: 1px solid #5a4a2c; border-radius: var(--win-radius);
    padding: 14px 16px; box-shadow: 0 8px 30px #000c; display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: min(440px, 90vw); }
  #bookwin h4 { color: #e0c878; font-size: 15px; }
  #bookwin .bookwin-page { white-space: pre-wrap; word-break: break-word; line-height: 1.7;
    font-size: 14px; color: #d8cba8; text-align: left; width: 100%;
    height: calc(12 * 1.7em + 24px + 2px); overflow-y: auto; background: #1c1710; border: 1px solid #4a3d24;
    border-radius: var(--el-radius); padding: 12px 14px; }
  #bookwin .bookwin-nav { display: flex; align-items: center; gap: 12px; width: 100%; }
  #bookwin .bookwin-nav .action { flex: 1; width: auto; }
  #bookwin .bookwin-no { font-size: 13px; color: #9a8d70; min-width: 52px; text-align: center; }
  #bookwin .action:disabled { opacity: .4; cursor: default; }

  /* 数量丢弃面板:±快捷按钮行(每行4个,含最大/最小)+ 当前数量可编辑大字 + 横向 slider */
  .dropqty { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 200px; }
  .dropqty .dq-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
  .dropqty .dq-step { width: auto !important; padding: 3px 0; font-size: 13px; color: #e0c878;
    background: #2a2218; border: 1px solid #5a4a2c; border-radius: var(--el-radius); cursor: pointer; }
  .dropqty .dq-step:hover { background: #3a2f1e; border-color: #8a7038; }
  .dropqty .dq-step:active { background: #1f1810; }
  .dropqty .dq-edge { color: #f0c040; border-color: #8a7038; }
  .dropqty .dq-num { width: 80px !important; text-align: center; font-size: 20px; font-weight: bold;
    color: #f0c040; line-height: 1; background: #1f1810; border: 1px solid #5a4a2c; border-radius: var(--el-radius); padding: 3px 0;
    -moz-appearance: textfield; appearance: textfield; }
  .dropqty .dq-num::-webkit-outer-spin-button,
  .dropqty .dq-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .dropqty .dq-slider { width: 100%; accent-color: #c8a048; cursor: pointer; }

  #g-bet { -moz-appearance: textfield; appearance: textfield; }
  #g-bet::-webkit-outer-spin-button,
  #g-bet::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* ===== 角色状态窗 ===== */
  .statwin { color: #ece5d8; }
  .stat-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin-bottom: 14px;
    background: linear-gradient(135deg, #241d2e, #1b1610); border: 1px solid #5a4a2c; border-radius: var(--el-radius); }
  /* 上半部:头像 + 右列(名字/三条 bar),横向并排 */
  .stat-head-top { display: flex; align-items: stretch; gap: 14px; }
  /* 头像照搬 HUD:72px 暗框 + 右上角 Lv.X 金色药丸角标 + 做旧滤镜 */
  .stat-avatar { position: relative; width: var(--stat-avatar-sz); height: var(--stat-avatar-sz); flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0px;
    font-size: 40px; line-height: 1;
    background: #14110d; border: 1px solid #4a3d24; border-radius: var(--el-radius);
    filter: drop-shadow(0 3px 5px #000a) saturate(.75) brightness(.85); opacity: .9; }
  .stat-avatar .lvbadge {
    background: linear-gradient(135deg, #c9b478, #9a7028); color: #2a2012; font-weight: 700;
    font-size: 12px; padding: 1px 8px; border-radius: var(--el-radius); border: 1px solid #2a2012;
    box-shadow: 0 2px 4px #0008; white-space: nowrap; }
  /* 右列:锁定与头像同高(随头像尺寸变量),名字行在上、HP/MP/SP 三条贴底 */
  .stat-head .who { flex: 1; min-width: 0; height: var(--stat-avatar-sz); display: flex; flex-direction: column; justify-content: space-between; }
  /* 名字行照搬 HUD:左金色名字,右古铜色金币 */
  .stat-head .who .nm { font-size: 13px; font-weight: 700; color: #c9a44c; letter-spacing: 1px;
    text-shadow: 0 1px 2px #000; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .stat-head .who .nm .nmwrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .stat-head .who .nm .sex { color: #9a8d70; font-weight: 400; letter-spacing: 0; font-size: 12px; }
  .stat-head .who .nm .copper { color: #c87f4a; font-weight: 700; letter-spacing: 0;
    filter: saturate(.8) brightness(.9); opacity: .88; flex: 0 0 auto; }
  /* 三条资源进度条:照搬 HUD(暗调做旧渐变 + 值嵌条内左对齐) */
  .stat-bars { display: flex; flex-direction: column; gap: 3px; }
  .stat-bar { display: flex; align-items: center; font-size: 13px; }
  .stat-bar .track { flex: 1; height: var(--vbar-track-h); background: #2a2418; border: 1px solid #3a3020;
    border-radius: var(--bar-radius); overflow: hidden; position: relative; }
  .stat-bar .track > i { display: block; height: var(--vbar-fill-h); border-radius: var(--bar-radius) 0 0 var(--bar-radius); transition: width .35s; }
  .stat-bar .track .v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start;
    padding-left: 8px; font-size: 11px; color: #c8bfac; text-shadow: 0 1px 2px #000, 0 0 3px #000;
    pointer-events: none; font-weight: bold; }
  .stat-bar.hp i { background: linear-gradient(90deg, #732820, #897028); }
  .stat-bar.mp i { background: linear-gradient(90deg, #1e3354, #2c5076); }
  .stat-bar.xp i { background: linear-gradient(90deg, #946018, #a07e2c); }
  /* 属性卡片网格 */
  .stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
  .stat-card { background: #1b1710; border: 1px solid #4a4028; border-radius: var(--el-radius);
    padding: 8px 10px; text-align: center; }
  .stat-card .k { font-size: 13px; color: #8a7d60; }
  .stat-card .v { font-size: 19px; color: #e0c878; font-weight: 600; }
  .stat-card .b { font-size: 13px; color: #6bd17a; min-height: 13px; }
  .stat-card .hint { font-size: 13px; color: #6a5d44; min-height: 13px; }
  /* 加点草稿:数值上的绿色增量提示 */
  .stat-card .v .up { font-size: 13px; color: #6bd17a; margin-left: 3px; vertical-align: middle; }
  /* 加/减点按钮:与数值同一水平排 [-] 19 [+] */
  .stat-card .addrow { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 4px; }
  .stat-card .addrow .v { flex: 1 1 auto; }
  .stat-card .stepbtn { flex: 0 0 auto; width: 28px; height: 28px; line-height: 26px; padding: 0;
    text-align: center; border-radius: var(--el-radius); border: 1px solid #5a4a2c; background: #332b1c;
    color: #e0c878; font-size: 18px; cursor: pointer; }
  .stat-card .stepbtn:hover { border-color: #c0a050; background: #43381f; }
  .stat-card .stepbtn:disabled { opacity: .3; cursor: not-allowed; }
  .sp-head { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
  .sp-head .sp-actions { position: absolute; right: 0; }
  .sp-head .pts { font-size: 13px; color: #f0c040; }
  .sp-head .resetbtn { font-size: 13px; padding: 7px 18px; border-radius: var(--el-radius); margin-left: 6px;
    border: 1px solid #5a4a2c; background: #2a2418; color: #cdbf9c; cursor: pointer; }
  .sp-head .resetbtn:hover { border-color: #c0a050; }
  /* ===== 背包↔快捷栏拖拽 ===== */
  /* 拖动时浏览器会以按下点为锚启动文本选区,把格子里的名字刷成蓝色;锚点格子设为不可选即根除
     (选区锚点在格子上,锚点不可选则拖动经过别处也不会产生选区,无需全局禁用、不误伤聊天框复制) */
  .cell2, .hotcell, .hcell { -webkit-user-select: none; user-select: none; }
  /* 跟手幽灵图标:挂 body、fixed、不挡命中检测(pointer-events:none) */
  .drag-ghost { position: fixed; transform: translate(-50%, -50%); z-index: 9999;
    pointer-events: none; opacity: .85; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #c0a050; border-radius: var(--el-radius); background: #2a2418; }
  .drag-ghost .ic { font-size: 24px; line-height: 1; }
  /* 落点高亮:金色描边 + 微亮底,套用于背包格/空格/快捷栏格(配置窗 .hotcell 与 HUD .hcell) */
  .cell2.drop-hover, .hotcell.drop-hover, .hcell.drop-hover { border-color: #f0c040 !important; background: #3a3018 !important; }
  /* 仓库拖拽:整个目标区域(仓库格区/背包格区)描金边高亮,提示"松手放这里" */
  .grid.bag.drop-zone { outline: 2px dashed #f0c040; outline-offset: -2px; border-radius: var(--el-radius); }