/* ═══ 全局重置 ═══ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none}
body{background:#0a0a12;display:flex;align-items:center;justify-content:center;height:100vh;overflow:hidden;font-family:'Microsoft YaHei',sans-serif;user-select:none;-webkit-user-select:none}
canvas{display:block;image-rendering:pixelated}

/* ═══ 操作提示栏 ═══ */
#ui{
  position:fixed;bottom:68px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.55);
  color:#8899aa;
  padding:5px 20px;
  border-radius:20px;
  font-size:11px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,0.05);
  letter-spacing:0.5px;
  backdrop-filter:blur(4px);
  white-space:nowrap;
}

/* ═══ 左上角状态信息 ═══ */
#info{
  position:fixed;top:14px;left:14px;
  color:#9aacbe;
  font-size:11.5px;
  pointer-events:none;
  line-height:2;
  background:rgba(0,0,0,0.45);
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
  min-width:160px;
}
#info > div{display:flex;align-items:center;gap:4px}
#info > div::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:rgba(200,160,60,0.5);flex-shrink:0}
#pos{color:#e8c060;font-weight:bold}
#dungeon-info{color:#ffcc44!important}

/* ═══ 主菜单 ═══ */
#home-screen{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 60%, rgba(20,14,8,1) 0%, rgba(4,4,10,1) 100%);
  z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  overflow:hidden;
}

/* 背景粒子画布 */
#home-screen canvas.home-bg{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}

/* 顶部装饰线 */
#home-screen::before{
  content:'';
  position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,160,60,0.4),transparent);
}
#home-screen::after{
  content:'';
  position:absolute;bottom:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,160,60,0.25),transparent);
}

/* 主标题 */
.home-logo{position:relative;text-align:center;z-index:1}
.home-logo h1{
  color:#e8c060;
  font-size:48px;
  letter-spacing:10px;
  text-shadow:0 0 20px rgba(232,192,96,0.6),0 0 60px rgba(200,140,40,0.3),0 2px 4px rgba(0,0,0,0.8);
  animation:titleGlow 3s ease-in-out infinite alternate;
  position:relative;
}
@keyframes titleGlow{
  from{text-shadow:0 0 20px rgba(232,192,96,0.5),0 0 50px rgba(200,140,40,0.2),0 2px 4px rgba(0,0,0,0.8)}
  to{text-shadow:0 0 30px rgba(232,192,96,0.9),0 0 80px rgba(220,160,60,0.5),0 0 120px rgba(200,120,30,0.2),0 2px 4px rgba(0,0,0,0.8)}
}

/* 副标题装饰 */
.home-tagline{
  display:flex;align-items:center;gap:12px;
  color:#6e5a3a;font-size:12px;letter-spacing:4px;margin-top:6px;
  position:relative;z-index:1;
}
.home-tagline::before,.home-tagline::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,160,60,0.3));
}
.home-tagline::after{background:linear-gradient(270deg,transparent,rgba(200,160,60,0.3))}

/* 版本徽标 */
.home-version{
  color:#3a3020;font-size:10px;letter-spacing:2px;margin-top:2px;
  position:relative;z-index:1;
}

