:root{
  --gold:#e6c072;
  --gold-dim:#a98a45;
  --panel:#14100b;
  --panel-2:#1d1710;
  --panel-3:#241c13;
  --line:#54402a;
  --line-soft:#3a2d1e;
  --text:#e9e0cd;
  --text-dim:#a89b85;
  --blue:#4a8ae0;
  --red:#d15048;
}
*{box-sizing:border-box;}
html,body{
  margin:0;height:100%;overflow:hidden;background:#080706;color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;user-select:none;
}
#app{position:relative;width:100vw;height:100vh;overflow:hidden;}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default;}
#hud{position:absolute;inset:0;pointer-events:none;}
#hud button,#hud canvas,#hud .cmd{pointer-events:auto;}

/* ---------- 顶栏 ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;height:42px;display:flex;align-items:center;gap:20px;
  padding:0 16px;pointer-events:auto;
  background:linear-gradient(180deg,rgba(20,16,11,.96),rgba(14,11,8,.82));
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  font-size:14px;letter-spacing:.3px;
}
#topbar .res{display:flex;align-items:center;gap:7px;min-width:78px;font-variant-numeric:tabular-nums;}
#topbar .ico{font-size:15px;line-height:1;filter:drop-shadow(0 0 4px rgba(0,0,0,.6));}
#topbar .ico.gold{color:#f0c451;}
#topbar .ico.wood{color:#8fbe6a;}
#topbar .ico.food{color:#8fd0e0;}
#topbar .spacer{flex:1;}
#clock{color:var(--gold-dim);font-variant-numeric:tabular-nums;font-size:13px;}
.topbtn{
  background:linear-gradient(180deg,#2f2418,#1d1610);color:var(--text);
  border:1px solid var(--line);border-radius:4px;padding:5px 12px;font-size:12px;cursor:pointer;
  font-family:inherit;letter-spacing:1px;
}
.topbtn:hover{border-color:var(--gold-dim);color:#fff;}
.topbtn:active{transform:translateY(1px);}

/* ---------- 消息 ---------- */
#log{
  position:absolute;left:16px;bottom:172px;width:min(430px,42vw);
  display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.45;
  text-shadow:0 1px 3px #000;
}
#log .msg{
  background:linear-gradient(90deg,rgba(10,8,6,.86),rgba(10,8,6,.25));
  border-left:2px solid var(--gold-dim);padding:3px 9px;border-radius:0 3px 3px 0;
  animation:msgIn .18s ease-out;transition:opacity .5s;
}
#log .msg.warn{border-left-color:#d98a3a;}
#log .msg.bad{border-left-color:#c94b44;}
#log .msg.good{border-left-color:#5fb96f;}
@keyframes msgIn{from{transform:translateX(-10px);opacity:0;}to{transform:none;opacity:1;}}

