* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
html, body { width:100%; height:100%; overflow:hidden; background:#0a0f0a; font-family:"Microsoft YaHei", sans-serif; }
#wrap { position:relative; width:100%; height:100%; }
canvas#main { position:absolute; top:0; left:0; display:block; cursor:crosshair; }
#hud {
  position:absolute; left:0; right:0; bottom:0; height:150px;
  background:linear-gradient(#22303a, #141b20);
  border-top:2px solid #4a6a5a;
  display:flex; align-items:center; padding:6px 12px; gap:14px;
  color:#cfe8d8; font-size:13px; z-index:10;
}
#stats { min-width:150px; }
#stats .row { display:flex; gap:14px; margin-bottom:4px; }
#stats b { color:#ffe27a; }
#hud .sep { width:2px; height:96px; background:#3a4a42; border-radius:2px; }
#panel { display:flex; gap:8px; flex:1; flex-wrap:wrap; align-items:center; }
.btn {
  width:78px; height:66px; border:1px solid #4a6a5a; border-radius:8px;
  background:linear-gradient(#2c3c32, #1a241e); color:#d8f0e0; font-size:12px; text-align:center;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  cursor:pointer; position:relative;
  box-shadow:0 2px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn:hover { background:linear-gradient(#35483c, #22302a); border-color:#7ac88a; box-shadow:0 0 10px rgba(120,200,140,.4), inset 0 1px 0 rgba(255,255,255,.08); }
.btn:active { transform:translateY(1px); }
.btn.disabled { opacity:.38; }
.btn .cost { color:#ffe27a; }
.btn .small { font-size:10px; color:#9fc0ac; }
.btn .cnt { position:absolute; top:2px; right:4px; font-size:11px; color:#7ac88a; }
.btn .num { position:absolute; top:2px; left:4px; font-size:10px; color:#8aff8a; background:rgba(0,0,0,.55); border-radius:3px; padding:0 4px; line-height:14px; }
.btn .icon { width:40px; height:40px; margin:0 auto; background:#141a16; background-size:contain; background-position:center; background-repeat:no-repeat; border:1px solid rgba(255,255,255,.08); border-radius:6px; display:flex; align-items:center; justify-content:center; color:#3f5546; font-weight:bold; }
.btn .bname { font-size:11px; }
.selimg { float:right; width:52px; height:52px; object-fit:contain; margin:2px 0 4px 8px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(0,0,0,.3); }
#selinfo { width:270px; min-height:96px; font-size:11px; color:#c8e0d0; line-height:1.45; }
#selinfo .t { color:#ffe27a; margin-bottom:3px; font-size:13px; font-weight:bold; }
.statrow { display:flex; justify-content:space-between; font-size:10.5px; color:#b8d4c4; margin:1px 0; }
.statrow b { color:#ffe27a; font-weight:normal; }
.hpbar { height:6px; background:#0d1412; border:1px solid #3a5a4a; border-radius:3px; overflow:hidden; margin:3px 0; }
.hpbar i { display:block; height:100%; background:linear-gradient(#5ee07a,#2f9a4a); }
.hpbar i.warn { background:linear-gradient(#ffd24a,#d8902a); }
.hpbar i.danger { background:linear-gradient(#ff5a5a,#b03030); }
.udesc { font-size:10px; color:#8fb0a0; margin-top:3px; }
#powerBadge { color:#ff8080; font-size:12px; display:none; }
#minimap { position:absolute; right:12px; top:12px; border:2px solid #3a5a4a; background:#101810; z-index:10; cursor:pointer; }
#sellBtn {
  position:absolute; right:12px; top:172px; width:120px;
  padding:8px 0; font-size:14px; letter-spacing:2px;
  background:linear-gradient(#5a3a3a,#3a2222); color:#ffb0a0;
  border:2px solid #8a4a4a; border-radius:8px; cursor:pointer; z-index:10;
}
#sellBtn:hover { background:linear-gradient(#6a4a4a,#4a2a2a); border-color:#c86a5a; }
#sellBtn.active { background:linear-gradient(#9a3a3a,#6a2222); border-color:#ff6a6a; box-shadow:0 0 12px rgba(255,90,90,.5); }
#overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.7); z-index:50;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:20px;
}
#overlay.show { display:flex; }
#overlay h1 { font-size:52px; color:#ffe27a; text-shadow:0 0 18px #000; }
#overlay h2 { color:#cfe8d8; font-size:22px; }
#overlay button { padding:12px 40px; font-size:20px; background:#3a7a4a; border:2px solid #7ac88a; color:#fff; border-radius:8px; cursor:pointer; }
#overlay button:hover { background:#4a9a5a; }
.ovbtns { display:flex; gap:16px; }
#pauseOv {
  position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:70;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:22px;
}
#pauseOv.show { display:flex; }
#pauseOv h1 { font-size:56px; color:#ffe27a; text-shadow:0 0 18px #000; letter-spacing:8px; }
#pauseOv button { padding:12px 50px; font-size:20px; letter-spacing:3px; background:linear-gradient(#4a9a5a,#2f6a3f);
  border:2px solid #7ac88a; color:#fff; border-radius:10px; cursor:pointer; }
#pauseOv button:hover { background:linear-gradient(#5ab06a,#3a7a4a); }
#menu {
  position:absolute; inset:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:radial-gradient(circle at 50% 30%, #274a35 0%, #14241a 60%, #0a120c 100%);
  color:#cfe8d8; overflow-y:auto; padding:20px;
}
#menu.hidden { display:none; }
#menu h1 { font-size:58px; color:#ffe27a; text-shadow:0 0 24px rgba(255,226,122,.4), 0 4px 8px #000; letter-spacing:6px; }
#menu .msub { color:#9fc0ac; font-size:14px; letter-spacing:2px; }
#menu .mcols { display:flex; gap:36px; margin-top:8px; align-items:flex-start; }
#menu .mcol { min-width:210px; }
#menu .mcol h2 { text-align:center; margin-bottom:12px; color:#9fd0b0; font-size:17px; letter-spacing:3px; }
.mapcard { width:230px; padding:12px 14px; margin-bottom:10px; border:2px solid #3a5a4a; border-radius:10px;
  background:linear-gradient(#24342a,#161f18); cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; }
.mapcard:hover { border-color:#7ac88a; transform:translateY(-2px); }
.mapcard.sel { border-color:#ffe27a; box-shadow:0 0 14px rgba(255,226,122,.4); }
.mapcard .mname { font-size:16px; color:#ffe27a; font-weight:bold; letter-spacing:2px; }
.mapcard .mdesc { font-size:11px; color:#8fb0a0; margin-top:4px; }
#mapPrev { width:384px; height:288px; border:2px solid #3a5a4a; border-radius:10px; background:#0a120c; cursor:pointer; }
#teamRows { display:flex; flex-direction:column; gap:9px; }
.trow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.trow .tname { width:54px; color:#9fd0b0; font-size:12px; }
.facBtn { padding:4px 10px; font-size:12px; background:#2c3c32; color:#d8f0e0; border:1px solid #4a6a5a; border-radius:6px; cursor:pointer; }
.facBtn:hover { border-color:#7ac88a; }
.facBtn.sel { background:#3a7a4a; border-color:#7ac88a; color:#fff; }
.allyBtn { padding:4px 10px; font-size:12px; border-radius:6px; cursor:pointer; border:1px solid #5a4a4a; background:#3a2a2a; color:#ffb0a0; }
.allyBtn.ally { border-color:#4a8a5a; background:#2a4a34; color:#8aff8a; }
/* 分组 A/B/C/D */
.grpBtn { padding:2px 9px; font-size:12px; background:#2c3c32; color:#d8f0e0; border:1px solid #4a6a5a; border-radius:6px; cursor:pointer; }
.grpBtn:hover { border-color:#7ac88a; }
.grpBtn.sel { background:#3a7a4a; border-color:#7ac88a; color:#fff; }
/* ===== 下拉选择表(资金/分组/颜色) ===== */
.dd { position:relative; display:inline-block; }
.ddTrig {
  padding:3px 10px; font-size:12px; background:#2c3c32; color:#d8f0e0;
  border:1px solid #4a6a5a; border-radius:6px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}
.ddTrig:hover { border-color:#7ac88a; }
.ddTrig .ddCaret { font-size:9px; color:#8fb0a0; }
.ddList {
  position:absolute; top:calc(100% + 4px); left:0; z-index:70;
  min-width:150px; background:#1c2a22; border:1px solid #5a8a6a; border-radius:8px;
  padding:6px; display:flex; flex-direction:column; gap:4px;
  box-shadow:0 8px 22px rgba(0,0,0,.65);
}
.ddList.grid2 { display:grid; grid-template-columns:1fr 1fr; min-width:200px; }
.ddList.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; min-width:190px; }
.ddOpt {
  padding:5px 8px; font-size:12px; background:#2c3c32; color:#d8f0e0;
  border:1px solid #4a6a5a; border-radius:6px; cursor:pointer; text-align:center; white-space:nowrap;
}
.ddOpt:hover { border-color:#7ac88a; background:#35483c; }
.ddOpt.sel { background:#3a7a4a; border-color:#7ac88a; color:#fff; }
.colorOpt { display:flex; align-items:center; justify-content:center; gap:5px; padding:4px 5px; }
.colorOpt .sw { width:14px; height:14px; border-radius:3px; border:1px solid rgba(255,255,255,.28); flex:none; }
.ddTrig .sw { width:13px; height:13px; border-radius:3px; border:1px solid rgba(255,255,255,.3); }
.setrow { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
/* 出生点队伍选择按钮 */
.spawnSel { display:flex; gap:6px; margin-bottom:8px; }
.spawnBtn { padding:3px 10px; font-size:12px; border-radius:6px; cursor:pointer; background:#2c3c32; color:#d8f0e0; border:2px solid #4a6a5a; }
.spawnBtn:hover { border-color:#7ac88a; }
.spawnBtn.sel { background:#3a7a4a; color:#fff; box-shadow:0 0 8px rgba(120,220,140,.5); }
.teamHint { font-size:11px; color:#6f8f7f; margin-top:10px; line-height:1.7; }
.card { width:210px; padding:18px 16px; border:2px solid #3a5a4a; border-radius:14px;
  background:linear-gradient(#24342a,#161f18); cursor:pointer; text-align:center; margin-bottom:14px;
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform:translateY(-3px); border-color:#7ac88a; }
.card.sel { border-color:#ffe27a; box-shadow:0 0 18px rgba(255,226,122,.45); transform:translateY(-3px); }
.card .cname { font-size:28px; font-weight:bold; letter-spacing:4px; }
.card .cmini { font-size:12px; color:#8fb0a0; margin-top:6px; }
.card .ccolor { height:5px; border-radius:3px; margin-top:10px; }
#startBtn { padding:15px 70px; font-size:22px; letter-spacing:4px; background:linear-gradient(#4a9a5a,#2f6a3f);
  border:2px solid #7ac88a; color:#fff; border-radius:12px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.5); }
#startBtn:hover { background:linear-gradient(#5ab06a,#3a7a4a); box-shadow:0 0 18px rgba(120,220,140,.5); }
#menu .mfoot { color:#6f8f7f; font-size:12px; margin-top:4px; letter-spacing:1px; }
/* ===== 主菜单帮助按钮(左上角,随菜单显示/隐藏) ===== */
#helpBtn {
  position:fixed; top:16px; left:16px; z-index:65;
  padding:8px 24px; font-size:15px; letter-spacing:4px;
  background:linear-gradient(#3a5a4a,#22372a); color:#d8f0e0;
  border:2px solid #5a8a6a; border-radius:8px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
#helpBtn:hover { border-color:#7ac88a; color:#fff; box-shadow:0 0 14px rgba(120,200,140,.45); }
/* ===== 帮助弹层 ===== */
#helpOv {
  position:absolute; inset:0; background:rgba(0,0,0,.62); z-index:80;
  display:none; align-items:center; justify-content:center;
}
#helpOv.show { display:flex; }
.helpBox {
  width:640px; max-width:92%; max-height:86%;
  background:linear-gradient(#22303a,#141b20);
  border:2px solid #4a6a5a; border-radius:12px;
  padding:22px 28px; color:#cfe8d8; font-size:13px; line-height:1.85;
  display:flex; flex-direction:column;
  box-shadow:0 10px 34px rgba(0,0,0,.65);
}
.helpBox h2 { text-align:center; color:#ffe27a; letter-spacing:6px; margin-bottom:12px; font-size:22px; }
.helpContent { flex:1; overflow-y:auto; padding-right:6px; }
.helpContent .hrow { margin-bottom:6px; }
.helpContent b { color:#ffe27a; }
.helpContent hr { border:none; border-top:1px solid #3a5a4a; margin:10px 0; }
.helpBox #helpBackBtn {
  margin:18px auto 0; padding:10px 48px; font-size:17px; letter-spacing:4px;
  background:linear-gradient(#4a9a5a,#2f6a3f); border:2px solid #7ac88a;
  color:#fff; border-radius:10px; cursor:pointer;
}
.helpBox #helpBackBtn:hover { background:linear-gradient(#5ab06a,#3a7a4a); box-shadow:0 0 14px rgba(120,220,140,.5); }