/* 按钮区 */
.home-btns{
  display:flex;flex-direction:column;gap:12px;margin-top:8px;
  position:relative;z-index:1;
}
.home-btn{
  background:rgba(22,18,12,0.9);
  border:1px solid rgba(200,160,60,0.25);
  border-radius:14px;
  padding:16px 64px;
  color:#d4a840;
  font-size:17px;
  font-family:'Microsoft YaHei',sans-serif;
  cursor:pointer;
  transition:all 0.28s cubic-bezier(0.34,1.56,0.64,1);
  letter-spacing:4px;
  text-align:center;
  min-width:240px;
  position:relative;
  overflow:hidden;
}
/* 按钮内光 */
.home-btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(200,160,60,0.08) 0%,transparent 60%);
  opacity:0;transition:opacity 0.3s;
}
.home-btn:hover::before{opacity:1}
.home-btn::after{
  content:'';
  position:absolute;left:-100%;top:0;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,220,100,0.08),transparent);
  transition:left 0.5s ease;
}
.home-btn:hover::after{left:140%}
.home-btn:hover{
  border-color:rgba(232,192,96,0.7);
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 8px 32px rgba(200,160,60,0.25),0 0 0 1px rgba(200,160,60,0.1);
  color:#f0d060;
}
.home-btn:active{transform:translateY(-1px) scale(1.01)}
.home-btn .btn-icon{font-size:20px;margin-right:8px;display:inline-block;vertical-align:middle}
.home-btn .btn-sub{
  color:#6e5a3a;font-size:10.5px;margin-top:5px;letter-spacing:1.5px;
  display:block;
}
.home-btn:hover .btn-sub{color:#9a8050}

/* 底部装饰 */
.home-footer{
  position:absolute;bottom:20px;
  color:#2a2018;font-size:10px;letter-spacing:2px;
  z-index:1;
}

/* ═══ 登录界面 ═══ */
#login-screen{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(20,14,8,0.99) 0%, rgba(4,4,10,1) 100%);
  z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  font-family:'Microsoft YaHei',sans-serif;
}
#login-screen h1{
  color:#e8c060;font-size:30px;
  text-shadow:0 0 30px rgba(200,160,60,0.5);
  letter-spacing:5px;
}
#login-screen .sub{color:#6e5a3a;font-size:12px;letter-spacing:3px;margin-top:-4px}
#login-input-row{
  display:flex;gap:10px;align-items:center;
}
#login-input-row input{
  background:rgba(18,14,10,0.95);
  border:1px solid rgba(200,160,60,0.35);
  border-radius:10px;
  padding:12px 18px;
  color:#e0d0b0;
  font-size:15px;
  font-family:'Microsoft YaHei',sans-serif;
  width:200px;
  outline:none;
  letter-spacing:2px;
  transition:border-color 0.3s;
}
#login-input-row input::placeholder{color:#4a3a2a}
#login-input-row input:focus{border-color:rgba(200,160,60,0.7)}
.login-btn{
  background:rgba(30,24,16,0.95);
  border:1px solid rgba(200,160,60,0.35);
  border-radius:10px;
  padding:12px 22px;
  color:#d4a840;
  font-size:14px;
  font-family:'Microsoft YaHei',sans-serif;
  cursor:pointer;
  letter-spacing:3px;
  transition:all 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.login-btn:hover{
  border-color:rgba(200,160,60,0.7);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(200,160,60,0.2);
}
#login-msg{color:#aa5544;font-size:11px;min-height:18px;letter-spacing:1px}
#login-hint{color:#3a3020;font-size:10px;margin-top:8px;letter-spacing:1px}

/* 已有账号列表 */
#login-accounts{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:4px;max-width:400px;
}
.login-acc-card{
  background:rgba(22,18,12,0.9);
  border:1px solid rgba(200,160,60,0.15);
  border-radius:10px;
  padding:8px 16px;
  color:#c8a050;
  font-size:13px;
  cursor:pointer;
  letter-spacing:2px;
  transition:all 0.25s;
}
.login-acc-card:hover{
  border-color:rgba(200,160,60,0.5);
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(200,160,60,0.15);
}
.login-acc-card .acc-del{
  color:#664433;font-size:10px;margin-left:8px;cursor:pointer;
}
.login-acc-card .acc-del:hover{color:#cc5544}

/* 首页用户信息栏 */
#home-user-bar{
  position:absolute;top:14px;right:20px;
  display:flex;align-items:center;gap:10px;
  z-index:1;font-family:'Microsoft YaHei',sans-serif;
}
#home-username{
  color:#c8a050;font-size:12px;letter-spacing:1px;
}
#home-logout{
  color:#553322;font-size:10px;cursor:pointer;
  padding:4px 10px;border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;transition:all 0.2s;
}
#home-logout:hover{color:#cc6644;border-color:rgba(200,80,60,0.3)}

/* ═══ 角色选择 ═══ */
#char-select{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(20,14,8,0.98) 0%, rgba(4,4,10,0.99) 100%);
  z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
