/* 魔兽式界面：暗金 / 石质 / 皮革基调；全部系统字体，无外部字体文件 */
:root {
  --gold: #e8c878;
  --gold-dim: #a8883c;
  --text: #f0e6cc;
  --stone0: #2a2622;
  --stone1: #16130f;
  --console-h: 224px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: var(--font); user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
.hidden { display: none !important; }

/* ---------- 加载页 ---------- */
#loading {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #2a3a2a 0%, #0a0c08 70%);
  transition: opacity .5s;
}
#loading.fade { opacity: 0; pointer-events: none; }
.load-inner { width: min(560px, 80vw); text-align: center; }
.load-title { font-size: 54px; font-weight: 800; letter-spacing: 12px; color: var(--gold);
  text-shadow: 0 0 18px rgba(232,200,120,.45), 0 3px 0 #3a2a10, 0 5px 12px #000; }
.load-sub { color: #b8a880; margin: 6px 0 28px; letter-spacing: 3px; }
.load-bar { height: 16px; border: 2px solid #6a5424; background: #120e08; box-shadow: inset 0 2px 6px #000, 0 0 0 1px #000; }
#load-fill { height: 100%; width: 0; background: linear-gradient(#f0d070, #a87818); transition: width .2s; }
#load-text { margin-top: 12px; color: #d8c89c; font-size: 14px; }
.load-tip { margin-top: 28px; color: #8a8068; font-size: 13px; }

/* ---------- 顶栏 ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; justify-content: space-between; pointer-events: none; }
#topbar > * { pointer-events: auto; }
#top-left { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.top-btn {
  font: 600 13px var(--font); color: var(--gold); padding: 5px 14px; cursor: pointer;
  background: linear-gradient(#4a3a22, #1e160c); border: 2px solid #7a5e28; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,230,160,.25), 0 2px 4px #000;
}
.top-btn:hover { filter: brightness(1.25); }
#clock { display: flex; align-items: center; gap: 4px; background: rgba(10,8,4,.75); border: 1px solid #5a4620; border-radius: 22px; padding: 1px 10px 1px 1px; }
#clock-text { font: 600 13px var(--font); color: var(--gold); min-width: 42px; }
#resources {
  display: flex; align-items: center; gap: 14px; height: 34px; padding: 0 16px 0 22px; margin-top: 2px;
  background: linear-gradient(#2e2618, #120e08); border: 2px solid #6a5424; border-top: none; border-right: none;
  border-bottom-left-radius: 14px; box-shadow: 0 3px 8px rgba(0,0,0,.7);
}
.res { display: flex; align-items: center; gap: 5px; font: 700 15px var(--font); color: #f8e8b8; text-shadow: 0 1px 2px #000; }
.res canvas { width: 22px; height: 22px; }
.res span { min-width: 34px; }
#res-food.capped span { color: #ff6a50; }
#res-upkeep span { font-size: 13px; font-weight: 600; color: #7cf07c; }
#res-upkeep.low span { color: #f0d050; }
#res-upkeep.high span { color: #ff6a50; }
.res.flash span { animation: flash .35s ease-out; }
@keyframes flash { from { color: #fff; text-shadow: 0 0 8px #ffd860; } }

/* ---------- 提示消息（屏幕上方正中，黄色小字） ---------- */
#messages { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); width: 60vw; text-align: center; pointer-events: none; }
.msg { font: 600 16px var(--font); color: #ffd84a; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 8px #000; margin: 3px 0; transition: opacity .6s; }
.msg.good { color: #fff0a0; }
.msg.fade { opacity: 0; }

/* 拖框 */
#selbox { position: absolute; border: 1px solid #40ff40; background: rgba(64,255,64,.08); display: none; pointer-events: none; }
#floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.floater { position: absolute; left: 0; top: 0; font: 800 15px var(--font); text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; will-change: transform; }
.floater.gold { color: #ffd84a; }
.floater.wood { color: #9ef07a; }

/* ---------- 底部控制台 ---------- */
#console {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--console-h);
  display: grid; grid-template-columns: var(--console-h) 1fr 290px; gap: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 7px),
    linear-gradient(#3a3024, #1a140c 30%, #120e08);
  border-top: 3px solid #7a5e28;
  box-shadow: 0 -2px 0 #1a120a, 0 -8px 18px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,220,140,.18);
}
#console::before { /* 顶部金色饰条上的铆钉 */
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 60px, #f0d890 60px 64px);
}
#minimap-frame {
  margin: 8px; border: 3px solid #6a5424; border-radius: 3px; background: #000;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #2a200c, 0 0 10px rgba(0,0,0,.8);
  position: relative;
}
#minimap { width: 100%; height: 100%; display: block; cursor: crosshair; image-rendering: auto; }
#center-panel { display: grid; grid-template-columns: 132px 1fr; grid-template-rows: 1fr; gap: 8px; padding: 10px 8px; position: relative; }
#portrait-box { width: 128px; height: 128px; border: 3px solid #6a5424; background: #000; box-shadow: 0 0 8px #000; align-self: center; }
#portrait { width: 100%; height: 100%; display: block; }
#unit-info { max-width: 560px; padding: 4px 10px; background: rgba(0,0,0,.35); border: 1px solid #3a2e18; border-radius: 3px; overflow: hidden; }
#unit-info .name { font: 700 18px var(--font); color: var(--gold); text-shadow: 0 1px 2px #000; }
#unit-info .sub { font-size: 12px; color: #b8a880; margin-bottom: 4px; }
#unit-info .row { font-size: 13px; color: #e8dcc0; margin: 2px 0; }
#unit-info .row b { color: #fff; }
#unit-info .hpbar, #unit-info .progress { height: 12px; border: 1px solid #000; background: #200; margin: 4px 0; position: relative; }
#unit-info .hpbar > div { height: 100%; background: linear-gradient(#60f060, #208020); }
#unit-info .progress { background: #1a1408; }
#unit-info .progress > div { height: 100%; background: linear-gradient(#ffe070, #b08010); }
#unit-info .progress span, #unit-info .hpbar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 11px; color: #fff; text-shadow: 0 0 2px #000; }
#unit-info .queue { display: flex; gap: 4px; margin-top: 6px; }
#unit-info .queue canvas { width: 34px; height: 34px; cursor: pointer; border: 1px solid #000; }
#unit-info .queue canvas:hover { filter: brightness(1.3); outline: 1px solid #f00; }
#selection-list { position: absolute; left: 148px; right: 8px; top: 8px; bottom: 8px; display: none; flex-wrap: wrap; align-content: flex-start; gap: 4px; background: rgba(0,0,0,.35); padding: 6px; border: 1px solid #3a2e18; }
#selection-list.multi { display: flex; }
#selection-list .sel-item { width: 44px; height: 52px; position: relative; cursor: pointer; }
#selection-list .sel-item canvas { width: 44px; height: 44px; display: block; }
#selection-list .sel-item.active canvas { outline: 2px solid #ffe070; }
#selection-list .sel-item .hp { height: 5px; background: #300; border: 1px solid #000; }
#selection-list .sel-item .hp > div { height: 100%; background: #3c3; }

/* 指令卡：4 列 × 3 行 */
#command-card { display: grid; grid-template-columns: repeat(4, 60px); grid-template-rows: repeat(3, 60px); gap: 5px; padding: 10px; align-content: center; justify-content: center;
  background: rgba(0,0,0,.3); border-left: 2px solid #4a3a1a; }
.cmd { position: relative; width: 60px; height: 60px; cursor: pointer; border: none; padding: 0; background: #0a0806; box-shadow: 0 0 0 1px #000, 0 2px 4px #000; }
.cmd canvas { width: 60px; height: 60px; display: block; }
.cmd .hk { position: absolute; right: 3px; bottom: 1px; font: 800 12px var(--font); color: #ffe070; text-shadow: 0 0 2px #000, 0 0 3px #000; }
.cmd:hover canvas { filter: brightness(1.3); }
.cmd:active canvas { transform: translateY(1px); filter: brightness(.9); }
.cmd.disabled canvas { filter: grayscale(1) brightness(.5); }
.cmd.active { box-shadow: 0 0 0 2px #40ff40; }
.cmd-empty { width: 60px; height: 60px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 6px #000; }

/* Tooltip：黑底金字说明框 */
#tooltip {
  position: absolute; max-width: 320px; padding: 8px 12px; pointer-events: none; z-index: 30;
  background: rgba(4,4,8,.94); border: 1px solid #8a6a2a; border-radius: 3px; box-shadow: 0 4px 14px #000;
  font-size: 13px; line-height: 1.55; color: #e8e0cc;
}
#tooltip .tt-title { font-weight: 700; color: var(--gold); font-size: 14px; }
#tooltip .tt-title .hk { color: #ffe070; }
#tooltip .tt-cost { display: flex; gap: 10px; margin: 2px 0 4px; color: #fff; }
#tooltip .tt-cost span { display: inline-flex; align-items: center; gap: 3px; }
#tooltip .tt-cost i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
#tooltip .tt-err { color: #ff6a50; }

/* 菜单 */
#menu { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
#menu .panel { width: 320px; padding: 20px 26px 26px; background: linear-gradient(#2e2618, #120e08); border: 3px solid #7a5e28; box-shadow: 0 10px 40px #000; text-align: center; }
#menu h2 { margin: 0 0 16px; color: var(--gold); letter-spacing: 4px; }
#menu .top-btn { display: block; width: 100%; margin: 8px 0; padding: 9px; font-size: 15px; }
#menu .note { color: #a89878; font-size: 12px; margin-top: 10px; }

/* ---------- 阶段 2：战斗飘字、面板扩展、指令卡状态 ---------- */
.floater.dmg { color: #ff5a3a; font-size: 13px; }
.floater.dmg-own { color: #ffb0a0; font-size: 12px; }
.floater.xp { color: #b8a0ff; font-size: 13px; }
.cmd .cost { position: absolute; left: 3px; top: 2px; font: 700 10px var(--font); color: #ffd84a; text-shadow: 0 1px 1px #000, 0 0 2px #000; pointer-events: none; }
.cmd.autocast { box-shadow: 0 0 0 2px #ffd84a, 0 0 10px 2px rgba(255, 216, 74, 0.7); animation: autocast 1.2s linear infinite; }
@keyframes autocast { 50% { box-shadow: 0 0 0 2px #fff0a0, 0 0 14px 3px rgba(255, 216, 74, 0.9); } }
#unit-info .mpbar, #unit-info .xpbar { position: relative; height: 13px; background: #101018; border: 1px solid #3a3a5a; margin: 2px 0; }
#unit-info .mpbar > div { height: 100%; background: linear-gradient(#5a7aff, #2a3aa0); }
#unit-info .xpbar > div { height: 100%; background: linear-gradient(#c0a0ff, #6040b0); }
#unit-info .mpbar > span, #unit-info .xpbar > span { position: absolute; inset: 0; text-align: center; font: 700 10px/13px var(--font); color: #fff; text-shadow: 0 1px 1px #000; }
#unit-info .lvl { font-size: 12px; color: #ffd84a; }
#unit-info .up { color: #50e050; }
#unit-info .dim { color: #b8a880; }
#unit-info .stats .row { margin: 1px 0; }
#unit-info .status { display: flex; gap: 3px; margin: 3px 0; }
#unit-info .status img { width: 22px; height: 22px; border: 1px solid #000; }
#unit-info { position: relative; }
#unit-info .inv { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; position: absolute; right: 10px; bottom: 8px; }
#unit-info .inv span { position: relative; width: 34px; height: 34px; background: #0a0806; border: 1px solid #5a4a2a; cursor: pointer; }
#unit-info .inv span.empty { cursor: default; opacity: 0.6; }
#unit-info .inv img { width: 30px; height: 30px; display: block; }
#unit-info .inv i { position: absolute; right: 1px; bottom: 0; font: 700 10px var(--font); color: #fff; text-shadow: 0 1px 1px #000; font-style: normal; }
#unit-info .queue img { width: 34px; height: 34px; display: block; }
#unit-info .queue span { display: inline-block; margin-right: 2px; cursor: pointer; border: 1px solid #8a6a2a; }
#unit-info .queue span:first-child { border-color: #ffd84a; }

/* ---------- 阶段 3：英雄技能按钮、冷却、物品栏、英雄栏、商店面板 ---------- */
.cmd .mana { position: absolute; left: 3px; top: 2px; font: 700 10px var(--font); color: #9cc0ff; text-shadow: 0 1px 1px #000, 0 0 2px #000; pointer-events: none; }
.cmd .stk { position: absolute; right: 3px; top: 2px; font: 700 10px var(--font); color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; pointer-events: none; }
.cmd .cdt { display: none; }
.cmd.cooling::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: conic-gradient(rgba(0,0,0,.72) var(--cd), rgba(0,0,0,.15) 0); }
.cmd.cooling .cdt { display: block; position: absolute; inset: 0; z-index: 2; text-align: center; font: 800 20px/60px var(--font); color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000; pointer-events: none; }
.cmd.glow { box-shadow: 0 0 0 2px #ffe070, 0 0 12px 3px rgba(255, 224, 112, 0.8); animation: autocast 1.2s linear infinite; }
.cmd.passive canvas { filter: saturate(.8); }
#unit-info .skills { position: absolute; right: 10px; top: 6px; display: flex; gap: 3px; align-items: flex-start; }
#unit-info .skills span { position: relative; width: 28px; text-align: center; }
#unit-info .skills img { width: 26px; height: 26px; display: block; border: 1px solid #000; }
#unit-info .skills span.off img { filter: grayscale(1) brightness(.45); }
#unit-info .skills b { display: block; font: 700 7px/8px var(--font); color: #ffd84a; letter-spacing: -1px; }
#unit-info .skills em { position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: rgba(0,0,0,.6); color: #fff; font: 800 12px/28px var(--font); font-style: normal; }
#unit-info .skills .pts { width: auto; padding: 0 4px; font: 800 13px/26px var(--font); color: #ffe070; background: rgba(80,60,0,.5); border: 1px solid #ffd84a; animation: autocast 1.2s linear infinite; }
#unit-info .status .bf { position: relative; display: inline-block; }
#unit-info .status .bf.bad img { outline: 1px solid #c02010; }
#unit-info .status .bf i { position: absolute; right: 0; bottom: -1px; font: 700 9px var(--font); font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 1px 1px #000; }
#unit-info .inv u { position: absolute; left: 1px; top: -1px; font: 700 8px var(--font); color: #ffe070; text-decoration: none; text-shadow: 0 1px 1px #000; }
#unit-info .inv em { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.72) var(--cd), rgba(0,0,0,.2) 0); color: #fff; font: 800 13px/34px var(--font); text-align: center; font-style: normal; }
#unit-info .inv span:hover { outline: 1px solid #ffe070; }

#hero-bar { position: absolute; left: 8px; top: 48px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
#hero-bar .hb { position: relative; width: 60px; cursor: pointer; background: #000; border: 2px solid #7a5e28; box-shadow: 0 2px 6px #000; }
#hero-bar .hb.selected { border-color: #ffe070; }
#hero-bar .hb canvas { width: 56px; height: 56px; display: block; }
#hero-bar .hb .lv { position: absolute; left: 2px; top: 1px; font: 800 13px var(--font); color: #ffe070; text-shadow: 0 0 2px #000, 0 1px 2px #000; }
#hero-bar .hb .sp { display: none; position: absolute; right: 2px; top: 0; font: 900 16px var(--font); font-style: normal; color: #ffe070; text-shadow: 0 0 4px #000; }
#hero-bar .hb.points .sp { display: block; animation: autocast 1.2s linear infinite; }
#hero-bar .hb .bars { padding: 1px; }
#hero-bar .hb .bars > div { height: 4px; background: #200; margin-top: 1px; }
#hero-bar .hb .bars .h > div { height: 100%; background: #30d030; }
#hero-bar .hb .bars .m > div { height: 100%; background: #4a6aff; }
#hero-bar .hb.isdead canvas { filter: grayscale(1) brightness(.4); }
#hero-bar .hb .dead { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font: 700 11px var(--font); color: #ff8060; text-shadow: 0 0 3px #000, 0 1px 2px #000; }

#shop-panel { position: absolute; left: 76px; bottom: calc(var(--console-h) + 14px); width: 460px; max-height: 58vh; overflow: auto; z-index: 20;
  background: linear-gradient(#2e2618, #120e08); border: 3px solid #7a5e28; box-shadow: 0 8px 30px #000; padding: 0 0 8px; font-size: 13px; color: #e8dcc0; }
#shop-panel.hidden { display: none; }
#shop-panel .hd { position: sticky; top: 0; font: 700 16px var(--font); color: var(--gold); padding: 7px 12px; background: #1a140c; border-bottom: 1px solid #5a4620; }
#shop-panel .hd button { float: right; background: none; border: none; color: #e8c878; font-size: 18px; cursor: pointer; }
#shop-panel .row { display: grid; grid-template-columns: 44px 1fr 74px 40px 82px; align-items: center; gap: 6px; padding: 4px 10px; border-bottom: 1px solid rgba(90,70,30,.4); }
#shop-panel .row.no .nm { color: #a09070; }
#shop-panel .row img { width: 40px; height: 40px; border: 1px solid #000; }
#shop-panel .nm { font-weight: 700; color: #fff0c8; }
#shop-panel .nm small { display: block; font-weight: 400; font-size: 11px; color: #b8a880; line-height: 1.3; }
#shop-panel .pr { color: #ffd84a; font-weight: 700; }
#shop-panel .pr i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 2px; }
#shop-panel .pr i.g { background: #f0c030; } #shop-panel .pr i.w { background: #58a040; }
#shop-panel .st { color: #c8c0a0; text-align: center; }
#shop-panel button[data-act="buy"], #shop-panel button[data-act="hire"] { font: 600 12px var(--font); color: var(--gold); background: linear-gradient(#4a3a22, #1e160c); border: 1px solid #7a5e28; padding: 5px 4px; cursor: pointer; }
#shop-panel button[disabled] { color: #ff8060; filter: grayscale(.6); cursor: default; font-size: 11px; }
#shop-panel .sub { padding: 8px 12px 4px; color: #c8b890; }
#shop-panel .sell { display: flex; gap: 6px; padding: 0 12px; }
#shop-panel .sell button { width: 58px; height: 58px; position: relative; background: #0a0806; border: 1px solid #5a4a2a; cursor: pointer; padding: 0; }
#shop-panel .sell button img { width: 40px; height: 40px; }
#shop-panel .sell button span { position: absolute; left: 0; right: 0; bottom: 1px; color: #ffd84a; font: 700 11px var(--font); }
#shop-panel .ft { padding: 8px 12px 0; color: #c8b890; }
#shop-panel .ft b { color: #ffd84a; }
.floater.crit { color: #ff2010; font-size: 20px; font-weight: 900; }
.floater.heal { color: #60ff60; font-size: 14px; }
.floater.spell { color: #c080ff; font-size: 14px; }
.floater.level { color: #ffe070; font-size: 18px; font-weight: 900; }