/* ---------- 底栏 ---------- */
#bottombar{
  position:absolute;left:0;right:0;bottom:0;height:156px;display:flex;gap:12px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(23,18,12,.97) 0%,rgba(13,10,7,.99) 100%);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(0,0,0,.6);
  pointer-events:auto;
}
#selPanel{
  width:268px;flex:none;display:flex;gap:10px;align-items:center;padding:8px;
  background:linear-gradient(180deg,#1e1710,#151009);
  border:1px solid var(--line-soft);border-radius:6px;
}
#portrait{
  width:92px;height:92px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:44px;border-radius:5px;
  background:radial-gradient(circle at 50% 35%,#3a2c1c,#181209 75%);
  border:1px solid var(--line);box-shadow:inset 0 0 22px rgba(0,0,0,.85);
  filter:drop-shadow(0 2px 4px #000);
}
#selText{min-width:0;flex:1;}
#selName{font-size:15px;color:var(--gold);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#selSub{font-size:11.5px;color:var(--text-dim);margin-top:5px;line-height:1.5;min-height:34px;}
#selBar{
  height:7px;margin-top:6px;border-radius:3px;background:#0a0806;border:1px solid #2e2418;overflow:hidden;
  display:none;
}
#selBar i{display:block;height:100%;width:100%;background:linear-gradient(180deg,#6fd07f,#3c8f4c);}
#cmdPanel{
  flex:1;min-width:0;display:flex;flex-direction:column;padding:2px 4px;
}
#cmdTitle{
  font-size:11px;color:var(--gold-dim);letter-spacing:2px;margin-bottom:6px;padding-left:2px;
  text-transform:uppercase;
}
#cmdGrid{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;}
.cmd{
  position:relative;width:66px;height:66px;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,#2f2416 0%,#1c1610 60%,#151009 100%);
  border:1px solid #4d3b26;box-shadow:0 2px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,160,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:border-color .12s,transform .06s,box-shadow .12s;
  overflow:hidden;
}
.cmd:hover{border-color:var(--gold);box-shadow:0 0 12px rgba(230,192,114,.3),inset 0 1px 0 rgba(255,220,160,.12);}
.cmd:active{transform:translateY(1px);}
.cmd .ic{font-size:23px;line-height:1.05;filter:drop-shadow(0 1px 2px #000);}
.cmd .nm{font-size:10.5px;color:#e3d6bd;letter-spacing:.5px;}
.cmd .key{
  position:absolute;top:2px;left:4px;font-size:10px;color:var(--gold);font-weight:700;
  text-shadow:0 1px 2px #000;
}
.cmd .cost{
  font-size:9.5px;color:var(--gold-dim);font-variant-numeric:tabular-nums;
  display:flex;gap:5px;height:11px;
}
.cmd.disabled{opacity:.38;filter:grayscale(.85);cursor:not-allowed;}
.cmd.disabled:hover{border-color:#4d3b26;box-shadow:0 2px 5px rgba(0,0,0,.55);}
.cmd.queued::after{
  content:"";position:absolute;inset:0;border:1px solid #7bd18b;border-radius:6px;pointer-events:none;
}
#cmdHint{font-size:11.5px;color:var(--text-dim);margin-top:auto;padding-left:2px;height:16px;}

#mapPanel{
  width:186px;flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px;background:linear-gradient(180deg,#1e1710,#151009);
  border:1px solid var(--line-soft);border-radius:6px;
}
#minimap{
  width:160px;height:160px;border-radius:4px;cursor:crosshair;
  border:1px solid #4d3b26;box-shadow:inset 0 0 20px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.5);
}
#mapHint{font-size:10.5px;color:#7d715d;letter-spacing:1px;}

/* ---------- 提示 ---------- */
#tooltip{
  position:fixed;z-index:60;max-width:280px;padding:9px 11px;border-radius:6px;
  background:rgba(10,8,6,.97);border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.75);
  font-size:12px;line-height:1.5;color:var(--text);pointer-events:none;
  opacity:0;transition:opacity .1s;
}
#tooltip.on{opacity:1;}
#tooltip .tt-name{color:var(--gold);font-size:13px;margin-bottom:3px;letter-spacing:.5px;}
#tooltip .tt-cost{color:#d9bd82;font-size:11.5px;margin-top:4px;}
#tooltip .tt-reason{color:#e08a6a;font-size:11.5px;margin-top:4px;}

/* ---------- 遮罩 ---------- */
#overlay,#endOverlay{
  position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(30,23,15,.86),rgba(4,3,2,.97) 70%);
  backdrop-filter:blur(3px);
  transition:opacity .35s;
}
#overlay.hidden,#endOverlay.hidden{opacity:0;pointer-events:none;display:none;}
#overlay .panel,#endOverlay .panel{
  width:min(560px,90vw);padding:34px 40px 30px;text-align:center;
  background:linear-gradient(180deg,rgba(34,26,17,.96),rgba(16,12,8,.98));
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,220,160,.08);
  position:relative;
}
#overlay .panel::before,#endOverlay .panel::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(230,192,114,.1);border-radius:6px;pointer-events:none;
}
.crest{font-size:34px;color:var(--gold);line-height:1;margin-bottom:6px;filter:drop-shadow(0 0 14px rgba(230,192,114,.35));}
#overlay h1,#endOverlay h1{
  margin:6px 0 4px;font-size:34px;letter-spacing:10px;color:var(--gold);font-weight:600;
  text-shadow:0 2px 20px rgba(230,192,114,.25);
}
#overlay .sub,#endOverlay .sub{color:var(--text-dim);font-size:13px;letter-spacing:3px;margin:0 0 12px;}
.help{
  text-align:left;font-size:12.5px;line-height:1.9;color:#c9bda6;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:14px 4px;margin:16px 0 20px;
}
.help b{color:var(--gold);font-weight:600;}
.help .goal{margin-top:8px;color:#8fbe6a;}
#overlay button,#endOverlay button{
  pointer-events:auto;font-family:inherit;cursor:pointer;
  padding:11px 40px;font-size:15px;letter-spacing:5px;color:#241a0d;font-weight:700;
  background:linear-gradient(180deg,#e8c778,#b08c41);
  border:1px solid #f2d997;border-radius:5px;
  box-shadow:0 6px 22px rgba(230,192,114,.28),inset 0 1px 0 #ffe9b8;
  transition:transform .08s,box-shadow .15s;
}
#overlay button:hover,#endOverlay button:hover{transform:translateY(-1px);box-shadow:0 9px 30px rgba(230,192,114,.42),inset 0 1px 0 #ffe9b8;}
#overlay button:active,#endOverlay button:active{transform:translateY(1px);}

@media (max-height:700px){
  #bottombar{height:132px;padding:7px 10px;}
  #portrait{width:74px;height:74px;font-size:34px;}
  .cmd{width:58px;height:58px;}
  .cmd .ic{font-size:20px;}
  #mapPanel{width:160px;}
  #minimap{width:138px;height:138px;}
  #log{bottom:146px;}
}