#char-select h1{
  color:#e8c060;font-size:32px;
  text-shadow:0 0 30px rgba(200,160,60,0.5);
  letter-spacing:6px;
}
#char-select .sub{
  color:#6e5a3a;font-size:12px;letter-spacing:3px;
  border-bottom:1px solid rgba(200,160,60,0.15);
  padding-bottom:8px;
  margin-top:-4px;
}
#char-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:880px;padding:0 20px}
.ch{
  background:linear-gradient(160deg,rgba(30,24,16,0.95),rgba(18,14,10,0.95));
  border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;padding:10px;text-align:center;cursor:pointer;
  transition:all 0.28s cubic-bezier(0.34,1.56,0.64,1);width:110px;
  position:relative;overflow:hidden;
}
.ch::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(200,160,60,0.06),transparent 60%);
  opacity:0;transition:opacity 0.3s;
}
.ch:hover::before{opacity:1}
.ch:hover{
  border-color:rgba(200,160,60,0.55);
  transform:translateY(-6px);
  box-shadow:0 8px 28px rgba(200,160,60,0.2),0 0 0 1px rgba(200,160,60,0.08);
}
.ch canvas{display:block;margin:0 auto 7px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.ch .cn{color:#e0d0b0;font-size:12.5px;font-weight:bold}
.ch .cjob{color:#c8a050;font-size:10px;margin-top:2px;letter-spacing:0.5px}
.ch .cd{color:#776655;font-size:9px;margin-top:4px;line-height:1.5}

/* ═══ 信息面板 ═══ */
#panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:100;width:540px;height:82vh;
  background:rgba(10,8,18,0.97);
  border:1px solid rgba(200,160,60,0.22);
  border-radius:16px;
  display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 12px 60px rgba(0,0,0,0.8),0 0 0 1px rgba(200,160,60,0.05);
  backdrop-filter:blur(12px);
}
#panel.show{display:flex;animation:panelIn 0.2s ease-out}
@keyframes panelIn{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}

#panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
  border-bottom:1px solid rgba(200,160,60,0.1);
  flex-shrink:0;
  background:linear-gradient(90deg,rgba(200,160,60,0.04),transparent);
}
#panel-hdr h2{color:#d4a840;font-size:15px;font-weight:bold;letter-spacing:1px}
#panel-close{
  background:none;border:1px solid rgba(255,255,255,0.1);color:#887766;
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.18s;
}
#panel-close:hover{border-color:rgba(200,160,60,0.5);color:#e8c060;background:rgba(200,160,60,0.06)}

#panel-tabs{
  display:flex;border-bottom:1px solid rgba(255,255,255,0.05);
  flex-shrink:0;padding:0 4px;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
}
#panel-tabs::-webkit-scrollbar{display:none}

.ptab{
  flex:1;min-width:52px;padding:9px 4px;text-align:center;
  color:#665544;font-size:10.5px;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all 0.2s;border-radius:6px 6px 0 0;
  white-space:nowrap;
}
.ptab:hover{color:#c8a050;background:rgba(200,160,60,0.05)}
.ptab.active{
  color:#e8c060;
  border-bottom-color:#c8a050;
  background:rgba(200,160,60,0.08);
  font-weight:bold;
}

#panel-body{
  padding:16px 18px;overflow-y:auto;flex:1;min-height:200px;
  color:#ccc;font-size:12px;line-height:1.75;
}
#panel-body::-webkit-scrollbar{width:4px}
#panel-body::-webkit-scrollbar-thumb{background:rgba(200,160,60,0.18);border-radius:2px}
#panel-body::-webkit-scrollbar-track{background:transparent}

/* 面板内部元素 */
.pstat-row{display:flex;align-items:center;margin-bottom:7px;gap:10px}
.pstat-label{width:64px;color:#7a6655;text-align:right;flex-shrink:0;font-size:11px}
.pstat-bar{flex:1;height:14px;background:rgba(255,255,255,0.05);border-radius:7px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.03)}
.pstat-fill{height:100%;border-radius:7px;transition:width 0.35s ease}
.pstat-val{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.9);font-weight:bold}

