* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #0a0e13;
  color: #dfe6ee;
  font-family: 'Segoe UI', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ── 顶栏 ─────────────────────────── */
#topbar {
  height: 46px; flex: 0 0 46px;
  display: flex; align-items: center; gap: 20px;
  padding: 0 16px;
  background: linear-gradient(#1c242e, #141a22);
  border-bottom: 1px solid #2c3947;
}
#topbar .spacer { flex: 1; }
.res { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }
.res .ico { font-size: 15px; }
#power.warn { color: #ff6a5e; }
#clock { font-family: Consolas, 'Courier New', monospace; color: #9fb2c8; font-size: 14px; }
.tbtn {
  background: #232c38; border: 1px solid #3a4757; color: #dfe6ee;
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 14px; line-height: 1;
}
.tbtn:hover { background: #2e3a49; }

/* ── 主区域 ───────────────────────── */
#main { flex: 1; display: flex; position: relative; min-height: 0; overflow: hidden; }
#game { flex: 1 1 0; min-width: 0; min-height: 0; display: block; cursor: crosshair; background: #000; }

#sidebar {
  width: 250px; flex: 0 0 250px;
  background: linear-gradient(#161d26, #10151d);
  border-left: 1px solid #2c3947;
  padding: 10px; overflow-y: auto;
  font-size: 13px;
}
#minimap {
  width: 100%; height: auto; display: block;
  border: 2px solid #2c3947; border-radius: 6px;
  background: #0a0e13; cursor: pointer; margin-bottom: 10px;
}
.panel {
  background: #1a222c; border: 1px solid #2c3947;
  border-radius: 8px; padding: 9px; margin-bottom: 10px;
}
.ptitle { font-size: 11px; color: #8fa1b8; letter-spacing: 2px; margin-bottom: 7px; }
.bb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bb {
  background: #232c38; border: 1px solid #3a4757; color: #dfe6ee;
  border-radius: 6px; padding: 7px 4px; cursor: pointer;
  font-size: 12px; line-height: 1.4; font-family: inherit;
}
.bb:hover:not(.disabled) { background: #2e3a49; border-color: #4d5f76; }
.bb .cost { color: #f5c542; font-size: 11px; }
.bb.active { outline: 2px solid #5bd66a; background: #2a3b2a; }
.bb.disabled { opacity: 0.35; cursor: not-allowed; }

#selinfo { min-height: 64px; }
.siname { font-weight: 700; margin-bottom: 5px; }
.dim { color: #7d8b9c; font-size: 12px; }
.hpwrap { height: 8px; background: #0c1117; border-radius: 4px; overflow: hidden; margin: 3px 0; }
.hpfill { height: 100%; background: #5bd66a; border-radius: 4px; transition: width .15s; }

.qtitle { color: #8fa1b8; font-size: 11px; margin: 2px 0 4px; }
.qitem { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.qitem .hpwrap { flex: 1; margin: 0; height: 6px; }
.qx {
  background: #3a2020; color: #ff9a94; border: 1px solid #6b3030;
  border-radius: 4px; width: 16px; height: 16px; line-height: 1;
  cursor: pointer; font-size: 11px; padding: 0;
}
#tips { color: #5f6f82; font-size: 11px; line-height: 1.6; padding: 4px 2px; }

/* ── 提示气泡 ─────────────────────── */
#toast {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  background: rgba(18, 25, 33, .94); border: 1px solid #3a4757;
  border-radius: 8px; padding: 9px 18px; font-size: 14px;
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 25; white-space: nowrap;
}
#toast.show { opacity: 1; }

/* ── 结束画面 / 帮助 ──────────────── */
#overlay, #help {
  position: absolute; inset: 0; background: rgba(5, 8, 12, .78);
  display: none; align-items: center; justify-content: center; z-index: 30;
}
#overlay.show, #help.show { display: flex; }
#overlay { flex-direction: column; gap: 12px; }
#overlay-title { font-size: 44px; font-weight: 800; letter-spacing: 4px; }
#overlay-sub { color: #b9c5d4; }

.helpbox {
  background: #161d26; border: 1px solid #2c3947; border-radius: 12px;
  padding: 26px 30px; max-width: 620px; width: 92%;
}
.helpbox h1 { font-size: 28px; letter-spacing: 3px; margin-bottom: 2px; }
.helpbox .sub { color: #8fa1b8; margin-bottom: 14px; }
.helpgrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  font-size: 13px; line-height: 1.65; margin-bottom: 18px;
}
.helpgrid b { color: #f5c542; }
.bigbtn {
  background: #3d7bfd; border: none; color: #fff; font-size: 16px; font-weight: 700;
  padding: 10px 34px; border-radius: 8px; cursor: pointer; letter-spacing: 2px;
}
.bigbtn:hover { background: #5790ff; }