.pattr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.pattr-card{
  background:linear-gradient(135deg,rgba(200,160,60,0.07),rgba(200,160,60,0.03));
  border:1px solid rgba(200,160,60,0.18);
  border-radius:10px;padding:12px 14px;text-align:center;
}
.pattr-card .pval{font-size:22px;font-weight:bold;color:#e8c060}
.pattr-card .plbl{font-size:11px;color:#8a8070;font-weight:bold;margin-top:3px}

.psection-title{
  color:#c8a050;font-size:12.5px;font-weight:bold;
  margin:16px 0 9px;padding-bottom:5px;
  border-bottom:1px solid rgba(200,160,60,0.1);
  display:flex;align-items:center;gap:6px;
}
.psection-title::before{content:'';display:block;width:3px;height:14px;background:#c8a050;border-radius:2px}

.pskill{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:rgba(255,255,255,0.025);
  border-radius:10px;margin-bottom:6px;
  border-left:3px solid rgba(200,160,60,0.2);
  transition:background 0.18s;
}
.pskill:hover{background:rgba(255,255,255,0.04)}
.pskill.locked{opacity:0.4;filter:grayscale(0.6)}
.pskill.stafflock{opacity:0.6;border-left-color:rgba(220,100,100,0.35)}
.pskill .skicon{font-size:22px;width:32px;text-align:center}
.pskill .skinfo{flex:1}
.pskill .skname{color:#e0d0b0;font-weight:bold;font-size:12px}
.pskill .skdesc{color:#665544;font-size:10px;margin-top:2px}
.pskill .skreq{color:#554433;font-size:10px}

.pbag-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:rgba(255,255,255,0.025);
  border-radius:10px;margin-bottom:5px;
  border:1px solid rgba(255,255,255,0.03);
  transition:background 0.18s;
}
.pbag-item:hover{background:rgba(255,255,255,0.04)}
.pbag-item .biicon{font-size:20px;width:28px;text-align:center}
.pbag-item .biinfo{flex:1}
.pbag-item .biname{color:#e0d0b0;font-size:12px}
.pbag-item .bidesc{color:#665544;font-size:10px;margin-top:1px}
.pbag-item .bicount{color:#e8c060;font-weight:bold;font-size:13px;min-width:30px;text-align:right}

.pally{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:rgba(255,255,255,0.025);
  border-radius:10px;margin-bottom:6px;
  border:1px solid rgba(255,255,255,0.03);
}
.pally .ally-icon{font-size:22px}
.pally .ally-info{flex:1}
.pally .ally-name{color:#e0d0b0;font-weight:bold;font-size:12px}
.pally .ally-stats{color:#7a6655;font-size:10px;margin-top:1px}

/* ═══ 底部HUD ═══ */
#hud{
  position:fixed;bottom:10px;left:50%;transform:translateX(-50%);
  display:none;align-items:center;gap:14px;z-index:50;
  background:rgba(6,4,12,0.82);
  padding:8px 18px;
  border-radius:40px;
  border:1px solid rgba(255,255,255,0.07);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
}
#hud.show{display:flex}

/* HUD 血条 */
.hud-bar-wrap{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.hud-bar-label{font-size:9px;color:#556;letter-spacing:0.5px;font-weight:bold;display:flex;align-items:center;gap:3px}
.hud-bar{width:130px;height:10px;background:rgba(255,255,255,0.07);border-radius:5px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.04)}
.hud-fill{height:100%;border-radius:5px;transition:width 0.35s ease}
.hud-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.9);font-weight:bold;pointer-events:none;letter-spacing:0.3px}

/* 余烬显示 */
.hud-ember{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:2px 8px;
  border-left:1px solid rgba(255,255,255,0.06);
}
.hud-ember-val{color:#e8c060;font-size:13px;font-weight:bold;line-height:1}
.hud-ember-lbl{color:#7a6030;font-size:8.5px;letter-spacing:0.5px}

/* HUD 分割线 */
.hud-divider{width:1px;height:32px;background:rgba(255,255,255,0.06);flex-shrink:0}

/* ═══ 死亡结算界面 ═══ */
#death-screen{
  position:fixed;inset:0;background:rgba(0,0,0,0);z-index:500;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  transition:background 1.2s;
  overflow-y:auto;
  padding:16px 0;
}
#death-screen.show{display:flex;background:rgba(0,0,0,0.9)}
#death-box{
  background:linear-gradient(160deg,rgba(16,6,6,0.98),rgba(10,4,4,0.98));
  border:1px solid rgba(180,40,40,0.45);
  border-radius:18px;padding:30px 38px;
  min-width:490px;max-width:570px;
  color:#ccc;font-family:'Microsoft YaHei',sans-serif;
  box-shadow:0 12px 80px rgba(180,20,20,0.25),0 0 0 1px rgba(180,40,40,0.1);
  animation:deathBoxIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink:0;
}
@keyframes deathBoxIn{from{transform:scale(0.88) translateY(24px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
#death-title{
  color:#cc2222;font-size:30px;font-weight:bold;
  text-align:center;letter-spacing:8px;margin-bottom:4px;
  text-shadow:0 0 40px rgba(200,30,30,0.7),0 0 80px rgba(180,20,20,0.3);
}
#death-sub{color:#553333;font-size:11.5px;text-align:center;margin-bottom:22px;letter-spacing:2px}
#death-ember-bar{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:24px;padding:14px 20px;
  background:rgba(200,160,60,0.05);
  border-radius:12px;border:1px solid rgba(200,160,60,0.12);
}
#death-ember-icon{font-size:30px}
#death-ember-count{color:#e8c860;font-size:28px;font-weight:bold}
#death-ember-label{color:#7a6a34;font-size:11px;margin-top:2px}
.death-section-title{
  color:#9a5533;font-size:10.5px;font-weight:bold;letter-spacing:2px;
  margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.05);padding-bottom:5px;
}
#death-exp-area{margin-bottom:18px}
.death-exp-option{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:rgba(40,60,120,0.12);border:1px solid rgba(80,120,200,0.18);
  border-radius:10px;margin-bottom:6px;cursor:pointer;transition:all 0.18s;
}
.death-exp-option:hover{border-color:rgba(80,160,255,0.5);background:rgba(40,80,160,0.22)}
.death-exp-option.selected{border-color:rgba(80,200,255,0.7);background:rgba(30,80,160,0.32)}
.death-exp-option.used{opacity:0.35;pointer-events:none}
.deo-icon{font-size:18px;width:24px;text-align:center}
.deo-desc{flex:1;font-size:11px;color:#99aacc}
.deo-cost{color:#e8c860;font-size:11px;font-weight:bold;white-space:nowrap}
#death-shop-area{margin-bottom:18px}
.death-shop-item{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:rgba(40,80,40,0.1);border:1px solid rgba(80,160,80,0.18);
  border-radius:10px;margin-bottom:6px;cursor:pointer;transition:all 0.18s;
}
.death-shop-item:hover{border-color:rgba(80,220,80,0.5);background:rgba(40,120,40,0.22)}
.death-shop-item.disabled{opacity:0.3;pointer-events:none}
.dsi-icon{font-size:18px;width:24px;text-align:center}
.dsi-info{flex:1}
.dsi-name{color:#88ee88;font-size:12px;font-weight:bold}
.dsi-desc{color:#558855;font-size:10px;margin-top:1px}
.dsi-cost{color:#e8c860;font-size:11px;font-weight:bold;white-space:nowrap}
#death-btn-row{display:flex;gap:14px;justify-content:center;margin-top:8px}
.death-btn{
  padding:12px 38px;border-radius:12px;
  font-size:14px;font-family:'Microsoft YaHei',sans-serif;font-weight:bold;
  cursor:pointer;letter-spacing:2px;transition:all 0.22s;border:1px solid transparent;
}
#death-btn-rebirth{
  background:linear-gradient(135deg,rgba(160,28,28,0.9),rgba(120,20,20,0.9));
  border-color:rgba(220,60,60,0.5);color:#ffaaaa;
}
#death-btn-rebirth:hover{
  background:linear-gradient(135deg,rgba(200,38,38,0.95),rgba(160,28,28,0.95));
  border-color:#ee4444;transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(200,40,40,0.35);
}
#death-ember-remain{text-align:center;color:#553333;font-size:10.5px;margin-top:12px}
#chat-log{
  max-height:140px;overflow-y:auto;
  display:flex;flex-direction:column;gap:3px;
  padding:4px 0;pointer-events:none;
  scrollbar-width:thin;scrollbar-color:rgba(200,160,60,0.3) transparent;
}
#chat-input-row{
  display:flex;gap:6px;pointer-events:all;
}
#chat-input{
  flex:1;height:34px;padding:0 12px;
  background:rgba(12,10,18,0.85);border:1px solid rgba(200,160,60,0.25);
  border-radius:10px;color:#ddd;font-size:13px;outline:none;
  font-family:'Microsoft YaHei',sans-serif;
}
#chat-input:focus{border-color:rgba(200,160,60,0.6)}
#chat-input::placeholder{color:#554}
#chat-send{
  width:50px;height:34px;border-radius:10px;
  background:rgba(30,25,18,0.9);border:1px solid rgba(200,160,60,0.3);
  color:#d4a840;font-size:13px;cursor:pointer;
  font-family:'Microsoft YaHei',sans-serif;
  transition:all 0.15s;
}
#chat-send:hover{background:rgba(50,40,25,0.95);border-color:rgba(200,160,60,0.6)}
#chat-send:active{transform:scale(0.95)}

/* 手机端聊天框适配 */
@media (max-width: 768px) {
  #chat-box{bottom:180px;width:90vw}
  #chat-input{height:38px;font-size:15px}
  #chat-send{width:54px;height:38px;font-size:15px}
  .chat-msg{font-size:13px}
}

/* ═══════════════════════════════════════════
   Bug反馈按钮（v18.1）
═══════════════════════════════════════════ */
#bug-btn{
  position:fixed;bottom:16px;left:16px;z-index:55;
  width:44px;height:44px;border-radius:50%;
  background:rgba(30,25,20,0.85);border:1px solid rgba(200,160,60,0.25);
  color:#a08040;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;backdrop-filter:blur(4px);
}
#bug-btn:hover{background:rgba(50,40,30,0.95);border-color:rgba(200,160,60,0.5);transform:scale(1.08)}
#bug-btn .bug-tip{
  position:absolute;bottom:52px;left:50%;transform:translateX(-50%);
  background:rgba(8,8,20,0.95);color:#bba880;font-size:11px;
  padding:4px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity 0.2s;
  border:1px solid rgba(200,160,60,0.2);
}
#bug-btn:hover .bug-tip{opacity:1}
#bug-modal{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.7);
  align-items:center;justify-content:center;
}
#bug-modal.show{display:flex}
#bug-box{
  background:rgba(14,12,18,0.98);border:1px solid rgba(200,160,60,0.3);
  border-radius:14px;padding:24px 28px;width:min(420px,92vw);
  color:#ccc;font-size:13px;
}
#bug-box h3{color:#e8c060;font-size:16px;margin-bottom:12px;text-align:center}
#bug-box textarea{
  width:100%;height:100px;resize:vertical;
  background:rgba(20,18,28,0.9);border:1px solid rgba(200,160,60,0.2);
  border-radius:8px;padding:10px;color:#ddd;font-size:13px;
  font-family:'Microsoft YaHei',sans-serif;
}
#bug-box textarea:focus{outline:none;border-color:rgba(200,160,60,0.5)}
#bug-box textarea::placeholder{color:#665}
#bug-actions{display:flex;gap:10px;margin-top:14px;justify-content:center}
#bug-actions button{
  padding:8px 24px;border-radius:8px;border:1px solid rgba(200,160,60,0.3);
  background:rgba(30,25,18,0.9);color:#d4a840;font-size:13px;cursor:pointer;
  font-family:'Microsoft YaHei',sans-serif;transition:all 0.2s;
}
#bug-actions button:hover{background:rgba(50,40,25,0.95);border-color:rgba(200,160,60,0.5)}
#bug-submit-btn{border-color:rgba(80,200,120,0.4)!important;color:#88ddaa!important}
#bug-submit-btn:hover{border-color:rgba(80,200,120,0.7)!important}
#bug-cancel-btn:hover{border-color:rgba(200,80,60,0.5)!important;color:#cc8866!important}

/* ═══════════════════════════════════════════
   开发者图片（v18.1）
═══════════════════════════════════════════ */
#dev-avatar{
  position:absolute;bottom:20px;right:20px;z-index:2;
  width:64px;height:64px;border-radius:50%;
  border:2px solid rgba(200,160,60,0.35);
  object-fit:cover;cursor:pointer;
  transition:all 0.3s;opacity:0.7;
  box-shadow:0 2px 12px rgba(0,0,0,0.5);
}
#dev-avatar:hover{opacity:1;transform:scale(1.12);border-color:rgba(200,160,60,0.7)}
#dev-avatar-label{
  position:absolute;bottom:88px;right:20px;z-index:2;
  color:#665a48;font-size:10px;letter-spacing:1px;text-align:right;
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}

/* ═══════════════════════════════════════════
   打赏区域（v18.2）
═══════════════════════════════════════════ */
#donate-area{
  position:absolute;left:20px;bottom:20px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;
}
#donate-qr{
  width:72px;height:72px;border-radius:10px;
  border:2px solid rgba(200,160,60,0.35);
  object-fit:cover;opacity:0.75;
  transition:all 0.3s;
  box-shadow:0 2px 12px rgba(0,0,0,0.5);
}
#donate-area:hover #donate-qr{opacity:1;border-color:rgba(200,160,60,0.7);transform:scale(1.05)}
#donate-tip{
  font-size:9px;color:#776655;line-height:1.5;text-align:center;
  transition:color 0.3s;max-width:120px;
}
#donate-area:hover #donate-tip{color:#aa9966}
/* 打赏码放大弹窗 */
#donate-modal{
  display:none;position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;cursor:pointer;
}
#donate-modal.show{display:flex}
#donate-modal-box{
  background:rgba(10,8,20,0.97);border:1px solid rgba(200,160,60,0.4);
  border-radius:16px;padding:24px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.7);cursor:default;
  max-width:90vw;
}
#donate-modal-box .dm-title{color:#ccaa66;font-size:13px;font-weight:bold;margin-bottom:14px;letter-spacing:1px}
#donate-modal-box .dm-qr{width:220px;height:220px;border-radius:12px;
  border:2px solid rgba(200,160,60,0.5);object-fit:cover;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);}
#donate-modal-box .dm-tip{font-size:10px;color:#887766;margin-top:12px;line-height:1.7}
#donate-modal-box .dm-close{
  display:inline-block;margin-top:14px;padding:6px 20px;
  border:1px solid rgba(200,160,60,0.3);border-radius:8px;
  color:#776;font-size:11px;cursor:pointer;transition:all 0.2s;
}
#donate-modal-box .dm-close:hover{border-color:rgba(200,160,60,0.6);color:#aa9966}
/* 联系方式弹窗 */
#contact-modal{
  display:none;position:fixed;inset:0;z-index:600;
  background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
#contact-modal.show{display:flex}
#contact-box{
  background:rgba(10,8,20,0.97);border:1px solid rgba(200,160,60,0.4);
  border-radius:16px;padding:28px 32px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,0.7);min-width:220px;
}
#contact-box .c-title{color:#ccaa66;font-size:14px;font-weight:bold;margin-bottom:16px;letter-spacing:1px}
#contact-box .c-avatar{width:80px;height:80px;border-radius:50%;border:2px solid rgba(200,160,60,0.4);object-fit:cover;margin-bottom:12px}
#contact-box .c-wm{color:#88ccff;font-size:16px;font-weight:bold;letter-spacing:2px;margin-bottom:6px}
#contact-box .c-wm-label{color:#665;font-size:10px;margin-bottom:18px}
#contact-box .c-close{
  display:inline-block;padding:6px 20px;border:1px solid rgba(200,160,60,0.3);
  border-radius:8px;color:#776;font-size:11px;cursor:pointer;
  transition:all 0.2s;
}
#contact-box .c-close:hover{border-color:rgba(200,160,60,0.7);color:#ccaa66}
#dev-avatar:hover~#dev-avatar-label{opacity:1}

/* ═══════════════════════════════════════════
   横屏提示（v18.1）
═══════════════════════════════════════════ */
#rotate-hint{
  display:none; /* 默认隐藏，由JS/面板开关控制 */
  position:fixed;inset:0;z-index:9999;
  background:rgba(4,4,10,0.97);
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  color:#e8c060;font-size:16px;
}
#rotate-hint .rotate-icon{
  width:64px;height:64px;
  border:3px solid rgba(200,160,60,0.5);
  border-radius:12px;
  animation:rotateAnim 2s ease-in-out infinite;
  font-size:32px;
  display:flex;align-items:center;justify-content:center;
}
@keyframes rotateAnim{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(-90deg)}
  50%{transform:rotate(-90deg)}
  75%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
/* 横屏提示由用户在面板概览中手动控制 */

/* ═══════════════════════════════════════════
   手机端虚拟摇杆 & 操作按钮（第十八阶段）
═══════════════════════════════════════════ */
#mobile-controls{
  display:none;
  position:fixed;inset:0;pointer-events:none;z-index:60;
}
/* 左侧摇杆区域 */
#joystick-zone{
  position:absolute;bottom:30px;left:24px;
  width:130px;height:130px;
  pointer-events:all;
  touch-action:none;
}
#joystick-base{
  position:absolute;inset:0;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:2px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(4px);
}
#joystick-stick{
  position:absolute;
  width:54px;height:54px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 36%, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border:2px solid rgba(255,255,255,0.22);
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  transition:box-shadow 0.1s;
  box-shadow:0 2px 10px rgba(0,0,0,0.4);
}
/* 右侧操作按钮区域 */
#action-btns{
  position:absolute;bottom:30px;right:18px;
  display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);
  gap:8px;
  pointer-events:all;
}
.action-btn{
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(10,8,20,0.72);
  border:2px solid rgba(255,255,255,0.14);
  color:#ccc;
  font-size:11px;
  font-family:'Microsoft YaHei',sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
  transition:background 0.12s,transform 0.08s,border-color 0.12s;
  backdrop-filter:blur(6px);
  box-shadow:0 3px 12px rgba(0,0,0,0.4);
  -webkit-tap-highlight-color:transparent;
  letter-spacing:0;
}
.action-btn:active,.action-btn.pressed{
  background:rgba(200,160,60,0.25);
  border-color:rgba(200,160,60,0.55);
  transform:scale(0.91);
}
.action-btn .ab-icon{font-size:16px;line-height:1}
.action-btn .ab-label{font-size:9px;color:#888;line-height:1}
/* 攻击按钮特殊样式 */
#btn-attack{
  background:rgba(120,20,20,0.72);
  border-color:rgba(200,60,60,0.35);
  color:#ee6666;
}
#btn-attack .ab-icon{font-size:20px}
#btn-attack:active,#btn-attack.pressed{
  background:rgba(200,30,30,0.55);
  border-color:rgba(220,80,80,0.7);
}
/* 拾取/进出副本按钮 */
#btn-interact{
  border-color:rgba(60,180,60,0.35);
  color:#66cc66;
}
#btn-interact:active,#btn-interact.pressed{
  background:rgba(40,120,40,0.35);
  border-color:rgba(80,200,80,0.6);
}
/* 技能按钮 */
#btn-skill1{border-color:rgba(100,140,220,0.4);color:#88aaff}
#btn-skill2{border-color:rgba(200,160,60,0.35);color:#c8a050}
#btn-skill3{border-color:rgba(60,180,120,0.35);color:#66cc99}
#btn-skill1:active,#btn-skill1.pressed{background:rgba(60,100,200,0.3);border-color:rgba(120,160,255,0.6)}
#btn-skill2:active,#btn-skill2.pressed{background:rgba(160,120,20,0.3);border-color:rgba(220,180,80,0.6)}
#btn-skill3:active,#btn-skill3.pressed{background:rgba(30,140,80,0.3);border-color:rgba(80,220,140,0.6)}
/* 火把按钮 */
#btn-torch{border-color:rgba(220,140,40,0.35);color:#e88830}
#btn-torch:active,#btn-torch.pressed{background:rgba(180,100,10,0.35);border-color:rgba(240,160,60,0.6)}

/* 副本HUD（手机端缩到左上方） */
#mobile-dungeon-hud{
  display:none;
  position:fixed;top:8px;left:8px;
  background:rgba(6,4,12,0.85);
  border:1px solid rgba(100,180,255,0.25);
  border-radius:10px;
  padding:5px 10px;
  font-size:11px;
  color:#88ccff;
  z-index:55;
  backdrop-filter:blur(6px);
  pointer-events:none;
  font-family:'Microsoft YaHei',sans-serif;
}

/* ═══ 手机端响应式布局 ═══ */
@media (max-width: 768px) {
  /* 虚拟按键默认不显示，由用户手动开启 */

  /* 操作提示：PC端显示，虚拟按键开启时隐藏（由JS控制） */

  /* 左上信息栏：手机上隐藏，信息在canvas内可见 */
  #info{
    display:none;
  }

  /* HUD 移到顶部中间，精简 */
  #hud{
    bottom:auto;
    top:6px;
    left:50%;
    transform:translateX(-50%);
    padding:5px 10px;
    gap:6px;
    border-radius:22px;
    font-size:10px;
  }
  .hud-bar{width:70px;height:7px}
  .hud-bar-label{font-size:7px}
  .hud-label{font-size:6.5px}
  .hud-ember-val{font-size:10px}
  .hud-ember-lbl{font-size:6.5px}
  .hud-divider{height:20px}

  /* 面板全屏底部弹出 */
  #panel{
    width:100vw;height:88dvh;
    top:auto;bottom:0;left:0;
    transform:none;
    border-radius:16px 16px 0 0;
    border-left:none;border-right:none;border-bottom:none;
  }
  #panel.show{animation:panelInMobile 0.22s ease-out}
  @keyframes panelInMobile{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
  }
  .ptab{font-size:9px;padding:8px 2px;min-width:40px}
  #panel-body{padding:10px 12px}

  /* 死亡界面适配 */
  #death-box{
    min-width:unset;max-width:96vw;
    width:96vw;
    padding:18px 14px;
    border-radius:14px;
  }
  #death-title{font-size:20px;letter-spacing:4px}
  #death-ember-count{font-size:20px}
  #death-ember-icon{font-size:20px}
  .death-section-title{font-size:10.5px}
  .death-exp-option,.death-shop-item{padding:8px 10px;font-size:11px}

  /* 登录界面适配 */
  #login-screen h1{font-size:22px;letter-spacing:4px}
  #login-input-row{flex-direction:column;gap:10px;width:88vw}
  #login-input-row input{width:100%;font-size:15px}
  .login-btn{font-size:13px;padding:12px 18px;letter-spacing:2px;text-align:center}
  #login-accounts{max-width:90vw}

  /* 首页适配 */
  .home-logo h1{font-size:30px;letter-spacing:5px}
  .home-tagline{font-size:10px}
  .home-btn{padding:13px 28px;min-width:190px;font-size:15px;letter-spacing:3px}
  .home-footer{display:none}
  #home-user-bar{top:10px;right:12px}

  /* 角色选择适配 */
  #char-select h1{font-size:22px;letter-spacing:4px}
  #char-select .sub{font-size:11px}
  #char-grid{gap:8px;padding:0 8px;max-width:100vw;overflow-y:auto;max-height:55dvh}
  .ch{width:82px;padding:8px}
  .ch canvas{width:68px!important;height:76px!important}
  .ch .cn{font-size:11px}
  .ch .cd{font-size:8px}

  /* 面板内容适配 */
  .pstat-row{margin-bottom:4px}

  /* Bug反馈按钮适配 */
  #bug-btn{bottom:170px;left:24px;width:38px;height:38px;font-size:15px}
  #bug-btn .bug-tip{bottom:46px}
  .pstat-label{width:54px;font-size:10px}
  #panel-hdr h2{font-size:13px}

  /* 联机大厅手机适配 */
  #net-lobby-box{width:min(95vw,400px);max-height:90vh;overflow-y:auto;padding:16px}
  #net-server-url{font-size:11px}
}

/* ═══ 联机大厅弹窗 ═══ */
#net-lobby{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.82);
  z-index:3000;
  align-items:center;
  justify-content:center;
}
#net-lobby-box{
  background:rgba(8,8,20,0.97);
  border:1px solid rgba(60,140,220,0.3);
  border-radius:14px;
  padding:22px 24px;
  width:min(480px,92vw);
  max-height:88vh;
  overflow-y:auto;
  box-shadow:0 8px 40px rgba(0,0,0,0.7);
}
#net-lobby-box input{
  touch-action:manipulation;
}
.net-pitem{
  padding:5px 8px;
  border-radius:5px;
  margin-bottom:3px;
  background:rgba(255,255,255,0.03);
  color:#ccc;
  font-size:12px;
}
.net-me{
  background:rgba(60,200,100,0.08);
  border:1px solid rgba(60,200,100,0.18);
  color:#8e8;
}